- The world in 3D
- Affordances
- Multimodal experiences
- Experience design
This chapter is from the book
This chapter is from the book
This chapter is from the book
Affordances
When you approach a door, how do you know the correct way to open it? When you approach a handle, you start to sense the intended behavior from the design of the object. You make that connection. The shape of the style of the handle should imply the options for interaction: up or down, push or pull, or twist. If you see a handle on a door, it is implied that it needs to be pulled. If you see a flat plate, that signals the need to push. Designing something with specific properties that drive a behavior for a specific interaction is called designing for affordance. The term affordance was first used by the perceptual psychologist James J. Gibson in his 1966 book, The Senses Considered as Perceptual Systems.1
When the design of the object interferes with the way we interact with it, then it causes frustration. In FIGURE 3.13, the handles that are closest look as though they should be pulled toward you. However, the doors work only when pushed as you can see in the second set of doors leading outside. The second set of doors is more accurately designed to help indicate the intended interaction needed.
)
FIGURE 3.13 Door Handles. Door handle design implies that the closest doors should be pulled; however, a user will be disappointed to find that they don’t move. In fact, the closest doors need to be pushed just like the second set of doors, even though they have differing affordance properties
You should design objects so that they help afford, or communicate, their intended interactions. This can avoid the user becoming frustrated that they cannot achieve their goal, such as to open a door. Have you ever had to teach a child how to use LEGO bricks? If you lay a pile of them on the floor, children will instantly start building and connecting, without any instruction. The opposing male and female surfaces provide visual directions that our brain can understand without any labeling needed.
We cannot discuss affordance without referencing Don Norman’s breakthrough book, The Design of Everyday Things (1988). Norman explains how the book covers everyday things:
focusing on the interplay between technology and people to ensure that the products actually fulfill human needs while being understandable and usable.
This is an area where the roles of industrial designers, interaction designers, and experience designers overlap. We strive to create objects that don’t require complicated instruction and labeling to understand how to use them. Norman’s introduction of this concept in the design fields has had immeasurable impact on how we look at computer-human interactions. The concept has a deep connection to psychology, as well as the understanding of how humans perceive physical objects. This understanding is a core fundamental needed for designing 3D in digital space, especially as we work toward designing worlds where our digital designs will be augmented to our physical world.
Real
As you are exploring your 3D design skills, it is important to look at the overall form—but at the same time, you want to consider the function. If you are creating an object that you expect people to rotate or turn, how will you indicate that behavior in the overall design? You should consider how the design will afford the best interaction. The best interactions happen when they are successful. Norman describes these as real affordances, as they are actual properties of the object or environment itself. These don’t require a previous understanding or knowledge of how something works, because the design indicates the proper interaction. Examples of this are mugs, teapots, and scissors. These don’t require any instruction or labels for people to use them correctly. They lend themselves to, and are designed for, just one function. If you look at a mug, there is only one handle, which is shaped for your hand; without any other option of where to grasp, what do you do? You wrap your hand around the handle and pick it up. The physical property of the handle means that it is real.
Perceived
In contrast to real affordances, perceived affordances may be more ambiguous. In this case, the affordance is not communicated through a physical property but rather through a user’s previous experience and interactions (FIGURE 3.14). Perceived affordance is something that you use in digital interactions and especially in computer interface design.
)
FIGURE 3.14 Affordance. Real affordance is shown on the left with the handle of the mug providing visual guidance on how to pick it up. Perceived affordance is shown on the right with the keyboard, trackpad, menu icon, and buttons which you know how to interact with because of your previous experiences.
When you arrive on a website, you look for a menu, and possibly even a hamburger menu icon, because you have learned that is the best way to navigate your way through a website. There isn’t a physical property to the site design that teaches you this. It is reliant on your previous knowledge and experience of being on other websites that you can find your way around. It is important, where relevant, to follow widely accepted computer-human interface guidelines. You will be sure to tap into what the user already expects and knows about an interaction. However, when you consider adding an icon into the user interface, you may decide that adding a tool tip or visual hint might be needed; see Chapter 7, “The UI of XR.” Consider what is required to ensure a positive user experience, especially as many XR users may be new to the experience.
To guide the user to interact with a digital 3D object in immersive scene, consider how you can add visual properties to offer hints to the user to ensure a proper and successful interaction. Some properties to consider:
Shadow can add an understanding of depth.
Guides inside or outside the object help show it can be selected.
Icons can indicate the motion, such as move, rotate, scale, select.
Feedback can provide additional information that communicates the interaction to the user through a variety of different senses, including sound, touch, or visual change.
What can it do?
If you are starting to get a better sense of affordances and how impactful your design choices are in assisting a user, it is also important to consider what kind of interactions are associated to each element. What it can do and how people will interact with it should greatly influence the design. For each element, identify its possible actions. The categories are:
Static: An object or element that does not move and cannot be interacted with, although could possibly be viewed from different perspectives
Animated: An object or element that moves in a sequential motion over a specific amount of time
Dynamic: An element that can change based on interactions or inputs from a user or over time
Interactive: An element that the user can control, manipulate, and interact with
Metric: An element that changes based on a mathematical calculation or algorithm
As you explore how to mimic the usability of physical objects in digital space or blended realities, research best practices by simply being aware of your own experiences in your everyday interactions. Be aware of the simplicity or complexity of objects, as well as the positive or negative experiences you have with them. There is always a design solution in any difficult interaction that you find throughout your daily tasks that might inspire your next XR experience. These real-world interactions engage our senses on multiple levels. As you become more aware and research your interactions, also notice the sensory experience.