Affordance

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 notice flat design does force simplification on designers which should reduce visual clutter.

Example of flat design website from very.co.uk

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 and so 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 which is highlighted –  ‘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 and doesn’t look anything like a CTA.  I completely missed the CTA because of a lack of visual cues.

Image of Santander.co.uk site with poor affordance caused by flat design

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 as 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 in the split second that it takes to make a decision.

Conclusion:

Affordance is an often overlooked aspect of website optimisation because 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.