Affordance, signifiers, and feedbacks
Did your ever use a product and couldn’t figure out what to do with it or how to use it? This feeling of being lost is certainly due to its lack of affordance.
Note: There is a debate inside the UX community about the use of the term “affordance”. Some people may not agree 100% with what I’m developing here. However, the concept I’m talking about in this article, regardless how you call it, is a fundamental tool if you want to build great products.
In this article, I’ll use the following definition: Affordance is a term we use to qualify the ability of an object or a product to communicate its function.
When you use something (a product, an object, etc) with good affordance, you know immediately what it does and how to use it without even thinking about it, it feels natural. To enhance the affordance of something, we use what we call signifiers.
A signifier is some sort of indicator (in the physical or digital world), that can be interpreted meaningfully.
For instance, the small LED on your computer monitor is a signifier and its color is a feedback. If the LED is white, the monitor is on. If the LED is red, the monitor is off but it has power and, if the LED is turned off, the monitor isn’t powered at all.
These signifiers give you direct feedbacks about the state, the function and the way you should use a product.
In the physical world, the most common example of affordance is a door. When you see a well-designed door with good signifiers, you know immediately whether you need to push or to pull the door and this, whiteout even having to touch it. In most cases, if an object has a good affordance, you won’t even notice it. However, if something has a bad affordance, you will notice it immediately and, in some cases, you might get frustrated. How many of us have pushed a door supposed to be pulled?
In the digital world, you have two types of affordances. The affordance of your product (also called “perceived affordances), but also the affordance of the device that people need to use your product. For instance, screens afford to touch and mouses afford to point. However, this type of affordance is not really useful because it won’t, or in a negligible way, improve the usability of your product.
Here is a quick example of signifiers in interface design.
In this example, we have 4 signifiers, some more powerful than others.
The button itself
This is not a very strong signifier but someone who often uses modern websites might recognize this as a button just by looking at it. If the user recognizes it, he knows that he can click on it.
The color change
When the user hovers the button, he’ll see that the color is changing. This small change in the hover state affords that you can click on it.
The cursor change
As in the previous point, when the user hovers the button, his cursor will change from an arrow to a pointing finger. This increase the affordance of the click.
The text on the button
The text written on the button itself can help the user know what to do. In this example, it’s pretty obvious that you are going to log in if you click it.
Signifiers can inherit affordance from other signifiers, we call this contextual affordance. If we look again at the example above and we add inputs and labels to the screen, these elements will reinforce the affordance of the button below it, because people are used to the following pattern: username input -> password input -> login button.
Design with accessibility in mind.
When designing feedbacks and signifiers, make sure that they are usable by everyone. If someone can’t see your signifier, it’s pointless to have it. Here is a quick example:
Back in the early days of Sketch 2, when you created a symbol, here is how it looked like in the layer panel.
Besides the color change, there wasn’t another signifier to tell you that your folder was now a symbol. In the case of a color blind people, here is how he would see it:
You see the problem, right? Fortunately, they changed it quickly and now here is how it looks like when you change a folder into a symbol:
In addition to the color change, they changed the icon of the folder. More clear, even for people who could see the color change before. Win — win.
Having multiple signifiers for the same purpose avoid accessibility issues and enhance the affordance of your product.
We live in a world where the competition is overwhelming. And the people who decide who’s gonna win this competition are your users. What makes a product succeed is not only the great features, it’s about its usability and the feeling your users have with it.