Affordances 101 – What You Can Learn About User Interactions
Users require physical clues on what they should do on your site and where they should do it. This is where visual clues or affordances come in – they show users what they should do. This article will show you how you can design the best affordances to guide your site users.
Design advanced prototypes that allow you to test real user experience. Try UXPin, an end-to-end design tool that facilitates collaboration, simplifies design handoff, and makes high-fidelity prototyping fast and easy. Sign up for a free trial.
What is an Affordance?
The term affordance refers to the properties of an object that imply how the object can be used. Affordances give clues on how an object can be used to carry out an action. For instance, the slots on a vending machine are affordances, they show you that you can insert something, perhaps a coin in order to make a purchase. The possibility of inserting something into a slot, is its affordance.
In the context of UI and UX, affordances are used to help users know what they should do without having to use pictures, labels or instructions. A great example of affordances are buttons, users know that buttons can be pushed because they resemble the buttons that they encounter and push in real life. The likelihood of a user pushing a button is the button’s affordance.
Affordances provide useful visual cues and psychological shortcuts that help users understand the tasks that they can carry out on a website or within an app. When used well, affordances make your designs intuitive and easy to use which increases conversion, engagement, and user satisfaction.
Affordance vs. Signifier – Key Differences
What’s the difference between an affordance and a signifier? A signifier indicates that an affordance exists, it can be a mark, a sound or a label. Microcopy on a button that states ‘click to create an account’ is a signifier that indicates the presence of the affordance of pushing a button.
Types of affordances
For you to understand how you can use affordances to improve user interactions, you need to first understand the different types of affordances available. They are: explicit, hidden, pattern, metaphorical, false and negative.
Explicit affordances
These affordances give cues using the physical appearance of an object or language. Buttons that have a high contrast and resemble real life buttons afford pushing. Similarly, an input field with the words ‘enter email address’ affords an email address being entered. Facebook uses explicit affordances on its buttons that are clearly labelled as ‘Log In’ and ‘Create Account’ and on its input fields that are also labeled.
Explicit affordances (Source)
These affordances are said to be explicit because almost anyone can understand how they need to interact with the element, even if they have never interacted with digital interfaces before.
Explicit affordances are easily discoverable by users and are thus well suited for users who are not tech-savvy and do not understand common design conventions or patterns. These affordances are also useful when you are introducing new or innovative digital interfaces that users are not familiar with.
Hidden affordances
Hidden affordances are not revealed to the user until they take a specific action such as hoovering or mousing over an element. The drop down menu is a hidden affordance where the user cannot see the other menu items unless they click on or hover on the parent tab.
The Asos Marketplace website uses a drop down menu to display more clothing categories. Users cannot see this drop down menu until they click on the clothing tab.
Hidden affordances are used to reduce clutter and emphasize on the hierarchy/level of importance of the actions that users can take.
However, there is a danger that users might not know how to reveal the hidden affordances. This danger shows that hidden affordances should not be used for important actions and should be reserved for actions that users can do without.
Pattern affordances
Pattern affordances are the most common type of affordance because they rely on patterns that users already recognize. The navigation on the homepage of a website is a pattern that many users understand and therefore many websites, such as Apple, have a navigation on their homepages.
Another pattern is the logo on a website which takes users back to the homepage when clicked. Users also understand that in a body of text, text that has a different color, is underlined or italicized is almost always a link.
Patterns provide useful mental shortcuts for users which removes the need for memorization. Patterns are useful when designing for an audience that is tech savvy but might be confusing for audiences that have less experience with digital interfaces. As a designer, you should be wary of breaking existing patterns because users will have to learn the new pattern before they can recognize it.
Metaphorical affordances
These affordances use real-life objects as metaphors for actions that users can take. Metaphorical affordances are used in many interface icons to inform users of the actions that they can take.
The magnifying glass icon affords searching, the envelope icon affords sending an email and the plus sign icon affords creating something new like a document or email.
These affordances can be contextual as in the case of the magnifying glass ison which affords searching when put next an input field and affords zooming when put in a document viewer. Because of their relationship to real world objects, metaphorical affordances are useful for communicating complex tasks quickly as users can easily understand them.
Negative affordances
These affordances tell users that some design elements are inactive and that they cannot be acted upon. Such affordances include greyed out buttons or input fields that can only be activated if another action is complete. In the example below, the password input field can only be activated when the user clicks on the change button.
Negative affordances are useful in guiding users on the order in which they need to take action. A user cannot submit a form unless they fill out all the fields, so the submit button is greyed out and only becomes active when all the fields are filled out.
False affordances
These are affordances that appear to afford one action but actually afford another action or no action at all. A piece of text that is colored and underlined but not linked is a false affordance. A greyed out button which affords the pattern of being inactive but is actually clickable is a false affordance.
This is the case on Medium, the ‘Manage Publications’ and ‘Manage Newsletters‘ buttons are greyed out and thus look inactive but they are actually clickable.
False affordance causes user errors and lower conversions, so designers should avoid them.
How to Design the Best Affordances?
When done right, affordances reduce user errors and cognitive load while improving user experience and increasing conversions. Here are some tips to help you design the best affordances.
- Always put the users first by researching their needs and their context. This information will help you to design helpful affordances for your users.
- Create logical and clear affordances which will make it easy for your users to intuitively understand your affordances.
- Use signifiers to provide more information to your users about the affordances you design. You can use text labels, highlights, color and shadows to male affordances obvious.
- Follow common design conventions to make it easy for users to understand your affordances.
- Use size to show your users the affordances that they should prioritize.
Design the Best Affordances
Affordances give users metal shortcuts that help them understand the tasks that they can carry out on a digital interface. Use UXPin to create realistic buttons that get clicks and use the pattern library to create clear and consistent affordances throughout your designs.
Sign up for a free trial of UXPin today and start collaborating with your team on your affordance designs.
