Definition
Affordance (often referred to as perceived affordance) refers to how people automatically and largely unconsciously look for visual cues to find and work out how to interact with objects and tools to help them complete a task. For example call to action buttons on websites often use rounded corners and shadows to provide subtle clues that they can be clicked.
Beware of flat design:
Affordance can be significantly reduced by the overuse of the flat design style. This can cause serious usability problems because the flat design approach eliminates the use of glossy or three-dimensional visual effects. The lack of these visual cues can significantly reduce conversion rates because visitors unconsciously use visual cues to help them navigate and make sense of a web page.
Below is an image of the very.co.uk website which uses a flat design style. Notice that it is not obvious that both the “Hotpoint” and the “Shop Hotpoint Deals” boxes at the bottom of the screen are both clickable buttons. On a positive note flat design does force simplification on designers which should reduce visual clutter.
Flat design punishes nonsensical content organisation as users will miss key cues that they might have noticed in a traditional design. Apart from annoying users missed instructions could result in more calls to customer services or increased returns. It can make it more difficult to create a clear visual hierarchy. A peripheral button may get more clicks than you wish at the expense of a primary call to action.
Affordance suffers on the Santander.co.uk retail banking site because of the overuse of the flat design style. The CTA on the left – ‘View standing orders’ is redundant as I am already on that page. However, as I want to set up a standing order I am forced to read the instructions that tell me to look in the left hand menu. As the relevant button is just a white box, I completely missed it because of a lack of visual cues.
Users don’t read screens!
App and website users scan the content and quick-flick scroll on touchscreens as they look to be directed down a path that gives their visit a purpose. The task that a user is seeking to complete should at least be influenced by the designer. We are asking them to interact with the user-interface. Subtle design cues such as depth and shadowing allow designers to inform users what content to notice and interact with.
Conclusion:
People rely on their subconscious brain to use visual cues to help them interact with elements on a web page. However, poor affordance can create uncertainty and frustration which can significantly reduce user satisfaction and conversion.
Resources:
Conversion marketing – Glossary of Conversion Marketing.
Over 300 tools reviewed – Digital Marketing Toolbox.
