Fundamental Principles of Design Part-2

In part-1 we discussed about Affordances and Signifiers. Let’s talk about two more Fundamental Principles of Design for Human Centered Design in this article which are Mapping and Feedback. We will be discussing about Constraints, Conceptual Model and Discoverability in part-3.

Mapping

Mapping is the relationship between two sets of things. It specifies relation between controls and the effects they have as an output. Which control will affect which action and what will be the output is done with the use of mapping.

One of the examples of mapping are the stove tops. They are mapped in different possible ways not following any uniform convention. It’s easier to understand some of them as compared to others and the reason is in the way they are mapped. In the image below, it is easier to figure out which control is operating which burner in the second image as compared to the first image where all the controls are kept in series which can confuse the user.

(Source)

Another example is of a set of switches and the lights they control. Most of the time people are unable to get the correct understanding of which switch would be controlling which light by looking at it because of the way the switches are placed. It would be easier to understand the usability if the mapping is done using spatial correspondence between the switches and the lights.

Here is an idea of mapping where the switches are shown in the same way the lights are arranged in the home and the bulb icons are given to light it up. This mapping is simpler and easy to understand as compared to the traditional mapping of switches and lights. (Source)

Natural Mapping is described as one in which the relationship between the controls and the effect are obvious and easily understandable as they are mapped using spatial cues which makes it simpler for users to understand and use them. It occurs when the controls or the information visually relate to the objects they affect. It makes use of physical analogies and cultural standards for easier understanding and operation.

Scrollbar for increasing volumes of the speakers. Slide right to increase volume and left to decrease it (Source)

Swiping down to refresh or reload the content

Good natural mapping requires no labels, diagrams or instructions for its explanation to the user. It does not increase the cognitive load for the understanding or remembering of the mapping.

Use of physical analogy like torch icon for torch lighting purpose, sun icon for brightness controlling

Natural Mapping can be categorized in three levels on the basis of it’s effectiveness on the memory aids:

Best Mapping: The control is placed directly on the part it is controlling.

Power button on MacBook Pro (Source)

Double tap on the image to like it

Long press on the message on WhatsApp for possible actions

Second-best Mapping: The controls are placed as close as possible to the items being controlled by.

Placing the button right next to where the effect it has. Checkboxes with multiple options. (Source)

The possible actions to take on the photo are placed at the top and bottom

Third-best Mapping: For some cases it’s not possible to mount the control directly on the object due to safety concerns and other reasons. So in this level, the controls are placed in such a way that they have the same spatial configuration as the objects they are controlling.

Window control buttons in the car. (Source)

Pulling the light indicator towards left to indicate left signal and pulling towards right to indicate right turning (Source)

Balance bar for setting volume controls of the left and right speakers of the MacBook. The pointer on the middle indicates equal sound output from both the speakers. Keeping it on extreme left will output the sound only through the left speaker

Natural Mapping can be cultural as well as biological. However what might be natural in one culture might not be the same in others. Natural Mapping in culture also changes with time.

Feedback

Feedback is a way of communicating the results of the action taken. It gives information to the user about what action has been taken and what has been accomplished on that basis.

Elevator gives feedback about what floor the lift is on after the button is pressed for either going upwards or downwards.

Gmail mail sent confirmation message

The main goal of giving feedback is to not let user keep guessing or waiting about what action they have taken and what would be the consequences of it. Failure to acknowledge of an interaction and not provide feedback for it can lead to frustrations and anxiety amongst the users along with unnecessary repetition of actions, mistakes and errors.

Let’s say the page is taking longer to load the content. If any indication is not given about it’s in progress work, the user tends to click on the refresh icon again and again which eliminates the ongoing process of loading the page and starts over which in turn takes even further time which can annoy the user and lead to wastage of resources due to multiple refreshes.

While submitting a form, the user might click on the submit button multiple times if they don’t get the update that their form has been submitted. (Source)

Feedback has to be immediate. Study shows that even a delay of 100 millisecond causes annoyance and discomfort to the user. (Source)

The user should have continuous idea about what is happening. In many situations, the task takes longer to get accomplished and starting that process over and over again can lead to huge risks. In such cases, it becomes necessary to give updates to the user.

In online money transactions, it might take few minutes for the transaction to get completed. During that time, it’s necessary to let the user know that the process is ongoing and they should not exit the window or reload it as it will lead to loss of money and data and gives rise to complexity.

When the process is spread out in multiple stages, giving feedback about the progress helps the user have the idea where the process has reached and how much more time will it take for their intended goal to be achieved.

Use of progress bars by food delivery apps. (Source)

When downloading something, the information shown about how much file has been downloaded and how much is remaining is helpful to the user.

Feedback has to be clear and properly planned as poor feedback is even worse than not having one because it can give rise to annoyance and complexities because of it.

Having one type of sound for different actions or blinking lights are types of poor feedback which does not communicate a clear message to the user and hence are of no use to them further more distracting the user from their ongoing work and can also lead to problem.

Here there is no complete information regarding why the account has been disabled which can help the user understand the problem and rectify it and try again. (Source)

Excessive feedback tends to get ignored by the user. So it becomes important to organise and plan and provide only needed feedback in a way that is unobtrusive to the user.

Promotional notifications given by the apps generally leads the user to ignore all the notifications altogether which might lead to losing information about important data. Paytm giving promotional notifications as well as transaction notification where the latter is of more importance and use to the user which should be given more priority and should be differentiated from the other ones.

(Source)

Excessive and incompatible feedback can lead to life endangering situations where it is necessary to give planned and proper feedback. For example places like hospital operating rooms, nuclear power plants, airport cockpit, etc. (Source)

Want to know about the other Fundamental Principles of Design? Read on to our next part of this series for that!