With his wonderful book, The Design of Everyday Things, Don Norman ensured that a generation of interaction designers would be acutely aware of the layout of. . .stove tops. The concept of a natural mapping is now a familiar one: if the spatial arrangement of the knobs on a stove matches that of the burners, it is easy to see which knob corresponds to which burner. The correspondence between a square of burners and a line of knobs, on the other hand, is ambiguous and can lead to potentially disastrous usage errors.

My students offer comparable everyday examples of mapping problems:

The clothes dryers in the laundry rooms here on campus are poorly designed. They are arranged in pairs, with a single coin slot and controls between each pair. More than once, I have put in money and pressed the button to start the wrong dryer. If the other dryer is already being used by someone else, it is impossible to move your own clothes into it. I have ended up paying for other people's clothes to dry by mistake at least twice this semester!

One of the elevators I use has a "walk through" design, with two sets of doors opposite each other. The elevator buttons are in two columns on a panel beside one set of doors. On the bottom row of the panel is a pair of buttons, side by side, for opening and closing one set of doors; the row just above controls the other set of doors. The problem is that there's no easy way to tell which row of buttons is for which doors, so when someone is running to catch the elevator as the doors close, and I reach out to push a button, I can't tell which is the right one.

Most discussions of mappings in the HCI literature focus on such examples and their analogies in user interface design. If we dig a bit deeper, though, we find a strong (but to my knowledge unrecognized) connection to another general concept in HCI, that of affordance.

Affordances can be thought of as opportunities for action in the environment, opportunities that can be perceived immediately or via exploration. The knobs on a stove are a good illustration. Knobs are contoured to fit the hand, such that they can be easily activated by a twisting motion. Even if I had no knowledge of the behavior or purpose of a knob, I could still see that it is grippable; trying out different motions while gripping the knob would eventually teach me that twisting it is the correct action to take. (Perhaps surprisingly, knowing which direction to twist a stove top knob seems to be a matter of convention, based on a metaphor with "increasing" time on a clock face.)

Harold Thimbleby has suggested that central aspects of affordance are captured by the concept of symmetry. For example, a knob has an affordance for grippability because of the symmetry between its shape and the configuration of my fingers as they close on it. In "Reflections on Symmetry," Thimbleby writes,

Hence Gibson [who coined the term "affordance"] assumed the human (i) recognises a set of symmetries (ii) particular sets of symmetries stimulate particular responses. Together these ideas constitute affordance.

One of Thimbleby's key insights is that symmetry in the user interface generalizes beyond visual arrangements, to states and actions: if an system has translational symmetry, for example, then an action taken in this interactive context has the same effect as in that context.

Mappings and affordances come together in the process of learning how to act in an environment. If I have some set of objects that can be acted upon to cause changes in the environment, as in the examples above, then natural mappings are spatial symmetries that tell me where to expect a change when I interact with a specific object. Affordances of the kind described above are procedural symmetries that tell me how I can interact with an object and sometimes, by translation, what I can expect will happen as a result.

In user interfaces, many common conventions for layout and function can be traced to the appropriate use of symmetry. For example, buttons for scrolling upward are always above, not below, buttons for scrolling downward---a natural mapping. A horizontal slider that controls vertical scrolling would break a symmetry based on orientation. Natural mappings are not always unique, however. In visualization applications such as Google Earth, for example, it's possible to zoom in on points of interest. Zooming in can be interpreted as "moving closer", which in this application is handled by moving a vertical control upward, but zooming can also be thought of as "increasing the level of detail", which could be handled by the same vertical control or by moving a horizontal control to the right (a convention based on an analogy to a number line).

Affordances, in the form of the symmetrical translation of actions, can also be seen in the user interface. Moving about locally in a visualization is sometimes supported by a dragging action on the scene displayed, an action that corresponds to sliding a paper map across a desk. Sometimes an interface does not entirely meet expectations; in trying to change the angle of view of a map in Google Earth, for example, I tried "pressing down" on the lower part of the map to tilt the surface, but to no effect. What's important here is that analysis of the actions possible in one context can help designers understand what is expected in similar contexts.

We'll end this essay with another student example of a "broken" affordance in the real world:

Have you ever seen mirrors in the bathroom that double as medicine cabinets? All the bathrooms in my house have these. They sit up off the wall (about three inches) and to open them, you just pull on one of the edges. My friend has a mirror in the bathroom of her apartment that sits up off the wall. Naturally I assumed it doubled as a medicine cabinet. Imagine my surprise when I pulled on the mirror, to open it, and it fell off the wall. It wasn't a medicine cabinet after all!