Learn

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 five dimensions of IxD were originally created by Gillian Crampton Smith, a professor at London’s Royal College of Art and Kevin Silver, a senior interaction designer.

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.

Screenshot of buttons from Codecademy’s LMS. The first button is labeled “Back” and the second button is labeled “Next.” The back button will move us backward in the lesson while the next button moves us forward.

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.

Screenshot of the chat window on Codecademy’s Help Center webpage. The chat shows an introductory message from the chatbot and a text input for the user to type in. Beneath this window, there’s a white “x” icon on a purple square that we can use to close the chat window.

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.

A gif of a loading animation. The Codecademy "C" emerges over a brief span of time as the site loads

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).

Gif from a Codecademy quiz. The learner selects an answer choice. The answer choice turns green. Then, a visual of hands clapping appears next to the word “Correct!”

Instructions

On the right, review each example and decide which dimension of IxD is being discussed. Select the card to reveal the answer.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?