Connecting elements visually
The gestalt principles are ways in which most humans perceive patterns. Following the gestalt principles will not by themselves make a design aesthetically pleasing, but they will help make the design easier to understand.
A hypothetical design could have 20 different elements arranged in a five by four grid. If some of the columns or rows belong together, the designer may wish to group these together in some way.
An evenly spaced set of five by four elements. None of these elements appear grouped with anything other than themselves.
The gestalt principles offer several approaches to visually connecting these elements. Some of these approaches are:
- Arrange elements in a line (Continuity).
- Place elements within partially delimited figures (Closure).
- Create boxes around the elements (Common region).
- Make elements the same same shape or color (Similarity).
- Move elements close together (Proximity).
- Make a single elements stand out (Focal point).
- Differentiate them from the background (Figure-Ground).
- Make elements flow or move in the same direction (Common Fate).
Examples of gestalt principles
Continuity
The eyes are generally drawn along lines, whether straight or curved.
Even when a line is interrupted, in this case by a change in color, most people will still see this as two straight lines, rather than two bent ones.
Continuity is one of the weaker of the gestalt principles. As can be seen in this example, the illusion starts to break when the lines are made solid, the bend less abrupt, and the colors more different.
Closure
Figures that are partially hinted at, even in the negative space as these two rectangles, will still be seen clearly.
Common region
Common region can be seen as taking closure to its extreme.
Boxes such as these is a very effective method, but can also easily appear primitive and garish. Most of the time, finesse is preferable to a sledgehammer.
An alternative to borders is to use colored fields. This is often more visually pleasing.
Fields of colors are frequently used on political maps, where different colors are used for different countries. The method of using common region on maps is by no means new, as seen on this map of Europe from 1795.
Similarity
Elements that are similar shapes, such as these alternating columns of circles and squares, will be perceived as being grouped.
Similarly is often a much more visually appealing, and still very effective, approach.
Similarity can also be achieved using color, such as these alternating rows of blue and red circles, will be perceived as being grouped.
Proximity
Elements that are closer together, such as these two sets of closely-spaced rows of circles, will be perceived as being grouped.
Proximity is very subtle, but can still be used to great effect.
Using and combining gestalt principles
Some methods are stronger than others. When seen from afar, colors will be just a clear as up close, while shapes and closeness will become blurry. Combining the principles can, however, lead to confusion.
In combining the columns of circles and squares with the rows of blue and red elements, most people will see groups of colors first and groups of shapes second. When viewed for a while, the groupings may start to spontaneously alternate between columns and rows.
Bear in mind that some people have color vision deficiencies. Most people with color vision deficiencies will be able to tell red apart from blue, but red and green will for example look the same to many people.
Using shape and color can be difficult in many practical situations. Having many different shapes and colors can make a design look cartoonish. Instead of using contrasting colors, much of the same effect can be achieved by using subtle shades of one color. Bear in mind, however, that too similar colors can easily be missed by those with poor eyesight.
Instead of using blue and red to create grouped rows of circles, light and medium shades of blue can be used to create an more subtle effect.
This effect is almost as effective as colors, and does not discriminate against those with color vision deficiencies. The disadvantage is that people with poor eye sight may be be able to see subtle differences in color value and saturation.
In order to create a uniform design, the preferred method of grouping elements on a screen is often by proximity. The disadvantage of this is that proximity is by definition relative; in order for two elements to be close to one another, they must necessarily be further apart from other elements.
Because screen real estate is always in high demand, this can be difficult to achieve. In these cases, closure can be used in a more subtle way to support proximity.
Adding small lines between closely-packed elements allow for more efficient usage of space while maintaining clear groups. This method is frequently used in compact software menus, such as in Microsoft Office.
Gestalt principles in action
This screenshot of Wikipedia shows several instances of the gestalt principles in action.
- The left-side navigation elements are separated from the main contents, using common region. The different types of navigation is next to each other, using proximity. They are also similar to each other, using similarity.
- The tabs at the top of the page are styled the same way, using similarity. They are also grouped in two distinct sections by the space between then, using proximity.
- The user account information is located in a single group in the top-right corner, using proximity.
- The information intended for new users is placed in a single box, using common region.
- The headlines are styled in the same way, using similarity.
- The two columns are but in boxes, using common region, and have similar styling, using similarity. Similarity is also used internally in each of the two columns with different color themes to differentiate the two.
In addition to these rules, much of Wikipedia’s layout is similar across all of its pages, allowing users to quickly become familiar with where to find different elements.
