Good usability is an integral aspect of good design. Many things contribute to usability, but one of the most important is affordances. Affordances aid successful interactions with the world of physical and digital objects. In this article, I will help you break down just what affordances are, as well as how to apply affordances in product design. I will also share some excellent affordance examples from the real and digital worlds.
What is affordance?
The term “affordance” was first introduced by the psychologist James Gibson when he researched visual perception. Gibson used this term to describe the actions that people consider possible when interacting with an object, usually based on their perception or knowledge about this object. All the objects that surround us have affordances. For instance, a button that you use to call an elevator affords you to push it, a chair affords you to sit on it, and a door affords you to open it. Learning the affordances of the environment we live in is an integral part of our socialization.
Design of a chair affords sitting on it. Image credit HermanMiller.What is affordance in UX?
Affordance is a relationship between a person and a physical or digital object. User interface (UI) affordances are perceivable, actionable possibilities. This means that users observe a UI and decide which actions are possible based on their expectations and previous experiences. Don Norman, a human-computer interaction researcher, perfectly summarizes the importance of affordances in his book The Design Of Everyday Things: “When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”
Perceivable affordances in a UI are generally categorized into one of the following categories:
- Explicit. Explicit, visible characteristics of an object that clearly indicate what actions are possible. For example, when a user sees an object that appears raised from the surrounding surface, they start to think that they can click or tap this object to interact. The user makes a guess that the object that looks pushable invites pushing.
- Hidden. As the name implies, hidden affordances are hidden by default and become apparent only once a certain condition has been met. A classic example is a hamburger icon that reveals a list of navigation options on click. Hidden affordance is commonly used in complex products where it’s impossible to make every single action apparent because it will clutter the UI. The problem with this category of affordances is that they might not be obvious for all groups of users.
- Negative. In some cases, it’s important to give users a signal that a UI element does not currently afford any capabilities. Designers typically do this by graying out an element, so users know that a grayed element means a disabled element.
- False. An object’s characteristics suggest users should take a particular action, but users cannot perform it in reality. Examples include a rectangular object that looks like a button but isn’t a button, or underlined text that looks like a link but isn’t a link. Designers should avoid creating false affordances in their products.
What are affordance best practices in web design?
Now that you know what affordances are, it’s time to learn how to use them in your design. Errors typically happen when users incorrectly perceive the actions they can take when interacting with a particular object. Good affordances can help you minimize the number of user errors and reduce unnecessary cognitive load.
Know your users
Ideally, any human being should be able to guess how to interact with the UI, even if they have never seen this interface before. Unfortunately, this rarely happens in real life. To minimize potential usability problems, it’s essential to learn how your target audience anticipates affordances in relation to the context of your design. Does your design look familiar to them? Can they decode the meaning of individual functional controls?
The only way to know that is to use prototyping software to create a version of your future design and validate it with your users. The goal of prototype testing is to learn what experience users have with your product and their general level of computer savviness. It will help you understand what visual cues work for them.
Follow design conventions
Jakob’s Law of Internet User Experience states that users prefer your site to work the same way as all the other sites they already know. People use dozens of different sites and apps on a daily basis, and they become really good at quickly parsing pages or screens and figuring out commonly used elements. When you use conventional elements and patterns, you help users understand how to use your product.
Let’s talk about web design. One good pattern is the top-level navigation menu. Users expect to see top-level navigation options at the top of a web page. Another good example is a website logo in the website header. When users click on the logo, they expect to be taken to the site’s home page. Creating familiar patterns using web design tools will ultimately make your product easier to use for your users.
Using familiar patterns is the best way to communicate with your audience. Top-level navigation at CCN website. Image credit CNN.Sometimes designers want to reinvent the wheel. This includes introducing new patterns because they believe they have better solutions to existing problems. But designers should remember that their abnormal design decisions could produce extra friction for user interactions. When users encounter an unfamiliar element, they need to learn how to use it and memorize this.
Provide signifiers
A signifier is the perceivable part of an affordance. Signifiers indicate the existence of affordances. A signifier is a signal that users receive when they interact with your product, showing them what can be done with a particular object. It might be a visual cue that helps users to interact with an interface. Signifiers exist both for physical and digital products. A signifier for a door would be a sign or sticker with the word “Push” on it.
There are a lot of ways designers can incorporate signifiers in their interfaces. Introducing icons in the user interface is one of the most common ways to communicate UI affordance. Here are some examples:
- Home icon affords going to a home page
- Magnifying glass icon affords searching
- Floppy disk icon affords data saving
- Envelope icon affords sending an email
- Headset icon affords making phone calls
Those icons are universal, meaning most users understand their meaning without any words. It’s interesting that some icons, like floppy disks, lose connection with the original physical objects they are supposed to represent (people do not use floppy disks nowadays) but are still well-recognized among users.
Easily recognizable signifier icons, including a home, a printer, and a magnifying glass. Image credit icons8.Apart from icons, it’s possible to provide signifiers as direct hints for users. For example, you can give the user extra guidance with a pop-up dialogue box that appears when they hover their mouse cursor over different elements or tools.
Provide immediate feedback on user interactions
By providing feedback on user interactions, you acknowledge user input and help them learn your interface faster. Feedback doesn’t have to be visual, either. In many cases, it’s possible to utilize audio or even haptic feedback. The goal here is to give users a clear signal that the system understands them. Animated effects introduced in UI design can create a powerful connection between the physical and virtual worlds. Look at the example below. When the user turns the switch on, a few parameters change, such as the background color of the element and the color of the toggle.
Functional animation reinforces the interaction between humans and computers. Image credit Apple.Provide better usability with affordances
Affordances make our life easier, as they imply what interactions are possible with the objects around us. Good affordances will help you design products with good usability. When users know how to interact with your product right away, they don’t have to spend time learning your UI and can focus on what’s important: solving their problems.