Mobile UI Design: Affordance and Signifiers in Mobile UX design

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.

Affordances and signifiers Together

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.