The things of everyday design

There’s a secret code embedded in every app, website, and interface you use. Underneath your fingers is a hidden world traveled by the interface designers, caught up in a war between the complexities of technology and the breakneck evolution of user needs. These designers speak cryptically in neologisms (squircle, sharrow, neumorphism) and food-themed shibboleths (hamburger menu or meatball menu? Candy bar or toast?).

Their code is made of things called affordances. Those fluent in the language of affordances possess an intuitive and powerful understanding of how design works.

So let’s take a trip into the depths of interface design and shine a light on affordances. We’ll study them, explore how they work, and see how they define our digital tools. Bringing affordances out of the shadows can lead to clearer conversations about design, no matter if you’re a veteran designer or a casual user.

The history of affordances

In 1988, Don Norman published a book called The Design of Everyday Things. At the time, Norman was transitioning from a career in cognitive science and psychology to one in technology — he was one of the first people to write about “human-centered design,” an approach to technology that focuses on human biology and psychology to create functional software and hardware. The Design of Everyday Things was the genesis of many of these ideas, including one he called “affordances.”¹

An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used.²

Norman’s explorations of usability design, human-centered-design, and universal design all serve as the foundation of modern digital product design. But it’s the concept of affordances that has taken on a life all its own. Designers have taken the original definition and transformed it slightly: today, designers use “affordances” to mean “properties of objects which show users the actions they can take.”³

Here’s an example of an affordance in the real world:

A handle on a door is an affordance: it indicates that the door should be pulled. A flat, rectangular plate on a door is an affordance indicating that it should be pushed.

Norman would say that a handle or a plate is a good affordance, because of its relationship to the person who is using the door. A plate on a door begs to be pushed. Without edges or round parts to grab, the natural way — the only way — of interacting with it is to push. A good door handle, on the other hand, is located right where your arm naturally falls when reaching for the door. The radius of the handle is the right size to give you a good grip. It’s located on the side of the door opposite the hinge, so the door isn’t too hard to open.

Some doors don’t have good affordances. To make up for the confusion, there’s a “PUSH” or “PULL” sign. The sign doesn’t take advantage of the way our bodies instinctively interact with the door; it’s only helpful to people with good vision, who happen to be paying attention, or aren’t in too much of a hurry.

So, a good affordance takes advantage of some natural interaction between a thing and its user. Something that’s supposed to be used with your hands ought to be hand-shaped (and ambidextrous!). If something has visual feedback mechanisms, those mechanisms should be at eye level. Things arranged in physical space — like a row of lights, or a set of stovetop burners — should have their controls arranged in a corresponding way.

But we don’t always have a physical relationship to the tools we use.

Our phones, laptops, tablets, watches, and earbuds have so many functions that many interactions are digital by default. What does a good affordance look like in the digital world? If good affordances are ones that suit the nature of the interaction, what happens when the interactions are finger (or mouse pointer) on a flat, glass surface?

The evolution of affordances

Designers of early computers had to figure out what good digital affordances looked like. Most built clues into interfaces based on familiar physical objects: things stored in your computer’s memory are called files, and files are grouped into folders. How do you use a real-world folder? You open it. So, we can easily find the right command for accessing our digital folders because it’s labeled “open.” These affordances have been around for more than 70 years.⁴

Some designers had to reckon with entirely new functions, ones that didn’t have any real-world equivalent. For instance, how do you represent a hyperlink — a piece of text that fluidly joins two documents together? Tim Berners-Lee, inventor of the World Wide Web, had to figure it out. He chose a blue underline. But there’s no reason why blue means “link”:

I think the first WWW client … used just underline to represent [a] link, as it was a spare emphasis form which isn’t used much in real documents. Blue came in as browsers went color — I don’t remember which was the first to use blue.⁵

In the early days of the web, hundreds of affordances were coined this way. The URL for a page goes at the top. Text appears in a vertically scrolling column. A dropdown menu has a downward-pointing triangle next to it. Your mouse cursor is a slanted triangle with a tail, and when you hover over a link it looks like Mickey Mouse’s glove.⁶

Most of these affordances don’t have any relationship to the physical characteristics of the interaction they mediate. But remove them from a website, application, or interface, and users get disoriented, frustrated, and unproductive.

This is a second way of thinking about good affordances: instead of being useful because they are natural, some affordances are useful because they’re norms. Designers employ commonly recognized icons, patterns, labels, and layouts to make it easy for new users to find and utilize functionality. As Jakob Nielsen puts it:

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.⁷

This circular definition underscores how important it is for digital interface designers to understand affordances. In fact, how a designer sees, uses, understands, and breaks the rules of affordances is a telling sign of their experience and abilities.

How designers use affordances

Early in a designer’s career, they’ll use affordances even without knowing. That’s how I got started in design: I copied other designer’s work as a starting point, instead of starting from scratch. I had no idea why certain elements worked the way they did — but by emulating more experienced designers, I could take a shortcut past my lack of knowledge.

But design enough of the same kind of thing — t-shirts, band posters, MySpace pages — and you’ll start to recognize common elements. Recognizing affordances might not come with a detailed understanding of the why, but at least many inexperienced designers can identify the what.

Understanding affordances comes from a place of curiosity. This means questioning affordances — why are links blue? Why is most text left-aligned? Why are user avatars usually cropped into circles? Sometimes the answers to these questions are rooted in psychology, biology, anthropology, or technology.⁸

But affordances sometimes exist for no obvious reason. As I use the same affordances over and over, I think, “is this really the right way to do things?” As the internet enters its fourth or fifth decade,⁹ many designers are abandoning affordances once taken for granted. Google, for example, is in the middle of a battle to kill the URL, one of the few remaining affordances that distinguish a web page from an app.

Finally, as old affordances are being left behind, designers are inventing new affordances to take their place. Small touchscreens have become the dominant mode of interaction with digital interfaces,¹⁰ and designers created new ways of indicating functionality. The “hamburger” menu is one example: three horizontal lines indicates where to tap to expand a menu, something only required on small screens where some elements have to be hidden.

Affordances everywhere

Understanding the correct application of affordances is one of the most fundamental jobs of designers of functional things. This won’t change anytime soon: as long as we’re interacting with the world around us, designers will need to maintain a mental library of affordances.¹¹

Affordances are the hidden language of interface design. Using affordances wrong can stunt a company’s growth, as Snapchat famously discovered.¹² Using them right has returns in millions, billions, and trillions of dollars.

For that reason, affordances are, and will always be, the things of everyday design.