Affordances, in the physical world, are described as the perceived and actual properties or features of an object that dictate their use without explanation: a coin slot, a keyhole, a handle on a suitcase, a door handle; everyday things that we automatically understand what they’re for and how to use them.
In the digital world, in just the same way, UX affordances are the interactive elements of a website, app, or product that create intuitive operations, allowing us to focus on the content we need and not the platform’s operation.
As UX researchers, we understand the true value and benefits behind these intuitive yet innovative features and how they differentiate between strong and weak visual design. Users shouldn’t really notice the best affordances but accept them automatically because they already understand the visual language they work within: hamburger menus, shopping cart functions, email or social media icons are all crystal-clear affordances whose intended function is obvious, making their digital interactions instinctive and unconscious.
However, as UX researchers, we’ve regularly found that a user interface can soon become confusing or problematic without the necessary affordances in place that its operators understand.
Through UX research and testing, we uncover the operational problems of products where users:
- Don’t know what action to take
- Fail to see a possible next step
- Fail to recognise a possible outcome opportunity
- Lose control of a function
- Lose control of navigation
- Lose confidence in complex tasks
- Fail to spot visual cues
As with all UX and UI components and features, the only way to realistically eliminate errors and misunderstandings is through informed, data-driven design and regular testing. The term affordance refers to an element’s fundamental properties, and primarily, those fundamental properties should guide the user down a specified route intended to enhance the experience. Only through testing can we see if our products are fit for purpose.
Effective affordance in international markets
Whether you’re building for a local, cultural, or global market, the best user-friendly interfaces feature all types of affordances your audience readily recognises to deliver instinctual user interactions. Research and testing play a huge part in breaking global markets, with many graphical or metaphorical affordances failing to convert successfully, providing confusion or, worse still, offence.
Definition and Explanation of Affordance in UX Design
Affordance is a property or feature of an object that presents a prompt or visual clue to what that element does to achieve a specified outcome.
Importance of Affordance in UX Design
- Guides user behaviour – Well-designed and positioned affordances direct users to where they need to be—simply and instinctually.
- Improves usability – Just as with the affordance of physical objects, these often tiny components play a huge part in a fast-flowing digital experience, adding ease to how we interact with them. This increased usability translates into additional engagement and higher conversion rates.
- Creates a consistent user experience – Consistency is essential in every successful digital interface. Keeping consistent with the formats our users understand, expect, and enjoy ensures they’ll continue to engage with them repeatedly.
- Affordance Enhances User Experience – Everything we do aims to provide a better experience for clients, customers, and users. Such affordances deliver the user-friendly designs we strive to produce.
- UX and UI Become More Intuitive and Pleasurable to Use – The true goal of our work.
Types of Affordances in UX Design
Explicit Affordances
Explicit affordances are clearly labelled to ensure obvious use, often using a picture label or text instruction.
For example, a button with a text description, ‘click here for more info’, ‘add to cart’, or ‘submit form’.
Implicit Affordances
Implicit affordances refer to elements that don’t have obvious visual cues or labels but are recognised as opportunities due to common design through the context of position or appearance.
For example, a row of social media icons or client logos.
Hidden Affordances
Hidden affordances remain out of sight until the user takes the necessary action to reveal them.
For example, a drop-down menu appears as the user hovers over the top-level menu item (or when the user clicks a hamburger menu on smaller screens) or a text field that appears only when clicking a search function icon.
Graphic/Metaphorical Affordances
These types of affordances are icons or images representing a real-life counterpart. They can be icons, illustrations, or photos.
For example, the magnifying glass icon can represent a search bar or be used as a zoom function, an envelope icon for email, a shopping basket for, well, a digital shopping basket, or a flag to change languages or locations.
Skeuomorphic Affordances
Skeuomorphic affordances look and operate like their physical world counterparts.
For example, a digital book with turnable pages, a calendar that scrolls or flips from month to month, or items that can be dragged into new positions.
Pattern Affordances
Pattern affordances rely on already recognisable UI methods and patterns.
For example, navigation menus at the top or bottom of pages, website logos that return users to the homepage, or underlined text in a different colour representing a link.
Negative affordances
Negative affordances represent inactive design elements.
For example, greyed-out buttons, automatically completed input fields, or the remaining unhighlighted buttons of an options tab.
False affordances
False affordances appear to dictate a particular action but offer something different to what’s expected or nothing at all.
For example, coloured, underlined text that doesn’t offer a clickable link or a greyed-out button that still works when clicked.
Key Principles of Designing Effective Affordances
Put users at the centre of the design
Research and testing will show which versions or options users understand instinctively, delivering the most regular and successful outcomes and returns. To understand your users better, define personas and match your designs to them to create effective affordances.
Follow Good Design Convention – Consistency, Familiarity, and Logic
Stay within the recognisable conventions of pattern affordance and common design conventions. A new app or feature will already feel familiar if the elements it includes follow a format we’re used to.
Visibility and Feedback
Clean and clear design means keeping things simple while depicting clear goals from an element’s affordance. Ensure notification affordances are in operation where your users need confirmation or feedback on an action.
Clarity and Intuitiveness
A user interface’s clarity and intuitive operation result in a seamless user experience that flows from one action or area to another. Websites and apps should be intuitive and familiar enough to guide users to their required content and easily deliver conversions.
Elements of UI that Utilize Affordance UX
Buttons
Buttons are our strongest call-to-action elements, so it’s imperative that their role is obvious and easily recognised. Shape, size, colour, labels, contrast, and copy can all play their part.
Icons
Icons are typically pattern affordances, where we recognise their function through the simplicity of what they depict, for example, social media favourite and reaction icons, email, download, or share icons. Despite differences in brand style, many icons will follow a universal (or at least geographical) format we automatically understand.
Input Fields
We know we’re expected to add data when faced with an input field. They often include an explicit affordance of sample copy in a pale colour and a notification affordance when completed correctly.
Animations
Animated affordances can show users how to operate a specific function or option. Alternatively, a shaking button shows us we’ve done something wrong and need to address a problem to continue—all without a lengthy text explanation.
Notifications
Notification affordances indicate a change or a required action. Such visual affordances may be a tick next to a completed input field of a form, an update to the number of items in a basket, or the red numbered circles over the apps on your iPhone.
Common Challenges and Pitfalls in Implementing Affordance
Balancing Simplicity and Complexity
The true beauty of affordance design is in its simplicity. However, each interactive element can control something incredibly complex. The art of good design means finding a balance between the two, producing the simplest way to perform the most complex tasks.
Avoiding False or Misleading Affordances
False affordances can mislead users, causing confusion in their operation. We know how easily customers abandon half-filled carts and apps when encountering problem points, so removing confusing elements or making it clear where to find the next step or instances of hidden affordances becomes a necessity.
Best Practices for Creating a Seamless Affordance Design
User Research and Testing for Optimal User Experience
As UX researchers, we’re perfectly placed to tell you just how important our work is in this area. Continual testing and iteration throughout stages and processes are necessary in every step of digital product design. With affordances, we work with elements as simple as A-B testing (delivering data-driven choices that convert) through to international UX testing, where cultural and geographical differences can render a process, user interface, or even an entire app useless.
Stay Up to Date with Design Patterns and Conventions
With technology and design constantly evolving, designers must keep ahead of the curve. Keeping up to date with popular conventions, new tools, innovations, and fashions will keep your digital interfaces operational and in line with users’ expectations.
Conclusion: The Power of Effective Affordance in Transforming User Experience
You’ll now appreciate just how important the physical appearance and pivotal properties of affordances are. Conducting meaningful UX research is how we find the problems and issues with our apps and products and which of our solutions return the ideal results.
Despite appearing as small parts of a vast system, UX design relies heavily on effective affordance to deliver the best-performing projects. Affordances help avoid or prevent user errors and work around software limitations, whether basic copy updates or representations of real or original objects; leveraging affordances has become an art form.
If you would like to know more about putting your customers in control email us at hello@ux247.com.
