This is an excerpt from the Interaction Design Best Practices ebook, written by Jerry Cao, Kamil Zięba, Matt Ellis, and originally published on UXPin.com.
Affordances — The Interaction Designer’s Secret Weapon: Different Types of Signifiers and How to Use Them
Let’s get philosophical for a second. Pretend you’ve never seen a hammer before, but now there’s one in front of you. You see a hard metal part, with weird shapes, spikes, and knobs. Then you see a long wooden part, smooth, and a little bigger than the size of your hand. Which part would you grab when you pick it up? And what is a hammer for, anyways?
The hammer applies force to objects, but you only know that because of its signifiers. The hammer’s handle tells you that you can grab it. It’s size, shape, and look are all subtle cues to its use, and even if you don’t know what a hammer is for, you can at least guess how to pick one up.
While affordances might not be a top priority for tool-makers, for interaction designers they are absolutely essential — otherwise users wouldn’t know what they can and cannot interact with. In this chapter, we’ll first discuss the connection between affordances, perceived affordances, and signifiers. Then, we’ll dissect the types of signifiers, and explain how to use each type to make sure perception matches reality.
Let Form Suggest Function: Affordances vs. Signifiers
Affordances are what a product can do. For instance, a website affords navigation. But how does the user know that function is possible? A perceived affordance is therefore how the user thinks the navigation might work, which of course must match the actual affordance.
The beauty of signifiers is that, when they’re used properly, the product feels intuitive and familiar, as if the user already knows what the feature is for. As Andrew Maier, Co-founder of UX Booth, points out, the effectiveness of perceived affordances depends upon signifiers. A signifier can be anything that suggests meaning, whether a word, a shape, a color, or a movement.
Let’s look at an example from Behance. Their use the infinite scroll UI pattern (as described in Web UI Patterns 2014) is one way to afford navigation. As you scroll downwards, a loading circle appears before more content loads, signifying that the content stream is dynamic. Without the signifier, you might be disoriented as to why a bunch of new content appeared (when it seemed as though the page was finished). In this case, the subtle touch of a signifier provides a split-second interaction that results in an immediate understanding of the affordance.
If we look at the above screenshot from a higher level, you can also see other signifiers: the thumbs-up icon signals that liking content is possible, the arrow icon in the navigation signifies a dropdown, etc. None of these affect the functionality, but simply suggest that these interactions are possible.
Signifiers come in different types, each serving different purposes, and we can organize them best into four groups, based on Natasha Postolovski’s excellent article on the topic:
- Explicit Signifiers — Obvious signifiers, such as words or appearances.
- Pattern Signifiers — Trends and customs that have been popularized to the point of common understanding. See Web UI Patterns 2014 for visual case studies.
- Hidden Signifiers — Signifiers that do not become apparent unless certain conditions are met.
- Metaphorical Signifiers — Using a metaphor to signify its meaning, for example, an envelope icon representing email.
Knowing when and how to use these types will provide a layered feel to your interaction design, so let’s go into detail for each.
Explicit Signifiers
The most obvious of the types, explicit signifiers include language or appearance to show function. Something as blatant as text reading “Click Here” would certainly belong in this category.
At times a bit on-the-nose (“Write your comments here…”), explicit signifiers should only be used when necessary. Imagine how wordy (and annoying) your page would be if every link read “Click Here.”
In brief, only use explicit signifiers when subtler options aren’t as effective.
In the below example from our own UXPin website, the call-to-action is an explicit signifier. We decided on the text “Start using it now!” because there just wasn’t a simpler way of conveying that information. An icon representing that message would be too obscure, and it’s not exactly a “Log In” because that implies you need to create an account beforehand. Since providing your email directs you immediately into the app, it was best to keep the language explicitly clear.
Pattern Signifiers
No one really knows why clicking on a site’s logo takes you back to the homepage, but most of us know that it will. This is so common on most sites that it’s become an established trend, or pattern. Below we’ve listed some common patterns, most or all of which you’ll recognize:
- Blue text representing links
- Logos representing the homepage
- Asterisks representing mandatory form fields
- Cards representing clickable teasers
- Hamburger menu representing navigation
Hulu makes excellent use of pattern signifiers on their homepage. In the picture below, you’ll notice the clickable logo for the homepage, the top navigation menu, the magnifying glass search field, the account manager in upper-right, the standard video play button, and the image carousel with both arrow controls and dot positioning indicating that the user can cycle content. Since other video sites like Youtube and Netflix use similar patterns, this tactic increases familiarity (and therefore learnability) for the user.
Pattern signifiers allow meaningful interactions to happen at the speed of thought (we intuitively know the magnifying glass indicates a search functionality). As such, these should be used whenever possible (especially if you’re designing for tech-savvy audiences).
The greatest strength of pattern signifiers, however, is also their weakness. Because its effectiveness depends upon familiarity, you’ll want to use these less if you’re designing for younger audiences (like children) or less technically adept people (such as the elderly, or those with limited technological access).
For a thorough analysis of 100+ effective patterns, download our free ebooks, Web UI Design Patterns 2014 and Mobile UI Design Patterns 2014.
Hidden Signifiers
Have you ever accidentally moved your cursor over a piece of text and suddenly it changed color, revealing that it was a link? This is an example of hidden signifier, a subtle but useful way to illustrate a feature’s function. If you’re familiar with Pinterest, you’ll recognize how the options to Pin, Send, and Like a photo appear only when you hover over them.
The appeal of hidden signifiers is that they save space. You give the users the controls they want without sacrificing screen real estate — having your cake and eating it, too. But, hidden signifiers can be risky (you don’t want to hide important info), so they should be used carefully.
Hidden signifiers are generally recommended for secondary actions. For example, selecting “Add to Favorites” for an item is an interaction that helps users prioritize content or products, but it isn’t a non-negotiable. Therefore, it’s acceptable to put the “favorite” function as a hidden signifier. If you’d like to learn more about balancing minimalism with discoverability, check out this helpful piece by Dan Saffer, Founder of Kicker Studio.
Metaphorical Signifiers
A simplistic house icon means homepage, an envelope means email, a folder means… a folder. These are all examples of metaphorical signifiers, and rely on a user’s common sense (and familiarity with everyday objects) to draw a connection. Metaphorical signifiers are closely linked with patterns; because metaphors have been so successful, they have been used repeatedly by hundreds of companies until they became established patterns. envelopes representing email instead of, say, the mailbox from the AOL era. But as technology advances, new functions require digital representation, and so metaphorical signifiers still live on the frontier of design.
You’ll find most metaphorical signifiers as part of an app or site’s navigation (as either icons on the page or menu items). As shown in the below example from the Chicago Works app, it’s not a bad idea to include some text next to the metaphors when you have only a few items. Combining text with visual cues will help users
One of the most important things to remember about metaphorical signifiers is context. A magnifying glass, for example, might indicate a type of search function on a website. However, in an image editor, that same icon might signify zoom in/out. Keep in mind your context when designing, and if you think there might be confusion, there’s nothing wrong with communicating more explicitly.
Takeaway
Speed and ease-of-use are two of the biggest goals in interaction design, and signifiers create both. Knowing how to properly use signifiers is as relevant to a designer as knowing how to colors is as relevant to a painter; the strengths of the different signifier types are akin the differences in colors, and the skilled designer/painter knows the best time to use each, and when to mix them. It’s a shame that something as useful as understanding affordances
can be easily overlooked, but don’t make the mistake of ignoring them. Experiment with signifiers until you can confidently apply them; you’ll discover they can be one of the most powerful weapons you have in your design arsenal.
