Have you ever used a product that’s so intuitive you can use it with both eyes closed? If so, you’ve witnessed the power of affordance in UX design. By leveraging affordances, designers can craft exceptional user experiences that are user friendly and effortless to navigate.
In this article, we’ll be delving into the world of affordances. We’ll explore:
Ready to learn about affordances? Let’s get started.
Affordances are the properties of an object that suggest or indicate how it can potentially be used. There are two types of affordances: actual or perceived.
Take a coffee mug, for instance. The shape and position of the handle indicate that you can hold it. Therefore, the mug handle “affords” holding (known as actual affordance). However, you can use the handle for other things, such as hanging the coffee mug. This is an example of perceived affordance — a subjective interpretation of the object’s use.
It’s important to note that the affordance of an object largely depends on the user’s abilities. If a user can’t grasp the handle on a coffee mug, it doesn’t offer the affordance of being held by that particular user.
In UX design, affordances are crucial because they let users know which actions are possible on an interface.
But how does this work? To understand this, let’s delve into the various affordances commonly used in UX design. We’ll also throw in some examples to illustrate the actions they indicate.
These affordances use clear, unambiguous cues to show users what actions and functionalities are available in a design. Such cues can be physical appearance or language.
For example, a button on an interface with the word Search indicates that you can trigger a search by pressing it. You know this because its appearance is similar to the button you use to trigger actions in real life, and the accompanying text explicitly states the action that will be triggered.
With explicit affordances, it’s easier for users — regardless of their technological know-how — to discover and use the functionalities they need. Some scenarios where they’re particularly useful include designing new or innovative interfaces and designing for users with limited prior experience.
These affordances aren’t immediately apparent or visually evident on the interface. Hence, users might need to explore further to discover the cues that reveal their functionalities. Such explorations are usually due to curiosity or familiarity with similar designs.
For example, you need to interact with the dropdown menu on a website for the functionalities to become evident. However, you’re less likely to interact with the menu if you’re unfamiliar with similar designs. Except, of course, you’re just curious.
Hidden affordances help to reduce clutter while prioritizing and streamlining the user flow. This helps ensure that users aren’t overwhelmed by too many options.
N.B., you should apply caution when using hidden affordances as users might not always be able to reveal the functionalities.
These affordances use imagery of real-life objects to communicate functionalities within an interface. However, perceiving these functionalities depends on the users’ preexisting knowledge and experiences.
For example, when you see an eye icon in a password input field, the function of an eye immediately comes to mind — to make something visible.
With metaphorical affordances, you can design interfaces that feel more natural and intuitive to users, making it easier for them to complete complex tasks.
These affordances rely on the user’s knowledge of common patterns in UI design.
For example, the navigation menu on a website usually follows a pattern that users are familiar with. Also, users can recognize the logo at the top left of a webpage as a way to navigate to the homepage.
By using patterns, you can provide mental shortcuts for users, eliminating the need to memorize.
N.B., pattern affordances are more useful when designing for tech-savvy audiences because non-tech-savvy people might be unfamiliar with the patterns.
These affordances indicate an absence of interaction possibilities for certain actions. They are typically used to discourage specific actions, prevent errors, or show that an element can’t be acted upon.
For example, a grayed-out button on a login form indicates that the user needs to input their data before proceeding:
These are design elements or cues that appear to afford an action, but in reality, they don’t. Such affordances can be misleading.
One example is a colored and underlined text that’s not a clickable link. Another example is an active button that looks grayed out. False affordance is a consequence of poor design techniques and can lead to low conversion rates.
You might be wondering how false affordances can reduce conversation rates. Don’t worry, it’ll all make sense once you understand how affordances guide user behaviors, which we’ll cover now.
When you come across a new object, how do you know the right way to use it? You rely on design cues that indicate the object’s intended behavior. If you see a light switch, the shape and position indicate that you need to flip it up or down. If you see a button, the shape indicates that it can be pressed down. And so on.
This concept also applies to UX design. Users rely on cues and indications in an interface (aka, affordances) to interact with a system effectively. Here are some ways designers use affordances to guide user interaction and behaviors:
One of the core visual elements designers use to show interactivity in an interface is buttons. They use visual cues such as the button’s shape, color, and style to align with the users’ expectations and prior experiences.
For example, a brightly colored button with a shadow suggests clickability, guiding users to interact with it.
Another way designers guide user interaction is through the use of functional cues. These cues are not explicit. Instead, they suggest potential interaction with an element.
For example, a search input field with a magnifying glass icon implies that users can input a query to initiate a search. With functional cues, designers can guide users toward specific actions without explicitly stating them.
People naturally seek cues that indicate progress or completion of a task. So, designers can guide user behavior by employing response and feedback mechanisms. One way is through the use of notifications.
For example, when you add an item to your shopping cart, a number appears next to the cart icon, acknowledging your action. Clear and timely feedback like that can encourage you to take further action.
Designers use affordances to prevent user errors by guiding them to interact with the system in a desired manner. One way is by offering confirmation and undo options for critical or irreversible actions.
For example, a dialog box that asks for confirmation before permanently deleting your account or an undo button after making changes.
When a process involves multiple steps, it can get overwhelming for users. Designers avoid this information overload by disclosing information progressively.
An example is the progress indicators in the ordering process on shopping platforms. These indicators guide you by showing the different steps involved and how much progress you’ve made. Progressive disclosure makes navigation easier, thereby improving usability and engagement.
These are some ways designers use affordances to guide user behavior and interactions. You can use them to create intuitive designs that guide users to perform the required actions.
But not so fast. There are a few things to keep in mind before designing affordances. Let’s check them out.
Signifiers refer to any perceivable indicator that communicates appropriate behavior to a person. If there’s a chance that an affordance might not be obvious, use signifiers (i.e., elements such as text) to indicate what users should do.
As we mentioned earlier in this article, the affordance of an object largely depends on the user’s abilities. Hence, you need to learn about your users. Then, take their abilities and experiences into account when designing affordances. That way, you can give them the best possible cues.
Users already have their mental models of how they expect things to work. Stick to these recognized models. For example, the clickable logo on the top left of a webpage.
Design principles are a set of techniques that help create user-friendly designs. Use them to design clear affordances that help guide your users.
It’s one thing for a design to afford a function. It’s another for the users to perceive the intended function. Bear in mind that several factors shape perception. So, it’s best to always test your designs with members of your target audience to ensure that they can perceive the intended functions.
Different contexts have their unique constraints. By considering factors such as the user’s device, environment, and abilities, you can design affordances that fit the various contexts and give the users the best possible experience.
For example, when designing for smaller devices with a touchscreen, using larger buttons can make interactions easier for users.
Talking about designing for smaller screens, let’s explore some considerations for designing cross-platform and multi-device affordances.
Strive to maintain a consistent user experience across various platforms and devices. This makes it easier for users to transfer their knowledge seamlessly from one device to another.
Users will access your design from various devices with different screen sizes, resolutions, and orientations. So, ensure that your designs adapt fluidly to various screen sizes to ensure optimal usability.
Different devices have different input methods. Consider input options such as keyboard, touchscreen, mouse, etc. Adapt the affordances to suit the input methods for each device.
Every platform has its own design guidelines. And just as with all other aspects of your designs, it’s important to align your affordances with these guidelines and conventions of the platform you’re designing for. This ensures a more familiar and intuitive experience for your users.
Affordances have a huge impact on user experience. They can help guide user interactions and behaviors effectively. By applying the principles and considerations discussed in this article, you can create exceptional user experiences that are so intuitive users can navigate them effortlessly.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
You know that good design is all in the details. And nicely used kerning impacts readability, user flow, and brand professionalism in your UI design — more on that in this blog.
Learn more →
