Using Gestalt Psychology in Web Design (script for tutorial movie)

Graphic Design: 5 Simple Principles of Perception
(Using Gestalt Psychology in Graphic Design)

(I created over 100 e-learning movies for MediaBistro / Graphics.com over a two year period from 2008-1010. Following is the script for the six movies for one project. I have included some graphics that were in the original movies.)


Introduction
286 words

I studied at three universities, clocked in five years of art education, and graduated from one of the most renowned art schools in the world when I finally discovered the principles that underlie all visual perception in a class I took on illustration.

I liked Roy Behrens’ class so much I took it twice. Professor Behrens came to class wearing a camouflage tie. As he explained the principles of Gestalt psychology, I realized that what he was putting in words was what I had subconsciously used in my art.  Understanding these principles gained me a set of tools that made my life easier. My work in all fields – design, illustration, art, and writing — became very streamlined and fast.

Gestalt is a term which means “unified whole.” It refers to theories of visual perception developed by German psychologists in the 1920s. These theories describe the way people see and understand visual input, which is directly applicable to all forms of design. When a design is successful, the viewer perceives it as a cohesive whole. It becomes more than the sum of its parts. By understanding and applying gestalt theory to your work, you can achieve the same effect – no matter the limitations of the project.

I’m sure that you will have a few “aha” moments as you discover, as I did, that you have been using these ideas subconsciously for a while already. Or, if you already know Gestalt, you are in for a refreshing review of inspirational samples applied to web design.

Come with me on the following tutorial as we explore the psychological underpinnings of visual design, and show how we can employ each principle to create stunning and effective visual design.


Movie 1: Similarity
611 words

1-0 definition

Gestalt psychology (German: Gestalt – “essence or shape of an entity’s complete form”) is a theory of mind and brain that says that the brain organizes bits of data into groups, families, and wholes. Essentially, Gestalt psychology is based on the idea that humans naturally perceive information in terms of the relationships between bits of data. Visual composition or design is based on the same criteria. Rather than seeing each part, we read wholes. Gestalt says that “the whole is more than the sum of its parts.”

1-1 < show group of elements grouped by shape, by color, by texture >

All visual design relies on the balance between two principles:

Unity, a structure of similar objects, usually perceived as background, which allows comprehension of the foreground, and provides a visual rest for the eyes and brain
Variety, an object, usually an accent or foreground element which generates interest

A good, successful design – one that communicates – is one that simply balances these two essential elements. A design with too much structure is boring, a design with too much interest is confusing and chaotic. However, to really understand how to design great work requires an understanding of the psychology of visual perception.

Let’s discuss the first pillar of design: unity. This correlates to the Gestalt term: similarity.

Things that are similar are perceived to be more related than things that are dissimilar. Even if objects are not close or the same size, if something about them is similar, such as the shape, orientation, texture, font, or color, the viewer will group them together.

http://www.hoverkraft.nl/

The work section in the Hoverkraft site shows an online sample of how similar elements get grouped together by the mind.

1-2 < back to my graphics 1-3 show one square in different color >

If we make one of the squares red, it appears as dissimilar and appears to jump out of its group. By nature, our minds are geared to notice whatever is different. Designers can use this tendency to great advantage, as long as they remember to provide a large amount of supportive unity. The dissimilar element serves as the accent on a neutral background of unified objects.

1-4 < show changes to object >

We can make this object appear even more active by changing its shape or popping it out of the grid.

http://www.slabovia.tv/

Even if objects are separated by distance, using something like a similar color or shape will draw them together in the viewer’s mind into the same family. This speeds up comprehension. Look at the header on The Potato; look how similar the color and treatment is to the subheads way down on the page.

http://www.zakochajsiewkolorze.pl/#/zakonczenieKonkursu/

The photos on this page are grouped by a similar treatment: they share the same shape, color border, and glow treatment. They belong to the same family in the mind of the viewer because of the way they are treated by the designer. This is an intentional message by the designer that draws the attention of the viewer to the focal part of this page: the photos of the women.

