Fundamental Principles of Design Part-1

This is the first part to our three part series about the Fundamental Principles of Design. In this part, we will discuss in detail about two principles which are Affordances and Signifiers, followed by Mapping and Feedback in part-2 and about Constraints, Conceptual Model and Discoverability in part-3.

According to Don Norman, an action consists of two parts: execution and evaluation. Whenever the user performs an action, they face the gulf of execution(how to do it) and the gulf of evaluation (what results it produces). Good design bridges the two gulfs by using the Fundamental Principles of Design for Human Centered Design derived on the basis of insights of the seven stages of action model. (Source)

Seven stages of action Cycle (Source)

The seven fundamental principles of design are:

1. Affordances: Affordances basically define what actions are possible. It determines the relationship between the properties of the concerned product and the capabilities of the interacting agent. (Source)
2. Signifiers: Where the actions should be taken in a product/service is determined by the use of signifiers. It gives visual cues to the user about where they should do the action.
3. Mapping: Mapping explains the relationship between the controls and the resulting effect because of it.
4. Feedback: The information received after an action is taken and the updated information about the current state of the product/service.
5. Constraints: Limiting the possible ways of interaction with a product to help the user in taking the appropriate action by simplifying the product for them.
6. Conceptual Model: The system image in the user’s mind about the product/service. It’s on the basis of their own understanding and experiences, what they understood from the design and the available information.
7. Discoverability: Understanding of the product, its functioning and the possible actions that can be taken.

In this article we will discuss in detail about affordances and signifiers, followed by other fundamental principles in the upcoming articles.

Affordances

All products/services have some properties and describing the relationship about how these properties can be used by the interacting agent on the basis of their own capabilities to know what can the product be used for is known as affordance. It’s basically a property or the feature of the product which gives some kind of hint about what can possibly be done.

The understanding of the affordances for a user could vary depending on multiple reasons like their goals, capabilities, environment, context and their experiences.

Chair has the affordance of sitting, but it also has the affordance of moving, stacking one over the other. So the affordance of the chair changes to the capability and understanding of the user (Source)

Camera feature on the phone has the affordance of viewing, taking photos, recording video, scanning QR code (Source)

A microphone on the phone has affordance of speaking to someone over call, recording audio, virtual assistance (Source)

All objects have affordances and they exist even when they are not visible. There are explicit affordances, hidden affordances and false affordances. Visibility of the affordances is very important and it is achieved by using signifier.

Explicit Affordances are the ones in which the possible action is clearly communicated and is perceived by the user.

Cup handles has explicit affordance of lifting the cup (Source)

Button has the explicit affordance of clicking it (Source)

An input field with search icon has the explicit affordance of using it for searching purpose (Source)

Hidden Affordances are the actions which won’t be directly known to the user. A product can have both explicit as well as hidden affordances.

Three different keys combinations can be used for taking a screenshot using a MacBook keyboard (Source)

Gmail attachment shows options when hovered over the attachment (Source)

A false affordance is one in which it seems that object has some possible action but on performing that action, it is known that it actually affords some other action which was not perceived initially

Text with underline is usually perceived to be a link but at times it is just a text with decoration which does not have any link attached

Anti-affordance is the prevention of interaction. It stops the user from performing certain actions on purpose.

Password protected content that opens only when the user enters correct access information to protect the data safety. The login button remains deactivated until then (Source)

Placing an order on an ecommerce site lets you do the procedure of placing the order in the order specified. User cannot jump steps until the the last stage completed. For example, User cannot do the payment until the order details are filled correctly (Source)

Both affordance and anti-affordance should be perceivable to the user. If it is not perceivable, signifiers are used to indicate them.

Signifiers

While affordances is about people discovering what possible actions that can be taken in regards to a product/service, signifiers helps the users in discovering how to do those possible actions. It helps the user understand the product, provides cue to them about the operation of the concerned product. It is used for signaling the affordances. Signifiers makes the presence of affordance easily discoverable. They clarify appropriate action/behaviour.

Door handles are signifies which help user understand whether they should pull or push

Labels, colors, icons etc are all types of signifiers used to clarify component’s affordance.

Battery indicators on phone informs about the remaining battery that lets users figure out about when to keep for charging (Source)

Buttons with labels and icons that clarifies the purpose of the button. Add to cart button with cart icon (Source)

Scrollbar is a signifier indicating more content than the one visible on the screen. It also helps the user know about the content left to view on the basis on the position of the scrollbar. Whereas scrollbar act as a good indicator, hiding scrollbar is an example of bad signifier (Source)

The affordance of the button is enhanced and made clear with the use of multiple signifiers

Here the proper use of signifiers clearly communicates to the user about the type of data the need to enter thus preventing confusion

Red colour is used for signifying error state but it is important to provide proper information that helps user understand the prevailing error and rectify it. Here the error message shown on the left is a bad signifier as it does not communicate needed information to the user (Source)

Signifiers can be explicit, hidden as well as be subtle. Perceived affordances are also a kind of signifiers.

Examples for affordances and signifiers:

Button are to be pressed in order to persform some action but which action takes place by pressing which button is clarified using signifiers like labels and icons (Source)

Button are to be clicked for in digital screens in order to perform some action but which action takes place by clicking which button is clarified using signifiers like labels and icons (Source)

Suggestive texts and icons with input fields. Input fields communicates about entering data, but what data is to be entered is clarified using suggestive texts and icons for those fields (Source)

Paginations current page, number of pages, scrolling to previous and next pages. Pagination is a signifier which is also a perceived affordance (Source)

Incoming call informs user that the call can be received, how and which other actions are possible are indicated by the signifier (Source)

Have examples to share with us about affordances and signifiers? Do share with us in the comment section below!