Affordance is a term originally coined by a psychologist, J.J. Gibson, in the 1970s. He defined it as the relationship between an environment and an actor. Today, affordance extends beyond behavioral or cognitive psychology and into the design of digital interfaces. Understanding affordance will allow you to better understand product and interfaces design, in turn, making you a much better designer.

What is affordance?

A situation where an object’s sensory characteristics intuitively imply its functionality and use. — Crowdcube

Crowdcube’s layman’s term definition is spot on. All of the objects around us have affordances, some more obvious than others. Affordance is the possibility of an action with an object; it is not a property of the object itself. In other words, a button can be pushed; the possibility of pushing a button is its affordance. The original definition coined by J. J. Gibson described all possible physical actions you could take with an object. Over time the definition shifted. Now, the definition is broader and includes discoverability of actions. This change has been brought about the technological evolution of digital interfaces. Discoverability is an interesting concept in the digital realm, as when you’re using a computer, you get to discover actions through the hints given to you within the interfaces themselves.

Physical objects

Take a step back to the physical world, where you see that objects have physical properties like size, shape or weight that provide hints as to what you could do with them. Here are a few classic examples. Let’s start with a teacup; it’s small and has a handle, which affords holding. Its dipped bowl-like shape, indicating that it can hold something too. When it’s holding tea, the affordance is that you can hold the teacup and drink out of it. Another example is a toothbrush: it has a long-but-thin handle, which affords gripping, and so on. Physical objects can be sorted three affordance types: Perceptible affordance is the basic definition of affordance, where an object’s characteristics imply an action. Hidden affordance is when an object has affordances that are not so obvious; for instance, simply looking at a beer bottle you wouldn’t be able to tell you that you can use it to open another beer bottle. False affordance is when there is a perceived affordance; but no results happen from the possible action. For example, pressing a button that doesn’t do anything, like using your TV remote to turn the TV on, but it doesn’t work for some reason. The affordance is still there — you are free to press that button as much as you want — but nothing happens, there is no function.

Affordance in digital spaces

Digital interfaces are special. They allow us to do things that are limited to a two-dimensional world that is a computer screen. There are so many things we could do within any app, website or program; but they all have one big, crippling limitation: they cannot provide you with physical clues as to what you can do. Instead, they all rely on visual clues or affordances. This can be very tricky if you don’t understand the important role affordance plays in creating successful interfaces. If you understand how affordances work, you will be able to use them to your advantage. When you can make affordance a tool you will be able to create designs that are intuitive and easy to use. Intuitive designs have this certain appeal to them — most likely because we find a lot of websites or apps tedious and annoying — so it’s really refreshing to use them. Additionally, affordance effects conversions, which matter a lot in creating a successful design.

Types of affordance that affect UX

If you want to fully understand how affordances work in interface design, we need to get specific. Let’s do that now by covering six different affordance types seen within digital interfaces including: explicit, pattern, hidden, false, metaphorical, and negative affordance.

1) Explicit affordance

Similar to perceptible affordance, explicit affordance is the hints given off by language or physical appearance of the object. A raised button that says ‘Click me’ is a great example of both language and physical cues. The button’s raised appearance indicates the possibility of clicking and so does the ‘Click me’ text. It’s obvious. Language plays such an important part of guiding users through digital interfaces. An input field that asks you for your ‘Full name’ affords entering your name into it. Language provides clear guidelines on not only what you should be doing, but also what you could be doing. Entering letters, like your name, is different than entering numbers, like your phone number and you can tell which one you’re able to do by the context of the text. However, it’s also important to consider how obvious your interface is to use without explicit, spelled out directions. Your design needs to be usable and intuitive without holding your user’s hand at every step.

2) Pattern affordance

A pattern affordance is affordance set out by conventions. A great example would be a logo that’s at the top left corner of a webpage being clickable. It’s a pattern we see everywhere; so we expect it everywhere. Text that is different color, sometimes maybe underlined or italic, among unchanged body text like a paragraph, is assumed to be a link. Email is often represented with an envelope, while settings are represented with a gear. In these examples, email doesn’t require an actual envelope — it never has — and neither do settings require dealing with gears. It’s a metaphorical pattern we have been exposed to for a long, long time; so it became a convention. Patterns are great for communicating mental shortcuts, but only if your users are aware of these patterns. There are new patterns introduced all the time, for example, the hamburger menu is a relatively new concept for menus and navigation. When designing with new patterns in mind, you have to make sure your users are familiar with them. But, when you know your audience has been previously exposed to these patterns, you have the ability to create some amazing designs without being explicit.

3) Hidden affordance

Hidden affordance in digital designs is similar to that of physical objects. In the digital world, however, the actual affordance isn’t available until an action has been taken to reveal it. For instance, hovering over a button to see whether to not it’s active, and therefore clickable. Drop down menus are another example, where you don’t see the menu unless you hover or click on the parent list item. Hidden affordances are oftentimes used to simplify the visual complexity of a design. In the drop down menu example, we use the drop down to hide all of the navigation options, as there are too many to show all at once. If a user wants to navigate somewhere, they have to find it within the drop down. Now, a big drawback to hidden affordances is that they require the user to find the affordance while sometimes giving them no hints of their existence. You don’t know what to expect. It’s a guessing game, so to speak, based on finding these affordances as you go.

4) False affordance

False affordance in the digital space affords something else that is unexpected — like turning on your lights instead of the TV with the TV remote – or no action at all. This type of affordance is all over the Web, mostly by accident, like a button that looks active but does nothing, a logo that isn’t linked to anything, the words ‘click here’ within text that aren’t at all a link, or a red button that does something good with a green button that does something bad. False affordance is most plentiful in designs where details have been missed, like a broken link situation. Colors have specific associations with them. In the western world, green is good while red is bad. When you switch the two, you will most certainly confuse some of your users, especially when the buttons are side by side. This doesn’t mean you can’t do it; but you should be cautious when doing so. You don’t want any false affordances within your design if you can help it. You shouldn’t surprise your users like that.

5) Metaphorical affordance

Skeuomorphism relied heavily on metaphorical affordances, like imitations of real objects, to communicate. Icons are wonderful examples of this: map, shopping cart or basket, home, printer, video, microphone, phone, etc. Take the concept of email for example. Its roots are in the metaphor of a physical letter; its icon is usually an envelope. It’s a great example of metaphorical affordance all around. If you are designing something and are not sure how to convey it, it’s always good to go back to the physical world, at least for inspiration and a starting point. Now, you don’t need you go over the top like Apple’s old designs, where for their game app they made the background a green pool table cloth. But, compare that to their current Games app icon which is just a few bubbles. What do they have to do with games? I don’t know, the metaphor is no longer there. Whether that’s a good thing or not is up to you to decide. Whether the metaphor needs to be there in your design, or not, is up to you.

6) Negative affordance

Negative affordance can be thought of as specifically indicating no affordance; it’s when you have an inactive button or a button that looks inactive. The most common instance of this is when a button or a link is greyed out. Now, here is the tricky part: it’s not that you are specifically trying to tell a user you can’t use this button — although it could be — but that the button appears that you cannot use it, even if in fact you can. There are certain instances where you’d want to clearly indicate that you couldn’t do something. For example, if a user if filling out a form and they haven’t filled everything out yet, your button state could appear inactive because you don’t want them to proceed yet. But, if the button looks inactive, but is active, then it’s simply poor design. Be careful with this one. Featured image, affordance image via Shutterstock.