Perception and the design of forms – Part 4: Figure/ground

We're making our way through a series of articles on how the visual design of forms should be influenced by the way humans see. So far, we've examined the three characteristics:

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

• Shape
• Size
• Colour

Now we turn to the first of three relationship principles:

Relationships (things that are about how multiple objects relate)

• Figure/ground
• Proximity
• Similarity

In this article we are going to explain the principle of figure/ground, which is surprisingly central to how forms work. More often than not this principle is—unintentionally—applied well. But we'll also show you a few examples of when it isn't.

Figures are things, ground is what's left

Look around you. Everything you see falls into one of two categories: objects; and the surfaces that they sit on, beside, in front or inside of. For example, in Figure 1 below, we see objects—like the sofa and the coffee table—and we see the surfaces those objects are on—like the floor.

Figure 1: Wherever we look we see figures (e.g. the cushions, the curtains, the remote controls) and ground (e.g. the floor, the walls, the outside).

In Gestalt theory, the term for an object is figure and the term for everything else is ground. What determines whether something is figure or ground is as follows.

Figures:

• are in the foreground;
• have definite shape; and
• are not the ‘remainder’ of other shapes.

Ground:

• is in the background;
• is continuous behind figures; and
• has no clear position in space.

As you might expect, this distinction between figure and ground can become complicated very quickly. Look again at Figure 1 and you may see that the sofa could be considered a figure in relation to the floor, but ground in relation to the cushions. Our brains are clever enough to work out all these relationships at once, to give us a total picture in which the objects, and the surfaces they are on, make sense.

Thankfully, forms are not nearly as complex a visual stimulus as a view of one's living room. As such, it doesn't take much for the figures to be made distinct from the ground, as the example in Figure 2 illustrates.

In this form, a thin grey border is all that is needed to make the write-in boxes appear to be figures, sitting on top of the background of the form. Once we see things as figures, the fact that they are on a form tells us that they are the things we interact with.

Figure 2: Even though there aren't many visual elements or treatments on this page, people still know immediately where to put their cursor (or pen) and type (or write).

Use just the right amount of visual design to create your figures

Too much visual design is wasted on figures

As Figure 2 showed, not much is needed to make our form widgets be seen as figures. Too often, designers are worried that users won't know what to do, so the designer adds further visual treatment to make the different form elements stand out even more.

With forms, the figure/ground principle tells us we need to use just enough visual treatment to make the figures visible. Any more than that is not only distracting, but is an additional burden on the user, as every visual element has to be cognitively processed.

In Figures 3 and 4 below, there was no need to add the field shading or border colours. In fact, they make filling out the form harder than it needs to be.

Figure 3: The yellow shading and blue borders on the fields of this form are not only unnecessary, they lead to inconsistency when other fields — like the drop-down — are not styled that way.

Figure 4: The red borders on this form's fields are not needed and actually make the form seem more cluttered and overwhelming.

Not enough visual design hides figures

Similarly, not enough visual design can make figures hard to identify and leave form fillers scratching their heads. This doesn't happen very often, probably because electronic form widgets have borders by default. However, we did come across the form in Figure 5 below. Took us a while to work out how to fill this form out. How about you?

Figure 5: The lack of borders on the drop-downs on this form makes them hard to see as figures.

In summary, we can rely on the principle of figure/ground to help users work out where the interactive widgets on a form are. This principle is very effective, so only a small amount of visual treatment is needed to invoke it, any more is a serious waste. Think of it as a Goldilocks principle: not too much, not too little, just right.