2/6/2003 Designing Visual Language-Chapter 2 1 Notes to Chapter Two English 308

2/6/2003 Designing Visual Language-Chapter 2 2 Perception and Design Perception and Thinking: We cannot ‘see’ without thinking about what we see The context of our seeing affects what we see We can exploit the Gestalt principles of figure-ground contrast and grouping to communicate more effectively

2/6/2003 Designing Visual Language-Chapter 2 3 Perception Requires Thinking Rudolf Arnheim shows how perception is much more than the physiological act of gathering in sensory material. According to Arnheim: We search for focal points We draw on past experience We use vision to complete the task at hand—and little more

2/6/2003 Designing Visual Language-Chapter 2 4 Focal Points Perception is active and intense—we work at it. When we don’t have something to focus on, perception breaks down.

2/6/2003 Designing Visual Language-Chapter 2 5

2/6/2003 Designing Visual Language-Chapter 2 6 Focal Points Because the pattern on the previous slide was monotonous, the eye could find no place to focus on. Compare the previous slide with the next one.

2/6/2003 Designing Visual Language-Chapter 2 7 There is a good deal of text on this slide, but not very much of it stands out. However, there is one piece of text that stands out and this despite the fact that only a very small icon serves to differentiate it from the rest of the text. In a sea of monotonous symbols, a single symbol can become a focal point. You might have noticed little about the text on this page, but you probably remembered the piece of text associated with the icon. Sunday was Groundhog’s Day. There is a good deal of text on this slide, but not very much of it stands out. However, there is one piece of text that stands out and this despite the fact that only a very small icon serves to differentiate it from the rest of the text. In a sea of monotonous symbols, a single symbol can become a focal point. You might have noticed little about the text on this page, but you probably remembered the piece of text associated with the icon.

2/6/2003 Designing Visual Language-Chapter 2 8 Focal Points Did you notice the text next to the focal point. Here’s the same slide again.

2/6/2003 Designing Visual Language-Chapter 2 9 There is a good deal of text on this slide, but not very much of it stands out. However, there is one piece of text that stands out and this despite the fact that only a very small icon serves to differentiate it from the rest of the text. In a sea of monotonous symbols, a single symbol can become a focal point. You might have noticed little about the text on this page, but you probably remembered the piece of text associated with the icon. Sunday was Groundhog’s Day. There is a good deal of text on this slide, but not very much of it stands out. However, there is one piece of text that stands out and this despite the fact that only a very small icon serves to differentiate it from the rest of the text. In a sea of monotonous symbols, a single symbol can become a focal point. You might have noticed little about the text on this page, but you probably remembered the piece of text associated with the icon.

2/6/2003 Designing Visual Language-Chapter 2 10 Past Experience The search for focal points is instantaneous. The comprehension of the what we see takes place, though, in time. Therefore, when given time we use our past experience to help us comprehend what we see.

2/6/2003 Designing Visual Language-Chapter 2 11 Experience: Example 1 What does this mean?

2/6/2003 Designing Visual Language-Chapter 2 12 Experience: Example 2 What does this mean?

2/6/2003 Designing Visual Language-Chapter 2 13 Experience: Example 3 What does this mean?

2/6/2003 Designing Visual Language-Chapter 2 14 Perception is Goal-Oriented Perception is goal-directed: We search out what we need from a field of images and largely ignore the rest.

2/6/2003 Designing Visual Language-Chapter 2 15 Goal-Oriented: Example 1 Look at the image below and quickly calculate the number of sides on the three shapes

2/6/2003 Designing Visual Language-Chapter 2 16 Thirteen, right? Counting the sides of the three figures was easy. But can you recite the numbers in three of the corners? Did you notice that the number in the bottom right corner was the sum of the two numbers at the top? Did you notice that one of the figures was outlined in black? Do you recall which figure? Did you notice that two of the shapes were the same, except that the one on right was slightly smaller than the one on the right?

