So far in this lesson, we have covered two main concepts: interaction design and affordances. Now that we know what these concepts are, we’ll dissect how they are created in digital interfaces.
By examining the five dimensions of interaction design, we’ll answer the following questions:
- What are the different aspects of an interaction in a digital product?
- How do these aspects work together to create interactions and affordances?
5 Dimensions of IxD
The five dimensions of interaction design are the aspects that make up interactions in digital products. These dimensions are words, visual representations, physical objects or space, time, and behavior.
These dimensions are the factors that impact the user’s experience of an interaction. As designers, we can use the five dimensions of IxD as a starting point for planning interactions and their corresponding affordances.
Dimension 1: Words
Words, such as labels and instructions, help the user understand how to interact with the product. We should use language that is clear, concise, and easy for users to understand.
In a Codecademy lesson, there are buttons for navigating between exercises. These buttons are labeled “Back” and “Next.” In the context of the other elements on the screen, these one-word labels are likely enough to help us understand what will happen if we interact with either button.
Dimension 2: Visual representations
Visual representations refer to any visual element that the user can interact with, such as icons, images, diagrams, or typography. We should use visuals that are relevant to the interaction and aligned with standardly accepted usages.
For example, the “x” icon is a visual widely used for interactions involving exiting, closing, or canceling. If we open the chat on Codecademy’s Help Center, we can close that window by selecting the “x” icon.
Dimension 3: Physical objects or space
Physical objects refers to the device on which the product is displayed. Space is the environment that the user is in when they interact with the product.
It’s essential to understand the limitations and capabilities of the device(s) that will display the digital product. For example, we may use our hands and voice to interact with a tablet while we use a mouse to interact with a desktop computer. The available interactions should align with the characteristics of the device.
We also want to consider where the user will be when they use the product. For example, imagine a GPS app that drivers commonly use. The drivers’ environment is in motion, and they can only glance at the app for a few seconds before returning focus to the road. These environmental details inform our approach to designing practical interactions.
Dimension 4: Time
Time encompasses the changes that occur in the interface over time, such as animations, sounds, or media. Time also includes the time that users spend using the product.
For example, when opening the Codecademy website, this animation plays. The animation stops once the content has loaded.
Dimension 5: Behavior
The behavior dimension focuses on how the previous dimensions combine to define interactions. This dimension includes how users complete actions on an interface. It also covers how the interface responds to the user’s actions.
We can see the behavior dimension at work when we take a Codecademy quiz. After reading the question, we select one of the answer choices. The answer turns green. Then, clapping hands appear alongside the words “correct!” This feedback from the interface helps us determine that we can move on to the next question. (If we get feedback about an incorrect answer, we’ll stay on this page and try again).
On the right, review each example and decide which dimension of IxD is being discussed. Select the card to reveal the answer.