Designing a UI can be quite overwhelming when you start focusing in on all the details. But good design should be intuitive and have purpose. People are using a product because they are trying to get somewhere and it’s important that the capabilities given to a user are something that is always being considered.
Imagine a person standing on one side of a gully. In front of them is a river. Their only objective is to get to the other side (without getting wet). They can’t get to the other side without help. You can either help them or not. Possibly by showing them where there is a bridge so they can cross safely to the other side. Once they see the bridge they know to cross it to get to the other side.
In terms of seeing this from a digital point of view imagine a person is lost. They have just downloaded an app to their phone to see how they can get to where they are supposed to be. They didn’t download this app to kill time they downloaded it for the capability. The user needs to know that the information they are seeking exists: be able to find it, and figure out how to use it. Although in the this case our aforementioned bridge is more likely to be something like a button.
This is where the word ‘affordance’ comes into play. The interface ‘affords’ the capability to the user and it’s our job as designers to understand the types of affordances we can use to communicate whether an object can be clicked, slid, pulled or pressed and whether it is going to get the user to where they want to be.
An action possibility available in the environment to an individual, is independent of the individual's ability to perceive this possibility
- James J. Gibson
By getting a greater understanding how affordance works, designers can better master interface or product design; making interfaces easier to navigate and encouraging users to undertake the actions you want, like signing up for a product, sharing content or connecting with another user.
Types of Affordance
An explicit affordance is signaled by language or an object’s physical appearance. Sometimes being very obvious such as a ‘click here’ link that explicitly affords clicking, or a button that is raised and tactile in it’s appearance. It’s no guess how to interact with these elements even if you are new to that particular interface.
When to use explicit affordances:
When an interface’s users are unlikely to have been exposed to many affordance patterns in the past. For example your target audience is aged 70+ and are unlikely to recognise common design patterns so it’s best to make it clear.
Explicit affordance for target audiences aged 70+. Source: BUPA
When no patterns have been established to signal the affordance of an action. Maybe using an icon to represent the capability is too obscure and it’s better to spell it out rather than confuse the user.
Explicit affordance. Source: Envato
This is most common type of affordance in modern interface design. A pattern can indicates familiar interaction affordances and is an established language of communication. For example the hamburger navigation menu is now an established trend, or pattern.
Below are some more common patterns:
- Blue/underlined links
- Logos returning to homepage
- Gray text in form fields
- Account manager in upper-right corner
- Accented and grayed dots showing position in multi-step tasks
- Arrows for scrolling image carousels
- Navigation bar across the top
- Search field with magnifying glass
Pattern affordance. Source: Envato Studio Hompage
To understand a designs reliance on pattern affordances, ask yourself, if you had never interacted with the web or a smartphone before but you knew how to perform basic actions like clicking and tapping, would you understand the actions afforded to you by this interface? Although patterns provide us with shortcuts to easily communicate affordances they rely on the wealth of time already spent interacting with apps, websites and other interfaces.
A metaphorical affordance communicates using real world objects. The most common being seen in the use of icons.
- Envelope icon for mail
- House icon for home
- Handset icon for phone call
- Printer icon affords printing the document.
By using metaphors drawn from real-world objects, we can communicate affordance much more quickly for complex tasks than we could using explicit affordance. A phone icon can communicate the capability of a phone call more quickly and easily than the words ‘Make a phone call’. Although again I stress the importance of knowing your audience. A paper plane icon to signify a contact us link may need to be accompanied by text to communicate more clearly what it signifies.
A hidden affordance is a pattern reliant on another interaction such as hovering with your cursor. A link that changes colour once you have hovered over it or a button that pops up with a new action. Often used in complex interfaces to reduce clutter and deemphasise less important actions a hidden affordance can be quite risky especially if the user might not intuitively know how to reveal the affordance. A big thing to take into consideration as well is that hover states do not work for mobile devices so your hidden affordances may have to be rethought for different devices.
Hidden affordance. Source: Linkedin/Pradeep Kumar
The Double Delete. Source: Dribble/Adam Whitcroft
Sometimes it’s necessary to signal that a UI element does not afford any capabilities at the moment. Most commonly, this is achieved by ‘greying out’ the element. We do this by using negative affordance.
In the example below “Save Changes” button does not invoke any action until the fields are completely filled out.
If this technique is smartly used, it can help the users with quickly getting familiar with the parts of the interface which bear quite important capabilities.
Negative affordance. Source: Linkedin/Pradeep Kumar
In summary a truly proficient designer will be able to balance both style and function and the smart use of affordances can help your users. Whether they are lost or still trying to cross that gully.
UI and Capability. Medium/Ryan Singer
What is the most underrrated word in web design? Smashing Magazine/Natasha Postolovski
Web Design Glossary: What is “Affordance”? Envato/Ian Yates
Affordances. The Interaction Design Foundation/Victor Kaptelinin
Affordances: The Designer's Secret Weapon. Envato