(Photograph by Flickr user Banzai Hiroaki)
Affordances are clues about how an object should be used, typically provided by the object itself or its context. For example, even if you’ve never seen a coffee mug before, its use is fairly natural. The handle is shaped for easy grasping and the vessel has a large opening at the top with an empty well inside. The object “affords” being picked up, meaning that it is able to be picked up. It also affords drinking out of. These are the things it’s designed to do, and that’s also what it looks like it’s designed to do.
A coffee mug might also afford holding writing utensils. It could be used as a pot for growing small plants, a shovel for building sand castles, or maybe even a ladle for serving punch. Well designed objects like coffee mugs have stood the test of time because they afford a wide variety of uses, many of which the original designer never intended.
Digital Affordances
Thinking in terms of affordances and metaphors can help lead to more intuitive user experiences. At first, applying the concept of affordances to digital interfaces might seem counterintuitive, mostly because the model of interaction doesn’t involve the direct manipulation of physical objects. However, I think affordances are about setting up expectations and then delivering on them.
Affordances are everywhere in the digital realm. As an example, consider a simple submit button. If it were just blue text, would you be able to tell that it’s interactive? Perhaps if that blue text were surrounded by the context of black paragraph text, it might stand out like a hyperlink, but for the sake of this exercise let’s assume this submit button is part of a web form. If that blue text were surrounded by a gray background, would you be able to tell then? Perhaps, but it might involve some thought before using it. Now, what if that button had some embellishments that made it look more akin to a button in the real world?
What are the visual cues that indicate that a button is, in fact, a button?
The buttons in the image above are from iOS. The left button is from iOS 7, the middle button is also from iOS 7 but with the “button shapes” accessibility feature turned on, and the right button is from iOS 6. This, in fact, is one of the major complaints about the redesign that came in iOS 7; buttons no longer have any kind of border or embellishments. I think most people have since become accustomed to the new look for iOS, but there certainly was an adjustment period. That’s because the design was not familiar, and thus, it had more difficulty setting up proper expectations.
So then, if affordances are about setting up expectations and delivering on them, let’s explore some specific types of affordances that enable good design.
Labels
The most direct type of affordance is a label. If an interface is targeted at beginners, or if the interface is fairly complex and includes many abstract concepts, then labels are a good way to explicitly indicate function.
Photograph by Flickr user Dave Wilson
Imagine how much more memorization and training would be necessary if the interior of a spacecraft relied on pure iconography. As it is, an extremely small percentage of humans are capable of spaceflight, and that’s only after many years of specialized training. It might actually be impossible without the use of labeled buttons and clear instructions.
Now imagine if a web form had no labels and you were expected to know what to type into each field. Every web form is a little different, so there’s no pattern you could follow. You might still be able to rely on form validation and go through a process of trial and error, but it would be incredibly frustrating. Labels help people organize and understand the choices that are being presented to them. It may not always be the most aesthetically pleasing affordance, but it is the most clear and precise method of communicating functionality.
Metaphors
Metaphors in web design might come in the form of words or imagery that’s used to communicate something other than literal meaning. For example, I’m using WordPress to write this article right now, and there’s an option in the sidebar menu that has an icon of a wrench and the label “Tools”. 
Take this a step further: If someone has never seen a wrench before, or if they’re not familiar with the word “Tools” in the context of a digital environment, this affordance has the potential to backfire and set up the wrong expectations.
You have to understand the underlying meaning of a metaphor in order for it to communicate. As another example, take a look at the default icons on the iPhone dock.
There’s lots of iconography in use today that won’t make sense to the next one or two generations of people. When was the last time you picked up a telephone that looked like that icon, or sent a letter in the mail, or used an analog compass? The younger you are, the less likely it is that you’ve had interaction with these things. In the case of Safari, even the label doesn’t help if you take the meaning literally. If I didn’t know that Safari is a web browser, I might expect this icon and label pairing to be some sort of mapping application.
In summary, metaphors can help communicate abstract ideas without much instruction, but you do risk alienating some percentage of your audience that doesn’t understand the metaphor.
Patterns
Sometimes learned behavior can inform how something should work. For instance, an image carousel is a common sight around the web. Most of them have an arrow on either side to cycle through images, and sometimes, they have navigation at the bottom to indicate both the number of items and the current item.
Arrows in general are a common sight on a computer. They might indicate a “breadcrumb” structure, or they might be forward and back buttons in the browser. In any case, it’s typically understood that arrows indicate some kind of navigation; they mean going somewhere. In this example, click an arrow means going to the next or previous image.
The more designers that follow the same pattern, the stronger the pattern becomes. The downside is that reliance on patterns can sometimes stifle creativity. Perhaps you’ve come up with a new and better way to navigate an information space, but it might actually be less intuitive simply because it’s not familiar. This is an important concept for designers to understand, since new user experiences are expected to be simultaneously intuitive and innovative.
More Affordances
Affordances are a fascinating topic to think about, because they don’t exist in the physical sense. Rather, affordances are implied by other design details. Something I ask myself a lot is, “At what point does a design element go from decorative to essential?” Because of affordances, it’s not always an easy question to answer. If you have any thoughts or questions that you’d like to share, I’d love to hear about them in the comments section!
Join Nick on his course How to Make a Website