Let’s return to our example of ordering cupcakes from a food delivery app. When opening the app, there’s a screen that includes:

• Rectangle labeled “Email”
• Rectangle labeled “Password”
• “Log in” and “Sign up” buttons
• “Forgot Password” text in a bright color
• Icons for Google, Facebook, and Apple

What actions can you take from this screen? How do you know that these options are available? These questions lead us to an essential element of interaction design: affordances.

What is an Affordance?

An affordance is what we expect we can do with an object given its properties and our abilities.

Affordances are abundant in digital products and our everyday lives. For example, a ceramic mug has many affordances. A mug affords us to fill it with liquid, pick it up, or even toss it across the room (not recommended!).

An object’s affordances may not be available to everyone. Some people may be unable to lift the mug or comfortably drink from it. The same principle applies to digital products. To create affordances that work for a product’s users, we must understand their needs, experiences, and context.

Why Do Affordances Matter?

Affordances are what the user perceives to be possible. If the user doesn’t recognize affordances in the interface, they will struggle to interact with the product. We must design affordances that users can identify and understand.

Using Signifiers

One way to design effective affordances is to add clear signifiers. A signifier is an element of an affordance that we can perceive. It gives us a signal of what action we can take or how to complete the action.

Affordances exist with or without signifiers. For example, a mug may afford heating liquid in the microwave. A signifier, such as a label on the bottom of the mug, can be included to communicate this affordance. Over time, this signifier may wear off, but the microwave affordance still exists.

On an interface, signifiers take many forms, such as text, colors, animations, audio, or images. In the screenshot below from Codecademy Docs, there’s a title and a list of terms.

The terms afford us to click on them. Signifiers include:

• The bright purple color, which is only used on hyperlinked text
• An underline appears when the cursor hovers over a term

When designing affordances and signifiers, we should consider our users’ needs and standard design principles. Later in this lesson, we’ll analyze some foundational design principles called usability heuristics.

Before delving into the heuristics, we’ll explore the five dimensions of interaction design. These five dimensions are like building blocks. We use them to design interactions and create affordances that guide the users to them.