Perception and the design of forms — Part 1: Shape

Why do we see what we see?

Most of us understand, in a general way, how it is that humans see. Light hits the eye, stimulating rods and cones and sending electrical signals down the optic nerve to the brain. But have you ever stopped to think about how this biological process leads to the rich visual space that we move about and interact with every day? For example, how is it that we can know, without thinking, that the computer monitor is closer to us than the window, which is closer again than the car parked on the street outside?

In this particular example you could argue that we understand cars are parked on the street, and the street is something that runs outside the building we are in, and the monitor is on the desk that we are working on. This is all true, but the reason we know even this is through information that comes in through our senses, helping build our picture of the world.

Here's another example. If you show people the first image in Figure 1, almost all will interpret it as consisting of the two shapes shown in the second image, rather than the three shapes shown in the third image. There's nothing innately “better” about the second image that should cause it to be the “natural” interpretation. Nevertheless, the way people process an image like the first one is consistent across culture, age and gender.

Figure 1: Demonstration of the consistency in the way humans see.

Underlying principles lead the brain to interpret what we see consistently

Work done predominantly in Germany in the 1920s and 1930s uncovered a series of underlying principles that influence our visual perception. These principles are often referred to as the Gestalt Laws of Perception (the German term “Gestalt” can be broadly interpreted as a referring to a “pattern of experiences”).

There are many articles, both in print and online, that explain the different Gestalt Laws, so we won't cover that ground here. Instead, we'd like to look at the subset of principles that has a direct influence on how we should lay out forms, be they paper-based or electronic.

6 Gestalt Laws of Perception relate directly to the visual design of forms

There are 6 principles of Gestalt that are valuable guides for us when setting out forms:

  • Shape
  • Size
  • Colour
  • Figure/ground
  • Proximity
  • Similarity

These 6 principles can be grouped into two categories: characteristics (things that are an aspect of a single object) and relationships (things that are about how multiple objects relate):

Characteristics (things that are an aspect of a single object)

Relationships (things that are about how multiple objects relate)

This will be the first article in a series covering each of these 6 principles and their connection with the design of forms that are easy to use. In this first article, we're going to take a closer look at the characteristic of shape.

Humans are great at detecting and distinguishing shapes

The Gestalt research has shown that when viewing the world, humans have a tendency to seek out whole shapes. This makes sense as objects are central to our being able to function successfully. From a tree on the savannah to the mobile phone on our desk, it helps us to be able to discern whole objects, rather than a conglomeration of random lines, edges and shades.

This object focus also means that we can very quickly detect when one shape is different from another. In fact, this characteristic is processed by the brain pre-attentively. In layperson's language, this means you don't have to stop and think about it, a glance is all you need.

Make things look like what they are

When designing forms, we can use this pre-attentive processing of shape to our advantage, to seamlessly communicate to the user what action they are supposed to take. In particular, it is important that we:

  • use checkboxes and radio buttons to indicate things that require a ‘selection’ action
  • use larger boxes to indicate where a longer, textual answer is required
  • give buttons a ‘button-like’ shape.

These may seem like obvious pointers, but you might be surprised by the number of times the shape of a form widget is modified, often in an attempt to make the form more ‘interesting’.

In the example below, the designer hasn't given rounded corners (or bevelling) to the button and consequently, it isn't instantly recognisable as one.

Figure 2: The visual design of the button on this form means it is not instantly recognisable as one.

Don't break shape conventions

When it comes to shape and form design, the other thing to keep in mind is the influence of convention. Rightly or wrongly, it's probably fair to say that people using computers have gotten used to the idea that on an electronic form, a checkbox indicates multiple choice and a radio button indicates a single choice, as shown in Figure 3.

Figure 3: The shape of the form widget helps communicate how it is to be used.

Sticking to this convention is going to make filling out your form much easier and quicker for your users. Conversely, breaking the convention — as has been done in the survey shown in Figure 4 — means the user has to stop and think to work out what to do in order to answer.

Figure 4: On this form, miniature buttons have been used rather than radio buttons, making it harder for the user to work out how to answer.

Had the survey used standard radio buttons (perhaps bolstered by some zebra striping) users would have been able to use the shape to intuit that a single choice per line was what was needed.

References

Ware, C. (2004) Information Visualization: Perception for Design. Morgan Kaufmann, San Francisco.

Metzger, W. (2006) Laws of Seeing. MIT Press, Massachusetts. (This is an English language reprint of Gesetze des Sehens, which was published in 1936.)