The Importance of Affordance

How many times have you pulled on a door because it had a handle that looked like it could be pulled, only to find it’s actually a push door? The feeling of slight embarrassment and or annoyance can’t be denied. This is a perfect example of poor affordance – or the fact that the object behaves differently then its physical appearance would imply.

There’s a deep psychological reason that big red buttons are almost impossible to resist, and this reason is they have high affordance; the quality of an object which allows an individual to perform an action. The term has been around since 1977, coined by psychologist James J Gibson.

Our goal as usability professionals and interface designers should be to give our designs such high affordance that there is no doubt in the users mind what will happen when they click a link or button, enter data or otherwise interact with the system.

Users don’t like to feel stupid, and poor design can elicit those negative emotions we previously discussed. There are a number of ways in the physical world we can communicate an objects purpose without explicitly stating what it is. Colour (be wary- this may have cultural influences and should not be used on its own), size, weight, shape and feel all play their roll.

Now obviously there are some factors here which we can’t reproduce in the digital realm so we must use the other affordances to their maximum effect. Make buttons appear raised, and depress when they are clicked – make links change state; underline or colour change when they are hovered over.

Google, with its on-going mission to ‘clean’ its interface in its browser Chrome, removed the small plus sign from the new tab button. Regular users may not care about, or even notice this change. But ask yourself this – if you had never seen a browser or tabs before, would you deduce that the non-descript curvy rectangle next to the tab adds a new one? You may understand that its proximity to the tabs means it’s related in function somehow, if you hover over it, it changes colour indicating it can be clicked or interacted with.

Chances are a lot of users will click it out of curiosity and learn its behavior  but why make them go through that entire cognitive thought process when a simple plus sign in the button would have made its purpose far clearer?

In their quest for simplicity Google has perhaps gone a little too far. Whilst it is good to challenge convention, sometimes it has become a convention for a reason. In this case the overall affordance of the browsers interface has been reduced and its barrier to entry for newer users has been increased as a result.

Remember to always look at your designs through the eyes of someone who has never seen a website before and make sure the things you want them to interact with look like they can be interacted with.

Image courtesy