(Gestalt.doc)

Gestalt principles for document design 1. Perception is an active process (304)

2. People organize what they see into figure and ground (306)

3. How people group figures depends on the visual properties of the figures (309)

4. How people group figures depends on “good continuation” (313)

5. How a figure looks depends on its surroundings (315)

6. Strong figures are stable (316)

7. The reader may add a dimension: 2-D to 3-D (320)

1. Perception is an active process (304) – we attempt to organize what we see

We immediately classify items from the screen into text and graphics, and within each of those classifications, we attempt to identify links.

We impose some organizational scheme on the page; for example, in part based on continuation, or the lack of continuation, we may think of the page as 3 columns or 2 columns of text. We also may make guesses about the presence of or lack of material (e.g., navigational links) below the available viewing area of the page.

Note the relative flat structure of the MSU home page; all links appear to be equal. Compare our home page to UW-Madison’s home page, where position, size, color, and proximity to graphics are all important clues to structure or function.

Remember that people create structure.

2. People organize what they see into figure and ground (306) — the figure is the focus of attention

Note that the highlighting/boxing of text here also supports the third principle—that people group figures depending upon visual properties of the figures. The differing placement of the highlighted links does interfere with continuation—the fourth principle.

The home page for the English Department provides a relatively clear use of text as background, as well as a graphic for background. In this instance, the graphic is used as an image map.

3. How people group figures depends on the visual properties of the figures (309)

Again, consult the University of Wisconsin-Madison pages to observe examples where size, shape color, contrast, or connecting cues are used to group links or information.

4. How people group figures depends on “good continuation” (313)

Compare the following sequences of pages from the Business College and from Athletics.

5. How a figure looks depends on its surroundings (315)

Imagine a man dressed in a suit and tie. Place the man in a classroom setting and he appears very formal—perhaps overdressed. Place the same man in a social gathering where other men are dressed in tuxedos, and that same man who once appeared overdressed is now underdressed (or inappropriately dressed); in both cases he will call attention to himself. Place him in a room of men who are all dressed in suits, and the man is no longer remarkable (unless you’ve dressed him like Austin Power or in some other remarkable manner) and no longer a center or focus of attention.

6. Strong figures are stable (316)

Strong figures are less influenced by other figures than are weak figures. Strong figures stand out—are noticeable.

7. The reader may add a dimension: 2-D to 3-D (320)

Notice the effects of the 3-D image and figure/ground changes on the readability/usability of the Mathematics and Statistics home page. (The white background emphasizes the graphic, but the light purple background provides much less contrast for the dark purple type. The type, of course, would contrast much better with a white background.)