Use Gestalt Laws to improve your UX (Part 1) Design

Use Gestalt Laws to improve your UX (Part 1)

An overall good user experience is an essential aspect for creating a successful website. The term user experience seems to be a popular trend lately, but how can we describe user experience and how can we make sure to offer enough of it on our websites?

To keep it simple, user experience describes how users perceive a website, what kind of emotions they have when visiting a website, and whether or not they are motivated to return. This subjective experience is in a large part based on the visual appearance of a website.

Of course web design is its own field of expertise and one could claim that only experienced designers are capable of designing a good website and therefore provide the basis for high user experiences. There are some basic principles, though, that help not just professionals to design an appealing website – the so called ‘Gestalt Laws’.

Figure 1 - Law of Similarity (http://sensingarchitecture.com/tag/gestalt-principles/)

Figure 1 - Law of Similarity (http://sensingarchitecture.com/tag/gestalt-principles/)

 

Gestalt Laws

Gestalt Laws are simple principles or suggestions of how different elements are perceived when combining them in a certain way or order. Gestalt Laws can help to create for e.g. structure and a sense of belonging together on a website, they give suggestions of how to draw attention to elements that are important or how to create an impression of balance and stability.

In this and forthcoming future posts, we will give an overview of common Gestalt Laws, their possible effects, and present examples of how exactly different laws work in the context of a website. Let’s start with two very simple but effective Gestalt Laws, the Law of Proximity and the Law of Similarity.

Law of Proximity

The Law of Proximity indicates that elements that are near to each other tend to be perceived as a single unit. This can be very helpful for e.g. if you want to display two categories of elements on a web page of which each has more than one piece of content. You can easily group the pieces of one category by placing them closer to each other than the distance between the two categories. Figure 2 shows how this Gestalt Law is for e.g. used on the UX Booth website to group elements that belong together. Different distances between the elements give us the impression of three columns of which each contains one teaser for an article.

Figure 2 - Law of Proximity (http://www.uxbooth.com/)

Figure 2 - Law of Proximity (http://www.uxbooth.com/)

Law of Similarity

The Law of Similarity claims that elements that appear similar are perceived as one unit. So elements that have for e.g. the same color, shape, or other common characteristics, are perceived to be belonging together. This phenomenon can be very useful to group elements together that belong to one category. In Figure 3 you can see how CNN uses this Gestalt Law to present different topics within one news category as a unit.

Figure 3 - Law of Similarity (http://edition.cnn.com/video/#/video/tech/2011/02/18/sosa.clicked.in.tech.education.cnn)

Figure 3 - Law of Similarity (http://edition.cnn.com/video/#/video/tech/2011/02/18/sosa.clicked.in.tech.education.cnn)

For more information about these two Gestalt Laws discussed above, please click here.

3 comments

  1. Pingback: Gestalt Article! « MMSP125-Multimedia Content + Form

  2. Pingback: Usabilla Blog » Gestalt Laws: Using optical illusions to improve your web design (Part 2) » Usabilla Blog

  3. shutters hertfordshire

    Hi there very cool blog!! Man .. Beautiful .. Superb .. I’ll bookmark your website and take the feeds also¡KI’m happy to find a lot of useful info right here in the post, we’d like develop more techniques on this regard, thanks for sharing. . . . . .

Leave a Reply

Your email address will not be published. Required fields are marked *