Helping a user understand what they can interact with – and indeed what they can’t – is of fundamental importance in web design, says Gene Crawford
This article first appeared in issue 232 of .net magazine – the world's best-selling magazine for web designers and developers.
In his now famous book The Design of Everyday Things, Dr Donald Norman introduced the concept of affordance to the world of design.
The term affordance refers to the actions that a person can take on an object. For example, we know that you flip a light switch up or down to turn the lights on or off because we inherently understand this affordance of the light switch. In screen design what we are really working with is perceived affordance, because according to Dr Norman, as designers the only thing we have control over is what the user perceives to be the affordances of what we create.
Consider the onscreen button. It’s up to us to make sure the user understands that it’s clickable by whatever visual design queues we give to it.
Perception
We can further divide affordance into three different sub-divisions according to design researcher William Gaver. These categories are perceptible, hidden and false affordance.
A hidden affordance is where something has an action that can be initiated, but the user doesn’t notice or understand it. A false affordance is where something is giving off the signals of being actionable, but much like a decoy, the user can’t actually do anything with it.
It’s important to note the distinctions here because these ideas are expressed pretty dramatically when we begin to study design patterns and employ usability testing for our clients’ products. Affordance and how people perceive our design is the very core of what we do as professionals.
Five examples to check out
1. Amazon It doesn’t utilise many visual clues as to what’s clickable or not for all the links and items on the page, but Amazon's site is amazingly successful in that it transacts millions of dollars-worth of products daily. Is this a good example of hidden affordance?
2. Just Landed This airport pickup app has a nicely designed download button that looks like something you can clearly click on.
3. The light switch Most people inherently understand the affordance of the standard American style light switch.
4. iOSApple’s mobile operating system employs many great concepts to help one understand what’s an interactive element and what’s not. This is a huge component since the way you use it is through a touchscreen, and the only feedback you get is visual and not by the actual sense of touch.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
5. The thermostat It’s a longstanding urban legend that many thermostats in office buildings actually have no effect or are not connected to the actual air conditioning system, thus giving people a false sense of control over them, or a false affordance.