1-5 <500px-Grid.png>

One of the most unifying tools of a graphic designer is the grid. A grid is a way to visually organize information on a page.

http://www.madebyshape.co.uk/

Here is a simple 4 column grid in use. Notice how the grid serves to ground the design by providing a unified, structure of blocks of text. The picture above spans the 4 column grid.

One thing that you don’t see a lot of in web design, primarily because of the coding restraints, is the attention-grabbing element that violates the grid. This site establishes a standard column layout. The Live CD diagonal pushes out of the grid and shouts that you notice it first. This wouldn’t work at all if the unifying aspect of the grid were not established first. The Live CD element is the dissimilar element that calls for our attention.

The discussion of similarity brings us naturally to another great design mainstay: the use of figure/ground. Come with me as we explore how we can easily direct the attention of the viewer to any element we choose on a page using the figure/ground design theory.


Movie 2: Figure/Ground
621 words

2-0 definition

2-1 < 800px-Tizian_029.jpg >

When I teach design students, I often refer to the foreground, middle ground, and background. This initially came from my experience as an artist, but I have found that all design has implied distance in the way the elements are read.

Gestalt refers to this as figure/ground, a simple idea of what is the point of attention – the figure – and what is the ground or background behind, or supporting the figure. Painters have been using this idea for centuries. Look at this painting by Caravaggio: see how the figures stand out against the dark background.

2-2 Caravaggio-La_vocazione_di_San_Matteo.jpg

Our eyes are designed to discern a figure from its surrounding area: a form, silhouette or shape is naturally perceived as figure – the object — while the surrounding area is perceived as ground – the background. Generally, the background is larger, and the figure is smaller, on top, or in front of it.

http://blog.huffandstapes.com/

The Huff and Tapes site uses similarity to establish a unified structure that serves as a background for the elements the designer wants you to notice. The background is a grid paper in cream with subtle grey lines.

In the Huff and Tapes site, the cream gird paper serves as a bland, highly structured ground for the orange nav, the orange title, and little birds, are perceived as the figures – or noticeable objects on the ground. These objects draw your attention.

http://www.vbg.si/

Display fonts are perceived as figure, while body copy is often perceived as ground. In the VBG site the display font of the title pops into the foreground as the figure while the body copy hugs the grid in light grey and forms the ground.

Classically-trained graphic designers use a grid when they design. The grid is an organizing device that is implied and sometimes shown.

http://coudal.com/

Another site that uses a grid and body copy as ground and the display font title as figure is Coudal Partners.

Remember that the whole point of providing a grid is to enable communication by providing a structure – a background upon which to put your point of focus. The ground or grid represents the unity factor, while the figure represents the variety factor, or where you are deliberately directing the attention of the viewer.

2-3 gestalt-area.png

In the figure on the left, the small square is seen as a figure on the ground of the lighter square. It is hard for us to see the same thing with the figure on the right: the viewer expects a figure to be darker than the surrounding ground, therefore the mind wants to make the large dark square the figure, and the small square becomes a window inside the lighter square.

Another Gestalt idea often used in logo design is called Multistability. Multistable perception is the tendency of ambiguous perceptual experiences to pop back and forth unstably between two or more alternative interpretations.

2-4 Necker cube Figure/vase

This is seen for example in the Necker cube, and in Rubin’s Figure/Vase illusion shown here. Gestalt does not explain how images appear multistable, only that they do.

2-5 lion-bird-logo.png

The lion-bird logo by Nashifan on Brandstack.com shows two images in one.

In general, a web page shouldn’t use a Multistable object unless it is restrained to the logo. The reason is that this kind of design causes a subconscious stress in the viewer as his brain tries to permanently resolve the image; this stress will make him want to leave the site.

2-6 Push bottle logo

This logo by Gustav on Brandstack shows two images as well.

Figure / Ground is a great lead-in to the next principle that is behind many successful logos and websites. Follow me as we explore the many implications in attempting to find Closure.


