One of Gibson’s main arguments about perception is that movement is a crucial part of the process. Our eyes are rarely presented with a static view of a scene, instead we tend to walk around, giving our eyes a constantly changing range of viewpoints. Consider a textured surface which we are trying to observe. As we walk closer the that surface, our perception of it changes are we are able to see increasing levels of detail. The changes in this surface are not random – there is a gentle change in detail to which our eyes are accustomed. Gibson calls this change in perception optic flow.

Reproducing optical flow convincingly is a big problem in computer interfaces. In a virtual environment, for instance, we can model object surfaces by giving them a fixed texture. As we walk around the virtual environment, objects change size in accordance with perspective rules (object sizes can be rescaled according to well understood mathematical rules.) What does not change, however, is the texture, or detailing, on surfaces. The transitions in surface detail are not well understood and quite often the “solution” is to store a model for remote viewing and one for close viewing. The resultant effect is unsettling as object suddenly change from blurred to pin-sharp detail with only the smallest of movements through the virtual environment. This problem is called popping and can be seen in the images below. In figure below, the viewer is standing back from the cow.

As they move a few millimetres forward, the computer decides that they should be able to see more detail and suddenly the cow has an eye, as can be seen in this figure.

Optical flow turns out to be just one case in a wider family of invariants. “Invariant” is the word Gibson uses for any perceived pattern of change within the observed environment – invariants are the patterns of change which are familiar to our visual system. One particularly important class of invariant is the affordance, which we shall investigate next.

One idea of Gibson’s which is crucial to interface design, is that of an affordance. Gibson says that our environment contains invariant information, the successful detection of which has survival implications for the observer. These affordances which objects provide give the observer clues about how they might be used – sit on-able, grasp-able, throw-able etc. In effect, the affordances provide the meaning the environment has for the observer, showing them what is possible within that environment. The interaction possibilities provided by the affordances has been called the effectivities of an environment.

Remember that the ecologists are claiming that these affordances are being perceived directly – there is no conscious processing. Therefore, the properties of an object which make it appear graspable can be directly inferred from nothing more than the reflected light from that object striking our eyes.

This is quite a bold claim, which the ecologists defend by arguing the subtle and inextricable links between observer and observed environment. Regardless of the exact mechanism of how we perceive affordances, there effect in computer interfaces is profound.

One psychologist who recognised the importance of affordances in designing interfaces was Donald Norman. He showed that interface elements could be designed to afford how the user should interact with them. Consider the button below, part of the original Macintosh interface.

How do we know that this is in fact a button? How does it afford pushing? A better version of the button would be…

In this case, we can see that the button is raised off the page, so could perhaps be pushed level with the page. As computers became more powerful, colour could be added to interfaces providing even better affordances, as in…

By using a bevelled edge and a metallic colour, the button now looks like its real world counterpart. The result is an on screen button which provides the same affordances as its more familiar real-world counterpart.

Norman used a wide variety of examples ranging from computer interfaces to door handles showing how badly designed objects could afford one style of interaction, but actually use another. A common example of this are door handles. Handles of the type found in the left side afford pushing whilst those on the right afford pulling. Quite often the plates on the left door are used for pulling the door open. This is why people often spend ages pushing pull doors (or indeed pulling push doors) as the handle affords the wrong type of interaction. Where handles are used inappropriately, they are often marked with an instruction.

Look at the two graphics below. One is a button and the other is a text box. How do you know which is which?

The one on the left is the button, the one on the right is the text box. The only difference between them is the shading on their edges. In the convention of user interfaces, buttons are raised and text boxes are recessed. This only works, however, if we imagine a light source shining from the top left hand corner of the screen.

If the light shone from the bottom right of the screen, we would perceive the left image to be the text box, and the right hand image to be the button.

Fortunately all graphical user interfaces assume a light source at the top left hand corner of the screen. Therefore, any image or icon you create on the screen should have its top and left edge drawn in a lighter colour if it is to be perceived as a raised object. All recessed images should have their top and left edges drawn in a darker colour.

Look at the buttons at the top of this browser and you will see that the top and left edges are drawn in a lighter colour than the rest of the button.

Activity 8

Draw three-dimensional versions of the following symbols – make the first raised and the second recessed.

A discussion on this activity can be found at the end of the chapter.