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.
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.”1
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.2
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.”3
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?
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.4
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.5
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.6
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.7
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.
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.8
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,9 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,10 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.
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.11
Affordances are the hidden language of interface design. Using affordances wrong can stunt a company’s growth, as Snapchat famously discovered.12 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.
When it was first used, “affordance” had nothing to do with design. In the popular 1979 book The Ecological Approach to Visual Perception, James J. Gibson defined an affordance as something the environment offers an individual. Norman borrowed the word for The Design of Everyday Things, shifting the definition to mean the potential uses of an object as perceived by its user. Norman went on to tweak this definition further, but for where this essay is concerned we’ll keep things simple and stick to the most common interpretation. ↩︎
Norman, Donald A. The Design of Everyday Things. Revised and Expanded edition, p. 11. New York, New York: Basic Books, 2013. ↩︎
Interaction Design Foundation, “Affordances,” https://www.interaction-design.org/literature/topics/affordances (last accessed 28 July 2020). ↩︎
Barnard, G. A., and L. Fein, “Organization and Retrieval of Records Generated in a Large-Scale Engineering Project,” International Workshop on Managing Requirements Knowledge, Vol. 1, 1958, p. 59, doi:10.1109/AFIPS.1958.75. ↩︎
Curiously, attempts at styling web pages to resemble physical pages didn’t stick. Berners-Lee himself was fond of an early web browser that had a parchment-paper background and used a “embossed” affordance for links, making it look like they were raised out of the page. Tim Berners-Lee, “Frequently Asked Questions by the Press - Tim BL,” WC3, https://www.w3.org/People/Berners-Lee/FAQ.html (last accessed 19 July 2020). ↩︎
The slanted triangle originated in Xerox Parc’s introduction of the optical mouse pointer. The Mickey Mouse hand’s origins are harder to trace, but may have started with Apple’s HyperCard software. ↩︎
Jakob Nielsen, “Jakob’s Law of Internet User Experience,” Nielsen Norman Group, https://www.nngroup.com/videos/jakobs-law-internet-ux/ (last accessed 28 July 2020). ↩︎
In the case of left-aligned text, it’s all of the above. Left-aligned (ragged right) text was popularized in the early 20th century by designers like the German Jan Tschichold and Swiss as part of the ideologically-charged “new typography” movement. New technology enabled more flexible mechanical typesetting, and the European designers used left-aligned text to separate their work from previous typographical norms. More recently, studies have shown that left-aligned text is easier to read and recall: see Margaret Gregory’s and E. C. Poulton’s article “Even versus Uneven Right-hand Margins and the Rate of Comprehension in Reading” in Ergonomics and David R. Thompson’s paper “Reading Print Media: The Effects of Justification and Column Rule on Memory.” ↩︎
The word “internet” was first used by Vint Cerf to describe a TCP/IP network in 1974. That date puts the internet’s age in 2020 at 46. The internet as we know it today — hypertext in web browsers — was first described by Tim Berners-Lee in 1989, making the internet just 31 years old, a veritable spring chicken compared to Cerf’s version. ↩︎
StatCounter, “Mobile and tablet internet usage exceeds desktop for first time worldwide,” https://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide (last accessed 28 July 2020). ↩︎
Maybe one day we’ll have a real catalogue to look through, an OED of affordances, and it’ll be on every designer’s bookshelf. ↩︎
Nellie Bowles, “Snap to Tweak Snapchat’s Redesign After Users Complain,” The New York Times, 1 May 2018, https://www.nytimes.com/2018/05/01/technology/snapchat-redesign-snap-earnings.html. ↩︎