Movie 3: Closure
602 words

3-0 definition

3-1 closure-logo.jpg

“Closure” is one of the most meaningful and useful Gestalt terms for graphic designers. In essence, a viewer will close any implied connections between seemingly related parts of an implied whole. In this picture, most people will understand that the shapes here are a circle and square, even though they are missing substantial parts of their lines.

3-2 < logo samples WWF, Playboy, IBM, NBC peacock>

This trick has been a mainstay in logo design for a number of years; viewers are more intrigued by an image when they have to use their imagination to provide the whole design.

The panda bear in the World Wide Fund logo is imagined by closing the black lines; the image is not complete. The bow tie on the Playboy bunny is implied only. Our mind closes the empty white lines on the IBM logo to read the letters. The peacock can be seen on top of the multicolored feathers on the NBC logo.

http://spacecollective.org/gallery/

One could say that any implied grid layout is an example of closure – the viewer fills in the vertical lines of the grid, connecting the lines here in the flush left text boxes and photos to fill the grid.

Our brain takes the input of our senses and naturally arranges the parts into a natural whole, drawing the easiest conclusion from sometimes overwhelming data. We do this so naturally and instantly, that we often forget that there may be more than one conclusion to draw from any given set of data.

This instant holistic conclusion is sometimes referred to as the “The Gestalt effect” — it refers to our mind’s ability to recognize whole forms instead of just a collection of elements.

One could say that Gestalt psychology is the reason visual design works – when it does. When one violates the “rules” of Gestalt, we can get an unintended result, such as a blooper or unintended visual joke. Those who don’t know the rules of visual perception are more bound to violate them and create bad, or less effective, design.

3-3

Closure is the constructive or generative aspect of perception, by which the conclusion drawn by the viewer contains more information than the image on which it is based.

For instance, a triangle will be perceived in picture A, although no triangle has actually been drawn. In pictures B and D the eye will recognize disparate shapes as “belonging” to a single shape, in C a complete three-dimensional shape is seen, where in actuality no such thing is drawn.

3-4 < Kanizsa-triangle.jpg>

This is also called “Illusory contours,” a form of visual illusion where the contours are perceived by the imagination of the viewer. A classic example of illusory contours is the Kanizsa triangle. This figure shows three black circles with wedges cut out of them, and three black angles on a white background.

However, do you see the other two triangles? Which is on top and what color is it? The white triangle appears brighter than the white background and shows a contour even in regions where there is no luminance change in the image.

3-2 < logo samples WWF, Playboy, IBM, NBC peacock>

Never underestimate the power of closure; by inviting the viewer to draw her own conclusions, you attract her imagination and sustain her interest.

Closure is a powerful tool in the hands of the savvy designer. Join me for the next movie as we explore a simple technique that you can use to unify your design, and make your work communicate more effectively.


Movie 4: Proximity
508 words

4-0 definition

One key underlying principle underlying all Gestalt is that the mind if given a choice between an easy assumption or a more complex solution, will always choose the simplest, most common conclusion.

4-1 < show squares disparate and united >

Proximity is probably the easiest and most natural way for us to achieve relatedness in design. The squares in the picture on the left appear as separate from each other. If we bring them together, our mind naturally tends to group them together. This is one easy way to unify objects – by proximity. However, these squares are united by shape, size, and color as well.

4-2 metromobile-logo-logopond.png

The MetroMobile logo by William of LogoPond.com is an example of grouping by proximity. The phones are grouped together, and so are the buildings they represent.

http://www.nalden.net/

Nalden groups the bottom nav elements by proximity. This is one of the most common uses of proximity in web design.

http://mesonprojekt.com/

While Nalden also grouped by similarity, this site relies mostly on proximity to relate the nav elements to one another.

http://be-baboo.com/

Be Bamboo uses photos placed in proximity to one another to construct a single nav bar out of dissimilar lamps.

http://www.segalwines.co.il/

