What designers get wrong when they talk about affordances

We all hate jargon and yet – we all use it. It’s one of the ways that we professionalize our work, and it helps us identify others in our clique. Even the user-friendly UX design world has jargon (heuristics, anyone?). One that’s made the rounds in the last few years is the word ‘affordance’. But it’s misused, and the error is fundamental to how we’re thinking about designing interfaces. In the words of parents around the world, it’s a ‘teachable moment’.

From cognitive psychology to computer interfaces
Perceptual psychologist James Gibson defined an affordance as an ‘action potential’. But Gibson included an important caveat in his definition – an affordance exists outside a person’s ability to recognize it.

Affordances in computer interfaces (as defined by Donald Norman) give a user the ability to take some kind of an action. But designers don’t care only about giving someone the ability to do something. They (should) care about making it easy for users to accomplish their goals. For this reason, when designers talk about affordances (and credit to Norman for pointing this out in his book Living with Complexity) they are most likely describing a relationship between signal and affordance.

To help guide users, we need to use signal and affordance in tandem. A signal indicates significance. There are many types of signals: placement; color; animation; size; wording; explanation. We can use signals to help users better navigate through the world of our applications. This is where designers shine – helping determine a user’s goals, and helping the interface make it easy for that user to accomplish those goals.

Signaling an affordance
For instance, a question mark icon might afford a user access to the help center. But an icon on its own may not be enough of a signal to the meaning of the icon, and it may not look important enough, since it doesn’t take up much space. Putting ‘help center’ text next to that icon might allow the user to know exactly what that element does. It gives it more of a signal of importance. Need more signaling? Most help centers live in the upper right-hand part of the layout. If help centers were critical to the usage of the product, then this icon and label might be moved to the upper-left part of the layout. This would increase its signal of importance to the user, as the upper-left part of a desktop layout is a highly visable part of most websites and applications.

Having defined a ‘signal’, we see the discussion of signals throughout the design and usability world. Interactive design, product design and user experience design are all devoted to balancing signal and affordance to make applications and websites more usable.

Why make this distinction at all?
Helping everyone on a product team understand these concepts will help them create better applications. A big part of improving skill is knowing what one is doing. If I can break my labor down into parts, I can more effectively judge whether I’ve followed best practices. It’s not enough to give someone an affordance. In many cases developers work without the aid of a product designer. If developers knew more about signals, and using them to guide users through an application, companies would get that much closer to delighting users.

Signals in enterprise applications
To give appropriate signals, we need to be acutely aware of user context. What are their goals? For a focused consumer app, this process can be straightforward. In an enterprise dashboard, there might be many pieces of information vying for attention. In this case we need to understand the relationship between signals and user goals. If we’ve done the work to put user goals into appropriate categories, we can help the interface be smart about signaling appropriately based on the type of user and the context in which they’re working.

Changing role of design
As designers we need to be educators. Not every company can afford to hire a designer full-time, but our methods can be taught and used effectively as part of a product development process. We can help companies get the low-hanging fruit, so to speak. Developers can learn to see their applications with a more critical eye. Having seen the real improvements to their products, companies will see the value of having a product designer on-staff.