Examples of Natural Mapping on the Web
A few weeks ago I gave an introductory course on interaction design, which I had not given in a while. I took the occasion to thoroughly review my presentation material. The contents of the course cover the most important principles that explain why people interact, starting with concepts like affordance, mental models and natural mapping.
The part on natural mapping was in dire need of an update. Not because there would have been huge developments in the field but because I felt my examples were not very relatable since they mostly referred to natural mapping in the physical world.
In case you are new to the concept of natural mapping:
Natural mapping occurs when controls or information visually relate to the objects they affect or represent.
The most common example is the arrangement of the knobs of a stove that typically do not correspond to the way the heaters are arranged and thus make it impossible to intuitively know which knob controls which heater.
A cooktop with a natural mapping of the knobs makes it clear which knob controls which heater.
Further reading: Don’t get burned by bad mapping
The stoves and other examples coming mostly from industrial design are great to illustrate the concept. Many students though found it hard to relate the concept to the web so I put together a collection of examples of different forms of natural mapping on the web.
Natural mapping is not confined to physical products. Digital interfaces relate to physical things, to the context rooted in reality.
A trivial example of natural mapping is the address block for shipment info.
The name fields have the mapping in the label. (It will remain an eternal mystery why some designers choose to reverse the order.)
The elements in the address move from small to big, as if one would zoom out of a map. This mapping has shaped our mental model of how addresses should be structured.
So whenever the order is changed the interface does not only not follow a natural mapping, it also doesn’t follow a mental model and is likely to cause irritation.
The date notation is another simple example of natural mapping (except for the date notation used in the United States). The notation and mental model took over the mapping from small to big. Interfaces that follow this date notation show the elements in that order.
Ignoring natural mapping can add significant cognitive load making it more difficult to process information. The following lists both show the route of the Wengernalp Railway with the corresponding legs. The list on the left was before the website’s last redesign. The way the legs are displayed is confusing since the starting point and destination of each leg are switched. The list on the right follows a clear simple natural mapping that conveys the same information with a much smaller cognitive footprint.
Natural mapping in connection with interface controls makes it clear what happens when the control is used. A ubiquitous and straightforward example would be a carousel with the arrows to go forth and back in the order of images. The dots give feedback to where the user is in the stack of slides.
An interesting and more advanced example of natural mapping is the timetable the Swiss Federal Railways show when users search for connections. Several natural mappings happen in one single screen.
The results are shown in a chronological order of departure.
The changes of trains are shown in relation to the duration of the journey and the expected passenger load is visualised
Designers have to be aware that the interfaces they design are not detached entities. Users will tie them to the context of usage. They will tie interfaces to their mental models which in turn may rely on natural mapping.
Adhering to natural mapping makes design disappear. On the other hand, it might well be that the reason a design doesn’t work is that natural mapping was ignored. Considering natural mapping is an easy way to start the assessment of an interface.
