This is the second post in my series about the Gestalt Principles as relates to form design. The introductory post can be found here. In this post I talk about the Gestalt Principle of Proximity. Proximity is all about whitespace - the area of blank canvas between objects. To me, whitespace is one of the most important elements of good form design, as the good use of whitespace makes a form look clean and easy to use.
Principle of Proximity
The principle of Proximity states that when an individual perceives an assortment of objects they perceive objects that are close to each other as forming a group. In Figure 1 below, the stars on the left are grouped closer together horizontally, so we tend to first see them grouped as rows. While the stars on the right are closer together vertically, so we tend to first see them as grouped in columns.
Figure 1: Proximity: Items that are close together appear to be grouped.
The principle of Proximity relates to forms in many ways from placing related fields close to each other or away from other content to aligning a label with its field.
In Figure 2 below, you can see two groups of fields. The first group captures information about the user, the second group captures the user’s feelings towards a certain topic. The proximity of the fields to each other shows relation. Those that are close to each other are related and those that are away from each other are not related.
Figure 2: The three text fields appear to form a separate group from the option button group.
In the next set of images, you see several different alignment layouts between the labels and their related fields. In Figure 3, the labels are left aligned. Notice the amount of white space between the label and the field. Some users might not associate the label with its control. In Figures 4 and 5, the labels are right aligned and top aligned. As you can see, the labels are close to the fields and more likely to be perceived as being related. In Figure 5, the labels could be placed even closer to their fields to make it even clearer that they are related. And finally, in Figure 6, the label is included in the field itself, providing little question as to what content goes in the field.
Figure 3: Left aligned labels. Could appear to the user as being unrelated to the text fields to the right.
Figure 4: Right aligned labels. Are closer to the text fields and visually appear to be related.
Figure 5: Top aligned labels are closer to the text fields and appear to be related.
Figure 6: Labels in the text field provide no question as to what information belongs there.
So that’s it for the principle of Proximity. I hope you found this article helpful. Feel free to reach out to me with comments or suggestions on how I can improve this series. I am relatively new to blogging, so I am open to helpful suggestions.
Next up I will discuss the The Gestalt Principle of Similarity.
Other posts in this series:
