Perception and the design of forms — Part 6: Similarity

This is the sixth and final article in our series about visual perception and the design of forms. In case you don't know these off by heart yet, the six Gestalt principles particularly relevant to forms are:

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

Relationships (things that are about how multiple objects relate)

So without further ado, let's look at similarity.

We see a relationship between things that look similar

The principle of similarity is quite straightforward: things that look similar are assumed to be related in some way. This is a sensible assumption if you think about the world around you. Parents and children (usually) look similar, as do creatures from the same species.

In the world of forms, this principle helps us emphasise which elements are related and draw out differences. For example, we can convey that a series of options are equally viable or important by giving them the same visual styling. Conversely, if we want to highlight a particular option, we can change its visual treatment slightly.

You probably haven't realised quite how much the principle of similarity is leveraged in the design of forms. Take buttons as an example. Styling all the navigation buttons on a form the same way helps convey that they are all widgets of the same type and priority. See Figure 1 for examples of this.

Figure 1: A selection of buttons from a variety of web forms. Within each form, the buttons are all styled the same way.

If one button is primary, we can show this by changing one aspect of its design, such as its colour. Examples of this are shown in Figure 2.

Figure 2: Another selection of buttons from a variety of web forms. Within each form, the buttons are mostly styled the same way, but colour is used to give priority to some over others.

The three “characteristics” influence similarity

What design elements are important to convey similarity? The button examples above give a hint: within each form the buttons all have the same shape and size, but may vary by colour. You might remember shape, size and colour: they are our three characteristic Gestalt principles.

Having the same shape and size helps convey a degree of similarity, with the colour conveying a degree of difference. The end result is that we see they are all part of a family of buttons on a form, but know which button is the one the designer wants us to press.

Any of the three characteristics can be used to manage similarity but in our experience, colour seems to work quite well. Of course you want to be careful in your use of colour for all the reasons we talked about earlier (e.g. catering for people with colour-deficient vision).

Similarity should be from the user's perspective

Have a really quick look at Figure 3 below and see what stands out to you. Don't worry if you can't read the text, it's not important for this exercise.

Figure 3: This web form uses colour to link together some parts and separate others. But has the colour been applied in the right way?

Chances are you saw a darker green column of stuff, with a lighter green column of other stuff to the left of it. If this is what happened to you, you've responded to the principle of similarity, effected by the use of colour. Quite possibly, the designer of the form was quite happy with this effect, as they saw all the help (i.e. what's in the right hand column) as being related and all the form questions and answers (i.e. what's in the rest of the form) as being related.

This structure doesn't help the user, though. For someone filling out the form, the question, its answer options and the help are associated. For instance, the form will be easier to fill out if there is a link between the “More help” and the question it relates to, namely “What type of passport is the applicant applying for?”.

Consequently, a better approach would have been to shade across the rows, rather than down columns. That way, everything to do with one question is visually associated with it, thanks to the principle of similarity.

You might be familiar with this technique. It's called zebra striping (or candy striping or half shadow) and an example of it is shown in Figure 4.

Figure 4: Shading rows on this web form alternately very pale blue and sky blue helps communicate similarity within rows and difference between rows.

If you want to know more zebra striping and how to use it to enhance your forms, you might be interested in research Formulate conducted back in 2008 and published on A List Apart:

Let Gestalt guide the layout and styling of your forms

Well that's it, the end of our series on visual perception and the design of forms. Hopefully we've helped explain the six key Gestalt principles that provide subtle cues to completion if used well, or can throw a real spanner in the works if used poorly.