Affordances in design. Design of familiar things

A secret code is built into every app, website, and interface you use. Hidden under your fingers is a world in which interface designers travel, who have become hostages in the war between the complexities of technology and the rapid development of user needs. These designers cryptically explain themselves in neologisms (squircle, sharrow, neumorphism) and food-themed shibboleths (hamburger menu or meatball menu? Candy bar or toast?).

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

So let s dive into the depths of interface design and talk about affordances. We ll study them, figure out how they work, and see how they define our digital tools. Dealing with affordances can bring clarity to design conversations, whether you are an experienced designer or a casual user.

History of affordances

In 1988, Don Norman published a book titled “Design of everyday things”… At that time, Norman decided to switch from a career in cognitive science and psychology to a career in technology – he was one of the first 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 product of many ideas, including the one he called “affordance.”^one

Affordance is the relationship between the properties of an object and the capabilities of an agent, which determine how an object can be used.²

Norman s research in usability, human-centered design, and universal design has become the foundation of modern digital product design. But the concept of affordances took on a life of its own. Designers took the original definition and changed it a bit: today, designers use affordances to mean “properties of objects that show users the actions they can take.”³

Here s an example of real-world affordances:

The handle on the door is an affordance: it indicates that the door must be pulled towards you. The flat rectangular handle on the door is an affordance indicating to be pushed.

Norman would say that both doorknob options are good affordancebecause they are related to the person using the door. The flat handle requires pushing. It has no edges or round parts to grab onto, the natural and only way to interact with it is to push. A good doorknob, on the other hand, is located where your hand goes when reaching for the door. The radius of the handle is the right size for you to have a good grip on. It is located on the side of the door opposite the door hinge, so it is easy to open.

Some doors don t have good affordances. Therefore, to avoid confusion, they have the sign “PUSH” (Push) or “PULL” (Pull). Such a sign does not use our interaction with the door, it is useful only for people with good eyesight, who accidentally pay attention to it or notice it because they are not in a hurry.

So good affordance exploits the natural interaction between a thing and a user. Anything that is supposed to be used by hand must have a suitable shape (and should be comfortable for both right-handed and left-handed people!). If the subject has visual feedback mechanisms, these mechanisms should be at eye level. Things in a physical space — for example, a row of lights or a set of hotplates — need to have organized controls.

However, we do not always have physical interaction with the tools used.

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

Evolution of affordances

The first computer designers needed to figure out what good digital affordances looked like. Most of the hints built into the interfaces are 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 the real folder? You open it. We can easily find the right command for accessing digital folders because it is called “Open”. These affordances have been around for over 70 years.^four

Some designers had to deal with completely new features that were unparalleled in the real world. For example, how do you represent a hyperlink – a piece of text that seamlessly connects two documents together? Tim Berners-Lee, the inventor of the World Wide Web, had to find out. He chose a blue underline. But there is no reason why blue means “link”:

I think the first WWW client … only used an underscore to represent the link, as it was an additional form of emphasis that is not often used in real documents. Blue came about when browsers were colored – I don t remember which one first used blue.^five

Likewise, in the early days of the Internet, hundreds of affordances were created. The page URL is placed at the top. The text is displayed in a vertically scrolling column. There is a downward-pointing triangle next to the dropdown menu. The 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 have nothing to do with the physical characteristics of the interactions they mediate. But remove them from the site, app, or interface, and users will become disoriented, frustrated, and unproductive.

This is the second definition of good affordances: Some affordances are useful not because they are natural, but because they have become the norm. Designers use widely accepted icons, patterns, labels, and layouts to make it easier for new users to find and use features. As Jacob Nielsen put it:

Users spend most of their time on other sites. This means that users prefer your site to work like every other site they already know. Design patterns that users are used to.⁷

This definition emphasizes how important it is for digital interface designers to understand affordances. In fact, the way a designer sees, uses, understands, and violates the rules of affordance is a telling sign of his experience and ability.

How designers use affordances

At the beginning of their careers, designers will use affordanceswithout even knowing it. This is how I started to design: I did not start from scratch, but as a starting point, I copied the work of other designers. I had no idea why certain elements worked this way, but by imitating more experienced designers, I could overcome my lack of knowledge.

Design many of the same things – T-shirts, posters, MySpace pages – and start recognizing common elements. Recognizing affordances does not guarantee that you will understand in detail why they work, but at least many inexperienced designers can determine as they work.

Understanding affordances comes out of curiosity. This means asking questions – why are the links blue? Why is most of the text left aligned? Why are user avatars usually cropped with circles? Sometimes the answers to these questions are rooted in psychology, biology, anthropology, or technology.⁸

But sometimes there are affordances for no apparent reason. Since I use the same affordances over and over again, I wonder, “Is this really the right way to do something?” As the Internet has been around for the fourth or fifth decade,⁹ many designers give up affordancesthat were once taken for granted. For example, Google is in the midst of a battle to destroy a URL, one of the few surviving affordances that differentiate a web page from an app.

Finally, as old affordances are left behind, designers invent newwho will take their place. Small touch screens have become the dominant way of interacting with digital interfaces,^ten and designers have created new ways to denote functionality. The hamburger menu is one example of this: three horizontal lines indicate where to click to expand the menu. This is only required on small screens where some elements need to be hidden.

Affordances are everywhere

Understanding how to apply affordances correctly is one of the most fundamental tasks of functional designers. This won t change any time soon: while we interact with the world around us, designers will need to maintain a mental library of affordances.^eleven

Affordances are a hidden interface design language. Misusing affordances can slow the growth of a company, as we know from Snapchat.¹² Their correct use brings in profits in the millions, billions, and trillions of dollars.

For this reason, affordance will always be part of the design of the familiar.