By the time we can talk, people have an intuitive understanding of how to interact with an object based on how it looks and feels. This is called affordance. Knobs afford turning, levers afford swinging, handles afford gripping, and buttons afford pushing. To better understand affordance and its role in UX and UI design, let’s take a look at one of the most common interfaces in the physical world: doors.
Well, what do doors have to do with UX?
People interact with doors dozens of times a day; they are unavoidable obstacles that allow us to navigate between spaces. Doors are interfaces through which people can enter or exit a space; door handles are an interfaces that allow users to operate doors. The process of operating a door is quite complex if we list out the steps involved: First the user must identify the door, locate the handle or latch mechanism, operate the latch (if present), determine if the door must be pulled or pushed, open the door, and – for those of us who weren’t raised in a barn – close it behind them. We’re able to accomplish all of this in one effortless, thoughtless, motion because the door affords how it can be used.
Consider how a door looks. Most doors are large enough for a person to pass through easily and generally have a handle and hinges of some sort. These properties afford that the door can be opened, and from which side it will swing open. How the user operates the door, whether there is a handle or a knob, whether it is pushed or pulled open, is further afforded by the door’s design.
Lying, Cheating, Doors.
A door handle’s design affords how it is operated by the user. Different shapes and styles of handles afford different ways the door is operated. Knobs afford turning. Whether it turns affords whether or not the door is locked. Have you ever been fooled into thinking a door is locked by a door handle that jiggles but doesn’t turn? Then a stranger walks right past you, doesn’t even try to turn the handle, swings it open without hesitation, and quietly shames you in the process? Don’t worry; it wasn’t your fault, it was bad UX, with bad UI.
The door lied to you. The handle’s movement yielded a false affordance; it didn’t need to be turned to unlatch the door, and its refusal to move did not indicate that it was locked. The fact that the door could still be opened was a hidden affordance; there was no observable indication that it could be opened without trying to force your way into the room.
The orientation of a door’s handle can afford how it opens; vertical handles afford pulling while horizontal bars afford pushing. With these simple visual cues, we can pass through most public doors without hesitation or thought. It becomes such second nature that false affordances in door handle design lead to common and audible embarrassment. How many times have you literally walked into a door because the handle afforded a push action, announcing your mistake with the slam of your body into a waist-high sign that reads ‘pull?’
Meanwhile, in the virtual world…
Like doors in the physical world, links allow people to navigate virtual spaces. Users must be able to identify a link simply by seeing it; they must know how and when they can use it by its affordance. When doors offer false affordances, shaming and frustrating people, most people will give it another shot and try to open it a different way. After all, they’re already invested, on location, and it takes time and effort to go somewhere else. Online and in apps, going somewhere else is a click or touch away; good UX is a necessity.
Image Credit: marc falardeau