Mislead visual behaviour with Gestalt – the principle of similarity

Gestalt theories are part of the tools behavioural experts use to predict the response of a user’s visual system to a computer screen.

Let’s now discover the first of seven principles in all: the principle of similarity

Gestalt - Ethias vs Axa

When two elements have a similar size and shape (and less similarity in colour or orientation), the brain will link them together when it is treating the visual data in the Netway Neuro-Visual Landscape.

Gestalt - Similarity example

In the Ethias screen all graphical elements are linked to a similar object. The brain will give a meaning to those 4 types of objects, instead of having to give a meaning to the 14 separate elements. 

On the AXA site, however, there are only 5 similar objects and 12 objects that aren’t linked to each other by their size or shape. The brain must give a meaning to 5 associations and 12 objects, what comes down to 17 meanings instead of the 4 meanings in the Ethias case. 

Gestalt - Similarity

We can also prioritize the zones of the screen by applying the principle of similarity.

When I was making the Ethias screen, I made the green zones the most important, followed by the orange, blue and red zones. This choice was made in order to meet the business objectives and the tasks people would want to perform on an insurances site. 

This is but one of the seven principles an expert will take into account, on top of other state-of-the-art techniques, to build this type of result. 

Have an excellent week. 

5 Comments

  • Gestalt principles are very useful in webdesign – every designer should be familiar with the theory and use it actively in their designs.

    Looking forward to see the example on 6 next 🙂

    Have nice day

  • I am a User Experience Designer with over 1500 hours of usability testing conducted on website. I found your article very interesting but was surprised by the order of information represented by the colours. From testing similar solutions, the Red zone is definitely priority 1. However, the Orange zone tends to be ignored by many users as either help and support, tools or marketing information. This is a learned behaviour and results in many users I have tested being ‘blind’ to this part of the page. Add to this the fact that users generally move from left to right and top to bottom diagonally across the page, the result is not as clear cut as you have highlighted.

  • @Alan : thanks for your feedback.

    The colors are only used to represent the similarity links between different zones.

    If you use colors to evaluate the visual path, it’s not so simple. Indeed, foveal fixations are not always at the same position and depend from the scenario you ask to the user. If you are right about the natural flow from left to right and from top to bottom, the interface can generate a totally different path depending on the expert’s choice.

    It’s really important to be careful with general observations. Depending on the scenario you use, people can use “help and support”, “tools” or “marketing information” can be see in the first fixations. Example : I can’t find the info I want and I need some help.

    Finally, concerning the point that Red Zones are visualized first, I can’t agree with this conclusion. I propose you to read the following post wich will give you our findings :
    http://www.simplifyinginterfaces.com/2008/08/netway-interface-comfort-zone/
    http://www.simplifyinginterfaces.com/2008/09/netway-interface-sweet-spot-2/

    Have a nice day…

Submit a Comment