Gestalt Principles and the Laws of UX: Part 2 - The Law of Similarity

The scientific principles I use every day designing in tools like Figma were predominantly researched and documented between 1912 and 1960 - before the invention of computers and mobile phones or the gurus of UX at NNG.

Each week I am going to release a new Law of UX. This week is the first of the Gestalt Principles - The Law of Similarity.

Don't want to wait? You can read my take on 9 Laws of UX in the full post on my website.

Our eyes tend to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.

In the world of UX, it means that when buttons, links, or icons share similar colours, shapes, or sizes, users understand that they are related and serve a common purpose.

This is why Google groups related menu items together, much like the "People Also Ask" section, to help users quickly identify and navigate through connected topics.

Another example is the Shorts layout in the YouTube app:

The portrait aspect ratio is visually distinctive, compared to the normal letter box shape of a Video. This helps users visually identify that this a different kind of content and not a part of the standard video feed.

The Law of Similarity takeaways

1. Similarity in design helps users perceive related elements as part of a group or function.
2. Using consistent colours, shapes, or sizes creates a sense of connection between elements.
3. Contrasting elements can be used to visually differentiate unique content or functionality.
4. Grouping related items improves navigation and enhances user understanding.

Further reading:

• The Laws of UX website: lawsofux.com
• Steve Krug’s Don’t Make Me Think
• Interaction Design Foundation IxDF: The Gestalt Principles

References:

• Home | Laws of UX
• Gestalt psychology