Introduction

Do you ever find yourself at a loss for words?

Perhaps you said something like "could you bring me that thingamabob over there?"

If we don't know the right words, we fumble around talking about layouts with comments like "it's too loose" or "could you clean that up" or even "what were you trying to do?"

Many of our readers who have taken HFI's Science and Art of Effective Web and Application Design course have heard the principles of "gestalt" as applied to layout. As an HFI instructor I was very pleased and impressed when Phil Goddard updated this course in 2004 with a module on gestalt principles.

Recently, I found a 2002 paper that covered this topic in a systematic fashion.

The paper reminds us that indeed there IS a vocabulary for discussing layouts that are simple, compelling, and "naturally attractive".

Let's see how to talk about layout. Your professional vocabulary sets you apart and makes you a valuable expert on things no-one else knows.

First, we can say "naturally attractive" because Gestalt psychology was all about nature's design of the brain for visual perception.

Back in the 1930s perceptual psychologists asked the question, how does the untrained mind make visual sense of the jumble of colors, lines, and shapes that we see?

The Gestalt research showed that the mind seeks to see "wholeness" or the "Gestalt" (German: Gestalt – "essence or shape of an entity's complete form.")

From Wikipedia: "...the operational principle of Gestalt is that the brain is holistic, parallel, and analog, with self-organizing tendencies. The Gestalt effect is the form-generating capability of our senses, particularly with respect to the visual recognition of figures and whole forms instead of just a collection of simple lines and curves... The phrase 'The whole is greater than the sum of the parts' is often used when explaining Gestalt theory."

Our three authors, Chang, Dooley, and Tuvinen from Australia combed the Gestalt literature and found eleven Gestalt principles applicable to computer screen layouts. They applied the principles to a re-design of an educational application.

They had twelve participants rate the before/after layouts and got confirmation that the eleven Gestalt principles accomplished the job.

Let's see examples of each of their eleven laws of Gestalt from their instructional web site. Decide if you agree with their examples of the Laws of Gestalt.

Five laws of gestalt in the HFI module

The Quick Review summary handed out in the HFI design course shows five out of the eleven Gestalt laws presented by our three authors. Let's define them, below.

1. Law of Focal Point (Visual attributes that control focus)

The article points out that the focal point "catches the viewer's attention and persuades the viewer to follow the visual message further." For example, to capture your reader's attention, use one of the methods given in the HFI illustration above: "Visual attributes control focus".

Draw attention with something large, or irregular, or dark, or with a saturated color. Of course all of these "starter" shapes must stand out from the other elements on your page.

Our authors illustrated this law with a large scale graphic:

2. Law of Similarity

Both HFI and the authors cite the notion that "similar objects will be counted as the same group." In this example below, do you agree that viewers will feel all the circular controls are part of the same group? Instead of nine circles distracting attention, we see one group.

3. Law of Proximity

The authors state "items placed near each other appear to be a group." We see this in the HFI graphic above.

The illustration below shows circles around the elements that are grouped through the gestalt law of proximity. On the left, 14 menu items get perceived as "one" group. On the right, three pictures get perceived as "one" group, as well.

Such techniques simplify mental processing and fulfill the criterion of "processing fluency." See my December, 2009 UI Design Newsletter "User Experience" meets "Beauty is Truth, Truth is Beauty" for discussion of how gestalt principles support rapid assimilation of information.

4. Law of Common Region (Law of "Prägnanz ('Good Form')")

Simply put, "Good Form" arises from a collection of visual elements when the layout supports the feeling of "simplicity." HFI uses the phrase "Common Region" to describe one method of creating good form.

The German word for "good form" is "Prägnanz" – a word you might hear in graphic arts circles. When you want to impress your audience, and you won't embarrass yourself with faulty German pronunciation, see how it goes over. Be sure to define it, however.

In the illustration below, the brackets on both sides of the Lock button create a "good form" that triggers perception of the three circles as one unit. The mind simplifies the collection of three circles by perceiving the brackets as "enclosure". From there, we further process this as a single backward/forward "tool set".

5. Law of Connectedness ("Law of Unity/Harmony")

Another technique of grouping involves connecting the elements with some graphic element.The HFI illustration shows a line between items. The authors indicate that their Home Page associates the 6 menu links through the convention of two nearby curved lines.

In both cases, as the authors cite: "Unity implies that a congruity or arrangement exists among the elements in a design; they look as though they belong together, as though there is some visual connection beyond mere chance that has caused them to come together."

Testing the whole gestalt

In a sense, any time you conduct a usability test, you get feedback on how well your design captures these Laws of Gestalt.

Can users find the right navigational options? Well, they are trying to obey the Law of Simplicity by looking where they expect navigation to appear.

Did you predict those expectations?

1. You might have predicted where people look by following "best practices" emulated by other sites in your genre. (Law of Isomorphic Correspondence)
   
2. Your design standards could maintain consistent places to look for navigation. The standard would have specified top level, second level, tertiary level, etc. navigation practices. (Law of Figure-Ground, Law of Continuation)
   
3. Within these standards you could have supported user expectation with proximity of content elements – content gets grouped. (Laws of Proximity, Similarity, Closure)
   
4. You could create focal points for navigation. HFI suggests that "dark areas" can support drawing attention to navigational areas at the top or left side of your layout. (Law of Focal Point)

Let us know how your updated, Gestalt-enriched vocabulary works for you.

And, remember, don't say Prägnanz unless you practice the pronunciation and get the Gestalt of it all.

In some cases "thingamabob" might be just the right thing to say.

Reader comments