2/6/2003 Designing Visual Language-Chapter 2 17 All Seeing is Contextual When we perceive in the world, we do so within a visual field—our range of vision at any particular moment. What we choose to focus on is situated in this visual field

2/6/2003 Designing Visual Language-Chapter 2 18 Context: Example 1

2/6/2003 Designing Visual Language-Chapter 2 19 Context: Example 2

2/6/2003 Designing Visual Language-Chapter 2 20 Context: Example 3

2/6/2003 Designing Visual Language-Chapter 2 21 Gestalt Principles of Design Gestalt principles of perception can help us understand how readers see our documents. For now we can examine in more detail Figure-ground contrast Grouping

2/6/2003 Designing Visual Language-Chapter 2 22 Figure-ground contrast Virtually everything we see relies on our ability to separate one image from another, to see one image stand out (the figure) against others (the ground).

2/6/2003 Designing Visual Language-Chapter 2 23 Figure-ground: Example 1

2/6/2003 Designing Visual Language-Chapter 2 24 Figure-ground: Example 2

2/6/2003 Designing Visual Language-Chapter 2 25 Figure-ground: Example 3

2/6/2003 Designing Visual Language-Chapter 2 26 Figure-ground: Example 4

2/6/2003 Designing Visual Language-Chapter 2 27 Figure-ground: Example 5

2/6/2003 Designing Visual Language-Chapter 2 28 is Figure-ground: Example 6 This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader. This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure-ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader. This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure-ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the

2/6/2003 Designing Visual Language-Chapter 2 29 is Figure-ground: Example 7 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on.

2/6/2003 Designing Visual Language-Chapter 2 30 is Figure-ground: Example 8 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on.

2/6/2003 Designing Visual Language-Chapter 2 31 is Figure-ground: Example 9 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on.

2/6/2003 Designing Visual Language-Chapter 2 32 Figure-ground: Example 10 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on.

2/6/2003 Designing Visual Language-Chapter 2 33 Figure-ground: Example 11

2/6/2003 Designing Visual Language-Chapter 2 34 Figure-ground: Example 12

2/6/2003 Designing Visual Language-Chapter 2 35 Figure-ground: Example 13

2/6/2003 Designing Visual Language-Chapter 2 36 Figure-ground: Example 14

2/6/2003 Designing Visual Language-Chapter 2 37 Degrading Figure-Ground Contrast Visual noise—anything that impedes our perceptual response—is often produced by over-design. Consider our “improved” page from earlier.

2/6/2003 Designing Visual Language-Chapter 2 38 is Visual Noise: Example 1 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Printed on white paper

2/6/2003 Designing Visual Language-Chapter 2 39 Visual Noise: Example 2 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Printed on light colored paper

2/6/2003 Designing Visual Language-Chapter 2 40 Visual Noise: Example 3 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Printed on red paper

2/6/2003 Designing Visual Language-Chapter 2 41 Visual Noise: Example 4 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Printed on dark colored paper

2/6/2003 Designing Visual Language-Chapter 2 42 Visual Noise: Fonts There are many examples of noisy fonts: This is a noisy font This is noisy for different reasons This is almost unreadable

2/6/2003 Designing Visual Language-Chapter 2 43 Visual Noise: Backgrounds 1 Backgrounds, especially on web pages, can create visual noise. This checkerboard pattern is pretty distracting, but the text is still mostly readable. However, notice the degradation along the edges.

2/6/2003 Designing Visual Language-Chapter 2 44 Visual Noise: Backgrounds 2 This larger checkerboard pattern actually does less damage to the edges of the letters, but is much less readable. The busy-ness of the background completes with the foreground text.

2/6/2003 Designing Visual Language-Chapter 2 45 Visual Noise: Spacing Noise can also be generated by the effect of text on itself. Compare the text below. Noise can also occur when text is spaced too closely, as in this sans serif text without any spacing between the lines. Because the lines of text don’t have any breathing room, the text looks jumbled and dense. We have to work hard to distinguish the text (the figure) from the ground as well as from other lines of text. Noise can also occur when text is spaced too closely, though here noise is lessened by the use of a serif font and three points of interline leading. A point is 1/12 of a pica and there are six picas in an inch. That means each point is only 1/72 of a inch, so three points is a pretty small amount of space, and yet what a difference in readability it makes!

