Gestalt. Principle of similarity to design interfaces – | Blog

Gestalt principles capture how people make sense of the world around them and the images they perceive. They define how humans simplify and organize complex images that are made up of many elements, ordering each part to create a whole.

In the previous entry, , you can find a broader definition of what Gestalt is, its principles and what the principle of proximity consists of. It is one of the most important in UX or User Experience.

Gestalt principle of similarity or resemblance applied to the digital interface

The Gestalt principle of similarity can be explained as all those design elements that appear similar in some way, for example if they share color, shape or size, are perceived as being related. Items that appear different are perceived as belonging to separate groups.

The human being tends to make groups of similar things regardless of their proximity to each other. Through the principle of resemblance or similarity, elements that are not close to each other because they have the same color, shape or size can be grouped together.

1.Adobe

In the Adobe XD page, you can see how applying a color to certain elements of the page makes our brain relate them and therefore we think that they either work the same or in a very similar way. The use of color tends to stand out above other features according to the similarity principle of Gestalt.

We see this example in the buy now button. It always has the solid blue color, which makes us associate it with the same functionality, but in terms of form, it is the same as starting for free. Both are buttons, we understand it by its shape, but with different functionality thanks to the color.

See also  Wireframes and Prototypes in UX. Advantages and objectives - | Blog

2. Carrefour Spain

On the Carrefour Spain home page, we can see how we tend to group the elements thanks to the Gestalt principle of resemblance or similarity. In this case we are affected by color, shape and size traits.

Our brain automatically groups the supermarket categories. Each element has the same circular shape, with the same background color and the same color for the category text.

On the other hand, our brain groups the 3 cards below thanks to the trait of size and shape. Something curious is that within this grouping, our brain will tend to group the two red cards, leaving the third one isolated within the group.

Placing related elements through features such as shape, color or size to create groups and relationships is a fundamental principle in visual or interface design. and helps improve the Usability and User Experience of websites and applications.

credits

Loading Facebook Comments ...
Loading Disqus Comments ...