How are Gestalt principles used in Graphic Design or UI ?

Early in twentieth century a group of German psychologists sought to explain how human visual perception works. One of their basic findings was that human vision is that our visual system automatically imposes structure on visual input and is wired to perceive whole shapes, figures, and objects rather than disconnected edges, lines and areas.

The German word for “shape” or “figure” is Gestalt, so these theories became known as the Gestalt principles of visual perception.

Introducing Gestalt principles to describe human visual perception. For present purposes, , the most important Gestalt principles are Proximity, Similarity, Continuity, Closure, Symmetry, Figure/Ground, and Common Fate.

The following sections describe each principle and provide examples from both static graphic design and user-interface design.

Gestalt Principle:  Proximity

Proximity is that the relative distance between objects in a display affects our perception of how the objects are organized into subgroups. Objects that are near each other appear grouped, while those that are farther apart do not.

The proximity principle  has obvious relevance to the layout of control panels or data forms in software, Web sites, and electronic appliances. Designers often separate groups of on-screen controls and data displays by enclosing them in group boxes or by placing separator lines between the groups. Many graphic design experts recommend this approach to reduce visual clutter and code size in a user interface.


On the opposite hand, if controls are poorly spaced people will have trouble perceiving them as related, making the software harder to learn and remember. For example, the Discreet Software Installer displays six horizontal pairs of radio buttons, each representing two-way choice, but their spacing, make them appear to be two vertical sets of radio buttons, each representing a six-way choice, at least until the user try them and learn how to operate the software.


Gestalt Principle: Similarity

Similarity, where objects that look similar appear grouped, all the other things being equal.

The Page Setup dialog box in Mac OS applications uses the Similarity and Proximity principles to group the orientation settings. The three very similar and tightly spaced orientation settings are intended to appear grouped. The three menus are not too far apart but look similar enough that they appear related.


Gestalt Principle: Continuity

Several Gestalt principles describes our visual system’s tendency to resolve ambiguity or fill in missing data. The first such principle, the principle Continuity states that our visual perception is biased to perceive continuous forms rather than disconnected segments.

For example, A, we continually see two crossing lines – one blue, one orange. We don’t see two separate orange segments and two separate blue ones, and we don’t see a v on top and v on the bottom.  B, we see a snake, not three pieces of one.


A good example using the principle of continuity in  graphic design is the IBM logo. It consists of disconnected blue patches, and yet is not ambiguous; it is easily seen as three bold letters.


Gestalt Principle: Closure

Related to continuity, the principle of closure states that our visual system automatically tries to close open figures so that they are perceived as whole objects rather than separate pieces.


This principle is often applied in graphical user interfaces (GUI). For example, GUIs often represent collections of objects (e.g, documents or messages) just showing one whole object and the edges of others “behind” it is enough to make users perceive a stack of objects, all whole.


Gestalt Principle: Symmetry

We tend to parse complex scenes in a way that reduces the complexity. The data in our visual field usually tries to resolve complex scenes into combinations of simple symmetrical shapes.

For example, we see the shape as two overlapping diamonds and not as two touching corner bricks or an octahedron with a square in the middle because the overlapping diamonds are simpler than the other interpretations.


In printed graphics and on computer screens, our visual system’s reliance on the symmetry principle can be exploited to represent a  three-dimensional objects on a two-dimensional display.


Gestalt Principle: Figure/Ground

This principle states that our mind separates the visual field into the figure (the foreground) and ground (the background). The foreground consists of the elements of a scene that are the object of our primary attention, and the background is everything else.

In user interface and Web design, this principle is used to place an impression-inducing background the primary display content. The background can convey information (e.g location) or it can suggest a theme, brand or mood for the interpretation of the content or as a pop-out a call to action “over” the page content.


Gestalt Principle: Common Fate

This principle concerns to moving objects. Common motion – implying common fates – is used in some animations to show relationships between entities. For example, this graph animate dots representing changes over time.


Gestalt Principle: Combined

Finally, in real world visual scenes, the Gestalt principles work in groupings, not in isolation. For example, a typical Mac Os Desktop exemplifies six of the seven principles, except for common fate.  When the user selects several files or folders and drags them as a group to a new location.


All these Gestalt principles operating at once, unintended visual relationships can be applied in design. A recommended practice, after designing a display, is to view it with all the Gestalt principles in mind to see if the design suggests any relationship between elements that you do not intend.