In the early 20th century, the advancement of science enabled researchers to expand beyond the traditional venues into new areas of study — like, for example, how we perceive visual stimuli versus what is actually present and seen. This was the school of Gestalt (Gestalt is the German word for shape or form), a psychological study of sight initiated in 1910 by Max Wertheimer and developed over the next few decades by his colleagues.

The Gestalt findings are most famously seen in the optical illusions we know from childhood, but the implications of this science are much farther reaching. The principles that govern these optical illusions hold the power to manipulate our visual perceptions, and as such make a powerful tool for any web designer.

Before we get into the Gestalt principles apply most strongly to web UI design, it helps to provide some background into how the principles function. The research of Wertheimer and his successors isolated these four properties that govern the greater body of the Gestalt principles.

1. Emergence — When identifying objects by sight, our brains first match their outlines to more familiar ones we already know. Once the outline “emerges,” we then move on to finer details. See how in this image, from an ocean of spots, the dalmatian emerges?

2. Reification — Because we so often see things only partially, our brains have developed a mechanism to “fill in the blanks” so to speak. In reality, there is no triangle below, but our brains see one regardless.

3. Invariance — This is a similar property as reification, but with varying perspectives instead of partiality. Our brains recognize objects’ similarities despite differences in perspective, rotation, scale, or even slight deformations.

4. Multistability — If contrasting interpretations of an object exist, the mind will alternate between the two, but is incapable of seeing both at the same time. The longer you focus on one interpretation, the more dominant it becomes.

These properties alone could have a tremendous effect on your visual design — for example, emergence shows us that if the shapes of our interface objects are straightforward, we can experiment more with the other details (like colors and gradients), opening up new doors for design strategies.

While there is no one definitive list of all Gestalt principles, in 1954, Rudolf Arnheim compiled the most important ones in the book Art and Visual Perception: A Psychology of the Creative Eye. Among them, designer Carolann Bonner suggests that five principles are actually the most practical for everyday design. From our experience, we definitely agree with her assessment.

Let’s take a look at the five practical principles below.

1. Similarity

Users perceive objects that look similar as having similar uses. As a means to communicate function in a quick and simple way, this principle’s use in web design is massive. By creating similar icons or structures, you’ll save a lot of time in explaining for both you and your user.

On the Self-Destructing Book site above, what happens when you click on the faces and what happens when you click on the numbers? The specifics don’t really matter, but you’re correct in assuming the same things happen with all the faces and all the numbers. Furthermore, the circles around both faces and numbers suggests that they are clickable, while the rest of the map is not.

As you’ll see in the next section, the strength of similarity in how things look goes beyond whether or not they’re close together.

2. Grouping

Following the same reasoning as similarity, grouping has the same effect with objects grouped together, even if they look different. As Bonner describes, there are at least two ways to effectively use grouping:

Enclosure — Adding a visible barrier like a box or circle to enclose elements will suggest they function similarly.

Enclosure is used for the entire post — title, photo, description, comments, etc. — to separate it from other similar posts above and below it. Within the post itself, commands such as “Like,” “Comment,” and “Share,” are all placed in close proximity to show they are all ways to interact with the post in (not to mention their related size, font, and color utilize the principle of similarity).

3. Closure

Closure applies the property of reification (mentioned above) where users “complete” objects in their heads if they are partially obscured.

They are able to make a visually stimulating image by strategically obscuring parts of the letters based on the runner. This image only works because our brains are able to fill in the missing parts of the letter so we can still read the message — as the designers of the site know full well. This image also utilizes the figure-ground relationship, another principle we’ll discuss later.

As strange as it sounds, a user’s eye creates a kind of momentum as it moves from object to object, and lines increase this effect. In the example below, most users will perceive one curved line and one straight line instead of a bent purple line and a bent green one.

The power of continuation supercedes even the power of color. The implication for web design is that elements in a row or a line will achieve a similarity, and so suggest similar functions. We see this applied everyday in navigation bars, both horizontal and vertical.

As you can see above, the Huncwot site is very linear. The placement of the different links is a prime example of a linear navigation menu. But the site also expertly plays on the artistic principles of lines in drawing our attention. Hovering over each of the four options triggers a background graphic to confirm the item is selected — and each graphic is composed of solid and dotted lines to draw attention to the title.

5. The Figure-Ground Relationship

Your users instinctively differentiate between objects in the foreground (figures) and those in the background (ground). According to Steven Bradley, designer and author of the fantastic book Design Fundamentals, there are 3 types of figure-ground relationships:

For starters, there’s no question that the beer bottle and the text headers are in the foreground while the wallpaper and the bar photo are the backgrounds. The foreground images are crisper and even colored in the case with the bottle, so there’s little competition with the background for our attention.

On another layer, the 3-column layout makes use of the reversible relationship — no one column dominates as the “main” focus, and our attention hops between all three, as the designers intended.

Conclusion

It’s no surprise that the psychology of sight is useful to a visceral field like web design.

But we’re just scratching the surface here. If this article peaked your interest, you can read more Gestalt and other similar sight sciences (and how they apply to everyday design) in our free ebooks, Web UI Design for the Human Eye, Book I and Book II.

Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter @jerrycao_uxpin

4 Comments

online purchase of clamoxyl

I’m amazed, I must say. Rarely do I encounter a blog that’s equally educative and
entertaining, and let me tell you, you’ve hit the nail on the head.
The issue is something too few people are speaking intelligently about.
I am very happy that I stumbled across this during my hunt for something relating to this.

Thank you for this article. I’m doing research on how integral the gestalt theory is to web design. This article is the clearest of 5 or 6 articles I’ve read. I’m going to get the ebooks. Thanks for offering them.

Each is designed by our faculty of tech professionals to guide even a coding beginner to becoming a job-ready software developer armed with a professional portfolio of real-world projects. Try one out today with our free seven-day trial, and see if software development is for you.