The world is a chaotic, unpredictable place—and our brains have developed incredible adaptations to handle it. Instead of actually processing every detail, we quickly and automatically create connections and placeholders that work to estimate the reality before us. The process is incredibly efficient but not perfect—something that becomes obvious when looking at an optical illusion.
This idea was first noticed and developed by a group of German psychologists known as the Gestalt—meaning shape or form—school. They argued that the brain forms it’s own image, or gestalt, and the whole of this perception operates independently of its parts. Kurt Koffka, a Gestalt psychologist, famously summarized this idea by explaining, “The whole is other than the sum of the parts.”
Websites, too, are unpredictable and as a result, our brains use many of the same techniques to allow us to quickly navigate unfamiliar pages and process new information. When designs and layouts reflect these techniques, navigating them feels effortless. When designs conflict with these techniques, they become frustrating and even impossible to use.
There’s a strong tendency to associate objects, images, or elements close to one another as members of the same group. This relationship is illustrated above. Instead of seeing a single group of circles, it is more common to see one large group and three smaller groups.
What this means for testing: The association of adjacent objects, images, and messages is critically important for testing. Placing social proof like a high star rating, for example, near a purchase CTA can increase the perceived relationship between purchase and satisfaction.
Like proximity, the principle of similarity describes a tendency to group objects. In this case, those that share an obvious quality are understood to be related. In the illustration above, most people will perceive the rows of blue circles and rows of green circles to represent two distinct groups.
What this means for testing: Color is a powerful tool for building relationships across a page. Using the same orange color for a headline and a CTA, for example, implies a strong link between the two. Shape can also emphasize similarity or difference.
The figure-ground principle describes the relationship between positive and negative space in an image. The perception, in this case, is that an element is either a point of focus (the figure) or part of the background (the ground). This is illustrated above by the white and blue squares—in this case the smaller figure takes focus regardless of the color of the background.
What this means for testing: The relationship between figure and ground is critical for creating a hierarchy and guiding the eye path of the user. Ensure the most important messages and page elements take the role of “figure” and don’t sink into the background. Anyone who has experimented with a trendy “flat” design understands this challenge.
Our brains like symmetry and will work hard to find it even when doing so is not the most obvious means of understanding an image. The illustration above demonstrates this. Most people will see two sets of parentheses, one on either side of a set of braces, even though proximity would suggest the brackets should be grouped differently.
What this means for testing: Again, elements that exhibit symmetry will attract the eye and increase the attention they receive. This can be created by placing similar elements on either side of an important message or balancing one important element with a similarly shaped or sized one adjacent. Symmetry can also be intentionally broken to draw attention—a difficult technique that will work best when the page composition as a whole is very regular and symmetrical.
5. Common Fate
This oddly named principle simply describes a tendency to link objects moving (or suggested to be moving) in the same direction with one another. The example above doesn’t explicitly show movement, but movement is implied through both shadow and text. In this case, the illustration is contra to the principle of common fate—the shadows leading from different directions imply the buttons actually move toward one another and against the direction implied by their respective labels.
What this means for testing: The common fate principle is particularly relevant to the design of navigation. Movement in navigation is implied through styles like italic text and alignment. Animations, which are increasingly used to draw attention to navigation elements can also emphasize common fate movement—or create contradictions.
The principle of closure is based on the idea that it is not the quantity of information but the quality that leads to understanding. In the illustration above, most people will see a white triangle. Perceived literally, however, it’s really an illustration of three Pac Man-like circles.
What this means for testing: The tendency to complete shapes can be used to drive action in a specific direction. Elements that are cut at the line of the page fold, for example, are completed in the mind and also communicate the content of the page continues.
Of course, there is much more depth to each one—and many supporting concepts as well. For a more complete discussion, this talk from Jeff Johnson is a great place to start:
These six Gestalt principles are well known and commonly used by experienced graphic designers but understanding the concepts is helpful for anyone looking for test ideas that could improve the design or user experience of a website.