Natural mapping in practice: the new iOS 13 volume HUD
After the new iOS 13 update, I noticed one salient change.
The volume HUD evolved from a clunky, horizontal icon to a smaller, vertical bar tucked away on the left side of the screen:
Why is the new volume HUD better?
Many people might argue that the new volume HUD is better because it is:
- simpler
- less obtrusive
- aesthetically pleasing
And these are all valid reasons. However, I noticed that its design reflects the application of a concept that is often used in interface design, called natural mapping.
What is natural mapping?
Natural mapping refers to when the relationship between the controls and the object being controlled is intuitive and obvious.
One of the most ubiquitous examples used to demonstrate natural mapping is the stove example:
As the diagram suggests, design A is unintuitive because users have no way to tell which knob controls which burner. On the other hand, the knobs on designs B and C are placed in the same orientation as the burners, suggesting a clear relationship between each knob and burner. The spatial analogy present in designs B and C leads to an immediate understanding of how the stove should be used.
Natural mapping is a crucial aspect of good design because it reduces the cognitive loads of users, as they are less required to rely on memory when performing a task. It reduces human error and increases usability.
There are three levels of mapping:
- Best mapping: Controls are mounted directly on the item being controlled.
- Second-best mapping: Controls are as close as possible to the object to be controlled.
- Third-best mapping: Controls are arranged in the same spatial configuration as the objects to be controlled.
In the case of the new iOS 13 volume HUD, the proximity between the physical volume buttons and the slider/indicator demonstrates “second-best mapping.” Since users can now slide their fingers to manipulate the volume, it makes sense to have the volume slider next to the volume buttons. The strategic placement of the volume HUD establishes a relationship between the control and the object being controlled.
Imagine if the slider was implemented into the old volume HUD design:
It just wouldn’t make sense to place a slider that operates horizontally (perpendicular to the volume buttons) at the center of the display.
The future of UI: Will we see more examples of natural mapping?
Despite the fact that natural mapping is one of the most obvious components of good design, it is baffling to think that Apple only just thought to implement this new volume HUD.
As tech design becomes increasingly sophisticated, I think developers and designers will start experimenting with novel ways to increase product usability — and I’m excited to see what comes next.
