Please enable JS

a blog about the links between ux design and cognitive sciences.

img

GESTALT PRINCIPLE #2 : SIMILARITY

november 19/ux design, gestalt theory

The next fundamental gestalt principle I want to introduce is similarity. The principle of similarity is grounded on the idea that things which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together.

It means that if a person perceives the set of elements, he or she tends to group the ones which have one or several features alike as the related items. Therefore, giving different layout elements identical or similar visual features, designers stimulate users to set the appropriate connections and understand the whole scheme faster.

Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent color, layout, capitalization, fonts, and so on, should be employed throughout.

 Ben Shneiderman, University of Maryland

Similarity is when you perceive a relationship based on some attribute of that element, being shape, color, size. Alignment can reinforce and actually allow dissimilar items to be perceived as similar. As interaction designers, the important aspect is to allow the design to reinforce easy parsing and understanding the actions that come from selection or manipulation.

Links

img
dribbble

Links and navigation systems are essential to allow users to view website content and navigate between different pages. Thus, text links should be differentiated by color (commonly blue) and usually shape as well. The use of the principle of similarity in menus and navigation helps users see the relationship between each group of navigation links. They will then perceive similar navigation items as being related or having a similar place in the site’s data hierarchy.

Content

img
dribbble

We can also use color, font size and type or highlighting to distinguish between and mark the types of content before a user reads them.

For example, quotes that appear in boxes, in a slightly bigger font, with an italic emphasis, are easily recognizable as such. The law of similarity carries our recognition of this standard from one website to another.

Breaking the law of similarity can also help draw a user’s attention to a specific piece of content – such as a call to action. That’s right; we can make use of both sides of the line or border the law makes. The user’s eye is a remarkably easy tool to manipulate; you just need to figure out what parts of your design you want to bring out or tie together.

Header

img
dribbble

Website headers play another essential role in organizing and building well-structured content for search engine crawling and for the reader.

We normally place headers above content in a different font, color, size, etc. from the body of the content. They assist the reader in finding the relevant points in content and help control the overall flow of the work.

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns.

So see you next week for another unavoidable Gestalt principle !

REFERENCES

  • Interaction Design Foundation: The law of similarity - Gestalt principles (1)
  • UX Planet: Gestalt theory for efficient UX: Principle of similarity