As a web designer, you often unknowingly break four important laws, leading to immeasurable losses of users and viewers. These principles, known as the Gestalt Laws of Grouping, should guide designers to achieve successful metrics, yet there are crimes against these laws littered across the web.
The Gestalt Laws originate from gestalt psychology, which addresses how humans perceive and make sense of our chaotic world. The laws account for how people understand objects and their relations to other objects.
Law of Grouping by Proximity
People view objects that are close together as being related to each other. For example, each half of the image below has 36 circles.
People perceive the left side to be one large group of circles, whereas they perceive the right half to be three individual columns of circles. This is because the columns are spaced further apart horizontally than the circles are spaced vertically. You’re breaking this law if you put things that shouldn’t be grouped together way too close, or you put things that should be grouped together too far apart.
Law of Grouping by Similarity
People view objects that are similar as being related to each other, regardless of whether that similarity is in color, shape, size, or another visual quality. In the image below, people perceive six rows of circles with the rows alternating between black and white. The color of the circles unites them as a group.
People do not perceive the image as six columns made up of color-alternating circles because they are dissimilar and it makes more sense to interpret the circles as rows. You might be breaking this law if you often have things that should be grouped together look either too dissimilar or too similar.
Law of Closure
Even if a shape is not complete, humans can still perceive it as intact. In this image, humans perceive a circle and a rectangle, even though both have broken lines and are not entirely enclosed.
Human brains perceive the remainder of the shape based on the visual clues that already exist. The circle is made up of curved lines, so it makes sense that the missing lines would follow the same pattern to create a complete circle. This law is less something that people break, but more of a tool that people do not fully utilize.
An example of the Law of Closure is the logo of Apache Solr, an open source project run by the Apache Foundation. Though the colored segments are not fully enclosed, and the negative space between them creates rays, people can perceive the image to be a complete image of a sun.
Law of Good Continuity
Our visual systems understand depth and overlapping, not only in our 3D world, but also when making sense of 2D images. Our brains make the assumption that even though we may not be able to see all of an object because it is obscured by another, it still probably exists behind the other and continues to follow the established pattern. Humans interpret this image to be two keys, one of which overlaps the other.
We don’t imagine that it is made up of three separate pieces: one full key, one key loop, and one set of key teeth. Humans understand that objects continue to exist behind others, even if they are not visible. This law is also more of a tool that people do not fully utilize. Overlapping objects creates visual interest and depth without creating something overly complex.
Linode's logo is a great example of good continuity. Some of the cubes overlap part of the others, yet we still perceive there to be five complete cubes, not one cube and some other weird shapes underneath.
Getting the Laws on Your Side
Now that you’re an informed citizen of the Gestalt laws, it’s your job to uphold them! Understanding these laws will help organize your website visually and improve visit duration. When your website is easier to visually understand, visitors will want to stay there longer!