What is Natural Mapping? And why is it useful?

Natural mapping is a self-explanatory term in which Natural implies Intuitive, where you don’t have use your mind much, and Mapping implies association of one set with another set.

“Natural mapping is a natural association & relation between two sets where one can be a controller & the other can be an object.”

I firmly believe that natural mapping is required in our daily use of products, online portals & upcoming inventions. However, it is essential to implement the concept of natural mapping with utmost care and detail, as good natural mapping can make your life easy & peaceful whereas bad natural mapping can lead to confusion and frustration.

Let me share an example of Poor Natural Mapping i.e.

A Switchboard in my friend’s room.

Bad mapping is evident in the picture above, the Left Switch controls a fan to the right whereas the Right Switch controls a fan to the left. In good natural mapping, the Left Switch would control a fan to the left and Right Switch would control a fan to the right, as illustrated in the image shown below:

Another example is Stove Control which is illustrated below:

Figure (A) is an example of Bad natural mapping, where there is no clear mapping between the controls and burners of the stove, i.e burdening the consumer to put extra effort into learning and memorizing the controls. You can’t easily identify which control will operate the Top-Left burner.

Figure (B) & (C) are examples of Good natural mapping, you can easily identify the controller for each of the burners on the stove without thinking much , magical mapping! In both illustrations, the arrangement of the controls is aligned with their respective burners on the stove.

Example of Natural Mapping in web application:

Example 1 — A carousel is a perfect example of Natural Mapping.

The figure above is a good example of good natural mapping, where Right arrow is used to proceed to the next image while the Left arrow is used to go back to the previous image and the indicator (signifier) displays the current status of the carousel. Hence, we do not require any label or instruction to understand the operation of this carousel.

Example 2 — Transition behavior of a Popup/Light box

Transition of a popup box should be naturally mapped. When it opens or “pops-up”, the transition should appear in the upward & expand , so as to draw focus to the pop-up organically, and should downward & contract transition once the user exits from the pop-up.

Example 3 — Accordion

The collapse & expand behavior of an accordion is also a good example of natural mapping. As in the illustration below, the collapsed view has a (+) icon control which when triggered, expands targeted section and vice-versa for the (-) icon. You don’t have to explicitly define the controls to the user.

Apart from these examples, there can be many UI components where good natural mapping can make a vast difference to the user experience e.g. navigation, sitemap, form, transition from one page to another etc etc.

The concept of natural mapping has no specific guidelines or any methodology, it’s just to create a relationship between a controller and an object. It should enable a first time user to easily understand the system under consideration, while also highlighting the cultural & physical constraints.

A good implementation of natural mapping should not require a diagram, label or a set of instructions for a pleasant user experience. A smart, simple and logical approach to the design/usability of the product is what Natural Mapping is all about .

Reference — Book: The design of everyday things by Don Norman

Related posts:

This is an attempt to research how journalism could profit from, or be defied by, the use of blockchain in journalism pursued under my Knight Wallace Fellowship at University of Michigan 2018/2019…