2/6/2003 Designing Visual Language-Chapter 2 46 Visual Noise: Data Displays 1 Here is our clean chart from earlier.

2/6/2003 Designing Visual Language-Chapter 2 47 Visual Noise: Data Displays 2 Here is our clean chart with some gridlines added for clarity.

2/6/2003 Designing Visual Language-Chapter 2 48 Visual Noise: Data Displays 3 Here is our clean chart made almost unreadable.

2/6/2003 Designing Visual Language-Chapter 2 49 Grouping Grouping is a powerful tool for helping readers see the coherence of a document. Grouping creates visual cohesion—it’s the glue that holds the parts together.

2/6/2003 Designing Visual Language-Chapter 2 50 Grouping: Three Strategies Likeness of form Spatial nearness Division

2/6/2003 Designing Visual Language-Chapter 2 51 is Grouping: Example 1 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited as is the choice of font, the very common serif font Times New Roman. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Headings are one of the most common grouping methods.

2/6/2003 Designing Visual Language-Chapter 2 52 is Grouping: Example 2 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. 1. As such, this page is a good example. 2. The black text on the white background is perfectly suited 3. As is the choice of font. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Bulleted and numbered lists are another common grouping strategy that relies on likeness of form.

2/6/2003 Designing Visual Language-Chapter 2 53 is Grouping: Example 3 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type Nothing to Rest On When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. 1. As such, this page is a good example. 2. The black text on the white background is perfectly suited 3. As is the choice of font. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Headings can also be used to show the hierarchical relationships in a document. Main Heading Secondary Headings

2/6/2003 Designing Visual Language-Chapter 2 54 is Grouping: Example 4 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure- ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. 1. As such, this page is a good example. 2. The black text on the white background is perfectly suited 3. As is the choice of font. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find anything to focus on. Graphic elements such as lines and boxes help show divisions and thus groupings.

2/6/2003 Designing Visual Language-Chapter 2 55 is Grouping: Example 5 Creating Visual Interest This page has a good deal of text and it is difficult to isolate one word from another. As such, this page is a good example of poor figure-ground contrast, not because of the contrast of colors. The black text on the white background is perfectly suited As is the choice of font No, the problem is in the gray mass of type Nothing to Rest On When there is not visual variety, the eye cannot find anything to focus on. That’s why even paragraph breaks can be an important feature of a page of text. One line indented out of some thirty lines on the page creates visual relief and partially helps explain why paragraphs are a vital feature of any document. At this point, the text will simply repeat itself. Farewell, gentle reader This page has a good deal of text and it is difficult to isolate one word from another. 1. As such, this page is a good example. 2. The black text on the white background is perfectly suited 3. As is the choice of font. No, the problem is in the gray mass of type, where nothing stands out. When there is not visual variety, the eye cannot find Shading and colors can also create cohesion.

2/6/2003 Designing Visual Language-Chapter 2 56 Grouping: Example 6

2/6/2003 Designing Visual Language-Chapter 2 57 Grouping: Example 7 TermStudentsContactsStaffIncrease Fall, % Spring, % Fall, % Spring, % Fall, %

2/6/2003 Designing Visual Language-Chapter 2 58 Grouping: Example 8 TermStudentsContactsStaffIncrease Fall, % Spring, % Fall, % Spring, % Fall, %

2/6/2003 Designing Visual Language-Chapter 2 59 Grouping: Example 9 TermStudentsContactsStaffIncrease Fall, % Spring, % Fall, % Spring, % Fall, %

2/6/2003 Designing Visual Language-Chapter 2 60 Conclusion Using Gestalt principles, then, is a means to an end—adapting visual language to a rhetorical situation.