Introduction
Coming up with an incredible UI design is challenging in these days, and more often coming up with mobile UI design to hook the users is more frustrating. The goal is for us to find the balance between the good design and right design for the users.
You might be making a visually glamours design, but if it doesn’t solve users need and makes the user confusing to use, then your design has failed. That is where affordance and signifiers come into play. These are techniques how we can increase user’s interaction with the app and navigate the user through the app with less frustration.
Affordances
Affordance describes how a user sees the relationship between themselves and an object, i.e. how a user affords an action. If a door has a door handle, it means it affords to open.
Majorly the term affordance is used to refer the relationship between a physical object and a person. In UX, affordance is the relationship between users and the interface.
Signifiers
Signifiers refer to any mark or sound, any perceivable indicator that communicates appropriate behavior to a person. An object with a signifier but no affordance would be a push sign attached to a static wall.
Signifiers can be simple as a push label on a door, arrows, diagrams telling what to be done next.
Signifiers are UI elements that give users a little prompt. For example, swipe to unlock. With a prompt of “swipe to unlock” also with an arrow to show which direction to swipe.
There are three types of signifiers:
Color Signifier: The color signifies what action to be done.
Word Signifier: The text indicates what need to be done.
Directional Signifier: Elements which indicate what to do, e.g. forward arrow
Affordance and Signifiers
The affordance of touching exists in the entire screen, but signifier communicates when and how people should touch to interact with the product.
An affordance determines what actions are possible. Signifiers communicate where the action should take place. We need both.
Example:
A button that looks like a button will be perceived an element that can be touched/pressed to produce an action (Affordance).
Clickable buttons will be highlighted with brighter colours with drop shadows to let users know they are clickable. While inactive buttons will be faded to show they are inactive (Signifiers).
Affordances and signifiers are used together to convey meaning. As shown below, the buttons are affordances and their placement is the signifier that conveys one button has more significance than the other.
The concept known as "The Norman Door", was discussed by Don Norman in person. A door is an accessibility that can be pulled as well as pushed. A handle indicates pulling, but a plate indicates pushing. A poor user experience would result from placing these in reverse or placing handles on both sides.”
Conflicting Affordance
This happens when a user is confused on what needs to be done next. The mix of multiple affordance in multiple areas create frustration and confusion to the user.
False Affordance
False affordance is the situation in which an element appears to be able to do a specific action while actually being unable to. The text that is underlined in the example below appears to be a link, but it is not.
Negative Affordance
A negative affordance is when an element has the appearance and functionality of a user interface component but behaves otherwise, such as a deactivated button as demonstrated below.
The button is deactivated in the beginning (left) and only gets activated once the number is entered (right).
When a device as simple as a door has to come with an instruction manual, then it is a failure, poorly designed.
Hidden affordances
Hidden affordances are when the element is not perceivable until the user interacts with it.
The ghost button is a prime illustration, which I frequently observe consumers overlooking. When you accidentally come across it (assuming you're using a desktop device and can initiate a hover state), the interface is almost invisible, but you can use it after that.
Pattern affordance
The thing uses a recognised design pattern so that the user already knows (accurately) what it does.
An illustration would be the three lines that represent the burger menu in the top-left corner of an app. The user knows what it is going to do before they engage with it. And they’ll be correct.
Books to read
THE DESIGN OF EVERYDAY THINGS by Don Norman
EMOTIONAL DESIGN by Don Norman
DESIGN AS ART by Bruno Munari
STEAL LIKE AN ARTIST by Austin Kleon