Gestalt Laws: Optical illusions to improve your design (Part 2) Design

Gestalt Laws: Optical illusions to improve your design (Part 2)

In our previous post ‘Use Gestalt Laws to improve your UX, we gave a short introduction to Gestalt Laws and the first two laws in the principle, the Law of Proximity and the Law of Similarity.

In this post we would like to introduce a couple of other useful Gestalt Laws: the Law of Closure, the Law of Good Continuation, and the Law of Figure and Ground.

Figure 1 - Law of Closure


Law of Closure

The Law of Closure explains why elements are recognized even if they are incomplete or nonexistent. This is due to our previous experiences and prior knowledge about possible shapes and figures, thus mentally we can supplement missing parts of an element. Figure 2 shows how we used this law for our homepage. There is a white background with round corners that runs out towards the bottom of the page. Still, we do not perceive elements at the bottom of the page as falling apart, but we can imagine the content area continues.

Figure 2 - Law of Closure

Law of Good Continuation

The Law of Good Continuation can be applied to both the design aspect as well as the content aspect of elements. Eyes can easily and naturally follow elements that are arranged along a continuous line, those elements are therefore perceived as a unit. Further, elements that follow each other either logically or temporal, are perceived as unit as well. Figure 3 shows how Concept7 use the Law of Good Continuation on their website. They use a small arrow (at the right hand bottom) to lead the users sight.

Figure 3 – Law of Good Continuation

Law of Figure and Ground

The Law of Figure and Ground describes how we rather perceive a figure than the background which flows around it. There are several factors that might contribute to this phenomenon. First of all, a defined figure has a more salient appearance whereas a background does not stand out. Furthermore, if one object is placed on top of another, in this case, a figure is placed on a background, the impression of depth emerges and therefore the figure actually appears to lie on top of the background. Another reason that leads to this figure-ground assumption is that in case there is a border line between both objects, it is more likely interpreted to belong to the figure rather than the background. Figure 4 shows how we placed several logos on a colored background. Only the logos are perceived, not the shapes that results from placing the logo on the colored background.

Figure 4 – Law of Figure and Ground

For more information on the Gestalt Laws discussed above click here or check out the University of Vienna’s paper on usability engineering.

One comment

  1. Pingback: Usabilla Blog » Gestalt Laws – Part 3: Simplicity, Symmetry, and Experience » Usabilla Blog

Leave a Reply

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