Perception and the design of forms — Part 5: Proximity

This is the fifth article in our series about visual perception and the design of forms. We're focusing on 6 relevant principles of human perception, namely:

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

Relationships (things that are about how multiple objects relate)

The principle of proximity in visual perception is a very simple one: things that are spatially close to each other are seen as related. We can use this principle to make it clear when elements on our form have an association, and when they are separate.

Put things that are related close together, and space things that need to be seen as separate

Things on a form that are related include:

  • fields and their labels;
  • questions and their corresponding answer spaces;
  • different response options (e.g. radio buttons) for a given question; and
  • questions within the same section.

Hence, we want to make sure that we put these pairs or groups of elements in close proximity to one another. Below are two examples of forms that use the principle of proximity in this way.

In Figure 1, the field labels are each flush right and only a few pixels away from the fields they refer to. This helps the user move seamlessly from reading the label to filling out the field.

Figure 1: In this web form, field labels are in close proximity to their respective fields.

In Figure 2, the different answer options are close to each other, vertically. Also, as a group, they are close to the question they refer to and further away from the next question.

Figure 2: In this paper form, the checkboxes are close to each other, as well as the question they refer to (e.g. Q19), but further away from the question that follows (e.g. Q20).

Explicitly consider proximity when laying out your page or screen

Obvious, right? Perhaps, but all too often we see forms that don't apply this principle, resulting in something less usable than it could be. In many cases, the culprit is a desire to artificially align elements, at the sake of the law of proximity.

Figure 3 illustrates the typical problem. Fields are flush left — as they should be — but so are the field labels. The distance between each label and its field means that the two elements are not seen as related, and it is hard to know which goes with which. In some of the more extreme cases that we've seen, the labels seem to form a tight little group, completely unrelated to their corresponding fields. Such forms may seem ‘neat’, but they sure are hard to fill out.

Figure 3: Having both fields and labels flush left leaves (uneven) amounts of white space between the two elements.

Figure 4 is another example of labels being separated from their fields, this time thanks to an inappropriate pursuit of consistency in text alignment. Having all the text centred means that the left-most radio button is evenly spaced between the first and second answer option (“Happy to proceed” and “No, I'd rather not” respectively). Similarly, the second answer option (“No, I'd rather not”) ends up being evenly spaced between the first and second radio buttons. Doing this means that the form-filler has to stop and think: most undesirable, especially if it happens many times on the one form.

Figure 4: Lack of proximity between labels and fields — due to all text being centred — makes this form harder to fill out.

Use space to indicate separate elements

We can apply the principle of proximity in reverse: elements that are spaced apart from each other are seen as separate. For forms, this often means including the appropriate amount of white space between things like questions and sections. We've seen this in practice already with Figure 2 above.

Often one of the most important times to ensure sufficient separation through spacing is when radio buttons or checkboxes must be presented horizontally (not recommended, but necessary on occasion). In such cases, there needs to be more space between each label and the checkbox/radio button that comes after it (assuming the box/button comes to the left of the label).

This is hard to explain in words, but easy to see in Figure 5, which illustrates nicely how some adjustment of spacing helps communicate relationships between form elements. Contrast this with Figure 4, where even spacing means an opportunity to convey associations through visual design is lost.

Figure 5: Here the related elements (e.g. each checkbox and its label) are close together and separate elements (e.g. a label and the following checkbox) are spaced.

Be careful about proximity between all elements

So we've seen that consideration of the space between individual elements can help convey relationships, thanks to the law of proximity. One final thing to note is that this principle applies to all the elements on your form. So while you may have got the proximity right between A and B, and between C and D, the proximity between A and C could be all wrong.

This is the problem with the form shown in Figure 6. The principle of proximity has been successfully applied to labels and their corresponding checkboxes and radio buttons. Similarly, the two radio button choices have space between them, important when such options are presented horizontally.

However, the overall proximity of the different options is wrong; the Add/Change label and radio button are closer to the Change label and checkbox from the previous question, than the other radio button within the same question. This means we see the association shown in Figure 7, rather than the intended association, shown in Figure 8.

Figure 6: The spacing in this form is only partially right.

Figure 7: The vertical association created by too much proximity/insufficient space.

Figure 8: This horizontal association should be more prominent than the vertical association in Figure 8, but it isn't because of the lack of space between questions.

The relative placement of form elements has meaning

Hopefully these examples have shown that the proximity of all of the elements on your form communicates their relationships to the user.

You'll find that with a little practice, implementing the proximity principle is really quite easy. Utilise this powerful law of visual perception to make for a frictionless form filling experience.