1

What is the term that specifically describes laying out an object or representation of an object such that the interface reflects the spatial orientation of the object in real life?

For example, controls for a stovetop could be laid out horizontally, across the edge of the stove, as would be most convenient from a mechanical perspective. Four burners, with two on each side, controlled by four knobs, two on each side. Like so:

| * * | | * * | | O O O O |

However, there is no quick, visual, or spatial way to know which of the knobs controls which of the burners - is the back-right burner controlled by the right-most knob, or the second-most-right knob? The control panel could instead be designed with offset knobs (either up/down or forward/backward) to convey information innately, like so:

| * * | | * * | | O O | | O O |

Similarly, information about a networking device (such as a router) could be conveyed via list - for example, which device is plugged into which port.

  1. Desktop
  2. Laptop
  3. Printer
  4. Empty
  5. XBox
  6. Etc..

Or the information could be displayed in a graphical representation, correlating to the layout of the device

Port 1    Port 3    Port 5
Desktop   Printer   XBox
Laptop    Empty     Etc...
Port 2    Port 4    Port...

What is the term to specifically reference this "laying out with innate information conveyed by spatial layout"?

  • Part I - It is unlikely 'natural mapping' is the correct term. Here are 4 research papers on this topic. None of them use this term: 1, 2, 3, 4, Unfortunately, I have not found another term that answers your question. – user1757436 Jun 30 '15 at 14:13
  • Part II - Please use caution when using terms like 'natural' and 'obvious' when describing control-display relationships. Many 'natural' layouts are 'natural' for one group of users but not for other groups. Look for research on 'population stereotype', 'control display relationship/layout', and 'stimulus response compatibility'. – user1757436 Jun 30 '15 at 14:20
  • Per the Wikipedia article mentioned/quoted in the accepted answer, a portion of this is cultural. (E.g. Clockwise rotation = Volume Up.) Simultaneously, I find it difficult to reconcile an objection to the word "Natural" describing four controls arranged in a square, directly correlating to four devices arranged in a square, controlled by those associated and physically-referenced controls. Culturally, what group wouldn't make the association? – user3.1415927 Jul 22 '15 at 19:36
4

The natural arrangement for the relations between controls and their movements to the outcome from such action into the world in known as Natural Mapping.

The above article, from Wikipedia, also using a stove top example; demonstrating poor mapping in control layout:

enter image description here

and good mapping:

enter image description here

Natural mapping provides users with properly organized controls for which users will immediately understand which control will perform which action (source: Wikipedia).

A quick Google search for "natural mapping" will yield many results. One of the top posts is a book review for Design of Everyday Things on Usability Post. In the review Dmitry Fadeyev discusses Norman's definition of Natural Mapping

Mapping is the relationship between two things. In the case of interface design it’s the relationship between a control and its resulting function. For example, a rotating volume control may have a mapping of clockwise rotation to increase volume, and anti-clockwise to decrease.

To create more effective interfaces we need to exploit what’s known as natural mapping. Norman defines it as follows:

Natural mapping, by which I mean taking advantage of physical analogies and cultural standards, leads to immediate understanding. For example, a designer can use spatial analogy: to move an object up, move the control up. To control an array of lights, arrange the controls in the same pattern as the lights. Some natural mappings are cultural or biological, as in the universal standard that a rising level represents more, a diminishing level, less. Similarly, a louder sound can mean a greater amount.

There’s a nice example of stove controls that illustrates this perfectly. A lot of stove controls have the controls arrangement completely detached from the arrangement of the burners. It might look something like this (diagram adapted from the book):

enter image description here

The mappings are not great because the controls don’t represent the alignment of the burners, so you always have to refer to the labels when you want to turn them on or off. We can improve this by using a natural mapping, using a spacial analogy to show the relationship between the controls and the burners they operate:

enter image description here

It’s now obvious which control operates which burner because their layout maps directly to the layout of the burners. With such a natural mapping you no longer even need labels. Yes, there is a downside with this example, it takes more space because it doesn’t neatly line up by the side of the burners, but what would you rather have, a more compact tool or something that’s much easier to use?

  • "Natural Mapping", yes. However, if the stove controls were slightly skewed (as in my original illustrations), would that still be considered "Natural Mapping?" The controls are still relative (Top/Bottom/Right/Left combo), although they are not exactly identical; e.g. trapezoidal vs. squared. – user3.1415927 Jul 22 '15 at 19:06
  • Yes, that is still a form of natural mapping. Though the skewing does not reflect the exact layout it does a better job of representing the physical layout. – Evil Closet Monkey Jul 22 '15 at 19:10
  • Hi @EvilClosetMonkey. i have a question, what is the difference between spatial and perceptual analogy in natural mapping? can you please help me out. – Waqar Ahmed Nov 24 '16 at 20:37
  • @EvilClosetMonkey I have also asked a question here..ux.stackexchange.com/questions/101826/… – Waqar Ahmed Nov 24 '16 at 20:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.