Segal Wines uses a surrealist trick called “an arranged marriage” to unify the logo font with the image. Basically, an arranged marriage is a forced grouping of two or more objects into a visual union. The mind of the viewer is forced to draw a conclusion as to why the two objects are together. The reason why this visual trick works so well is that the designer invites the inquiry of the viewer and engages their imagination in a subliminal way. The viewer is intrigued and will stay longer on the image, trying to find a rationale for the relationship.

4-3 Pisa tower illusion.jpg

Here is an example of using proximity deliberately to make a visual joke. We all know that the man is not the height of the tower, but the flatness of the photo plus the Gestalt principle of proximity makes it seem as if he can push the tower over with his foot.

Proximity is one of the easiest ways to relate elements in the design to one another. Come with me in the next movie as we explore one of the most effective tools that visual artists have ever used and one with the oldest historical antecedents.


Movie 5: Continuation
652 words

5-0 definition

5-1 V&A Logo

Continuation occurs when the eye is drawn by a line, edge or direction from one area to another. In art we say that a good composition is made when the artist leads the eye of the viewer through the canvas, maintaining interest and keeping the eye in the composition.

Continuation is often used in books and websites to tie the elements of a page together with the use of rules and by lining up edges of copy, headlines, and graphics. However, continuation is not limited to the use of straight lines, edges or shapes.

http://www.loodo.com.br/

Notice how the curved line in this nav bar attracts your attention. A curved line is even more interesting than a straight line, especially if it is different from the other elements on the page – remember the principle of similarity and the balance between unity and variety discussed earlier? The main part of this page is based upon a 4 column grid with a large margin on the left.

5-2

There are three types of lines, all with varying degrees of activity or viewer interest. Horizontal lines are like sleeping people – not very interesting, however, like the horizon line, a horizontal line can ground other elements in a composition.

A vertical line, like a standing person, is more interesting, but not very active.

5-3

Like the immobile guards at London’s Buckingham Palace, a vertical line is attentive, but not active.

http://www.folieadeux.com/fad/index.html

Notice how this wine site has used subtle dotted horizontal and vertical lines to delineate the areas of the composition.

A diagonal line is a very active line. Like an arrow or finger, the diagonal line naturally draws the attention of the viewer. The diagonal line, especially when grounded by a horizontal line or grid of horizontal and vertical lines, seems like it is on its way somewhere.

5-4

Think of the leaning tower of Pisa: why does it attract our attention? Because we are seeing it fall, want it to fall. A diagonal line is active: it creates a story or a tension in our minds.

5-5

As an artist, I studied how to lead the eye through the painting and keep the attention of the viewer: this has been achieved in visual art in various ways for centuries. The discovery of Italian perspective was a breakthrough in visual communication.

5-6

The converging lines in this painting draw the eye towards the center of this painting.

http://www.meslaimesim.lt/city.html

Here’s a modern example of the same trick.

5-7

Check out how Leonardo da Vinci used arrows, eye direction, and lines to direct the eye of the viewer around the composition and, most importantly to convey a subliminal conclusion.

5-8 show continuity lines

http://www.quintezzense.de/

A modern example of the same kind of continuity: the four figures on this page point at or look at each other, leading the viewer’s eye from figure to figure.

5-8 continuity-logos.jpg

This last is one of the most important, misunderstood, and undervalued benefits of great design – a good handling of continuation draws the eye and attention of the viewer to reach a subliminal conclusion that the designer desires.

http://www.mwp-online.de/

Modern Web Projects uses an illustration of a vine with a scrolling vertical page to lead the user to the examples of their projects. You could call this a literal use of the idea of continuity.

Well, that’s it for our romp through the minds of Gestalt psychologists. Any designer can be a more effective visual communicator with a solid appreciation for the power of these psychological tools. Whenever I analyze great design, I can find these principles underlying the layout; understanding design from the standpoint of Gestalt can be a real eye-opener. Next time you see great design, see if you can see how it does or doesn’t employ these principles. Let me know your ideas, you know how to contact me.

Leave a Reply