The Gestalt Principle of Similarity

This is the third post in my series about the Gestalt Principles as relates to form design. In this post I talk about the Gestalt Principle of Similarity. Of all the Gestalt principles, the principle of similarity is probably the easiest to understand. It states that elements within an assortment of objects are perceptually grouped together if they are similar to each other. To put it in simpler terms, things that are similar are perceived to be more related than those that are dissimilar.

Think Twins!!

I am an identical twin, so I completely understand this principle as I have been living it all my life. The most memorable question ever asked of my brother and me was “Are you all twins or brothers?” Our answer was always “Yes.”

As Figure 1 shows, similarity can occur in the form of size, color, shape, shading or other qualities.

Figure 1:The Similarity Variances of Share, Size, and Color Source: Interactive Design Foundation

Let’s take a look at the star diagram that we used to help describe proximity. Is there anything that immediately captures your attention?

What do you notice first - rows, columns, the two blue stars, or the 14 gray stars?

Figure 2: Similarity of color helps the user focus on a specific area.

A few areas on forms where the similarity principle comes into play are, but not limited to, labels, buttons, and fields.

Labels

As Figure 3 demonstrates, all field labels should maintain similar formatting throughout the form. You don’t want to have some labels that are left aligned, some right, aligned, and some center aligned. Pick and alignment and stick with it. Similarity can also be achieved by using generally accepted design elements in your form design. For example, the red asterisk (*) is commonly used to identify a required field. Don’t be creative and use another character or color to identify required fields – it just does not work. Note: Nintex Forms is programmed to automatically place the * in the label when a field in the SharePoint list is marked as required.

Figure 3: Similarity of label alignment and of special markings.

Buttons

All buttons should be of similar appearance. What about the placement of the Save and Cancel buttons? Should the order be SAVE CANCEL or CANCEL SAVE? What do you think? Which do you prefer?

Figure 4: Order of Save and Cancel buttons

The correct answer is that there is no correct answer. Read the following quote from the Nielson Norman Group.

“In cases like this, it often doesn't matter what you do. Either choice has good arguments in its favor, and no choice is likely to cause usability catastrophes. It might save some users 0.1 seconds if you pick the "right" choice for certain circumstances, but it's simply not worth it to conduct sufficiently elaborate research to find out what that choice is.”

Fields

A particular element can be emphasized when it's dissimilar, breaking the pattern of similarity. This effect is called an anomaly. Highlighting a selected field is an example of an anomaly. In Figure 5 below, the form fields have been modified to highlight when selected. The dissimilar field is the active field.