1

Reader As Artist

Janet M. Beyersdorfer, Ed.D CCSD #21

2

Author’s Tasks

Understand information

Establish audience

Simplify message

Integrate graphic and text elements Garcia, 1997

3

Comments on the next slide

The native reader of English will automatically look first at the upper left corner--less attention is paid to the remaining part of the page.

4

Reader Attention

35 % 25 %

25 % 15 %

X

Smith & Yoder, 1998

5

Eye Movement

Size of elements

Placement of elements

Presence of color

Content

Garcia, Eye Track Research, 1990-91

6

Comments on the next slide

Notice how your eye is drawn into the center of the photo on the next slide.

7

8

Text Elements

9

* Major Ideas

* Memory Hints

* Few Items per Page

* Bullet Listing

10

* Important Details

* Add Interest & Clarify Ideas

* Few Items per Page

11

* Bold * Italics

* Color

Styles

* Underline

Emphasis & Attention

12

Comments on the next slide

On the next slide notice how the text is placed on an angle, the colors chosen and the two sizes of font.

13

Fonts

Serif- has “flags”on a letter, draws eye along the text’s line

San Serif-- excellent for titles and captions

Script- very hard to read use

sparingly

Novelty- often used for

logos

14

Legibility

Ability to recognize letters and words

15

Emphasize Ideas

* Using rules not by underlining

* Using boxes

* Using italic, not bold

16

Size

Learn how now!

Learn how NOW!

Learn how NOW!

17

Color and Shape

Emotions

18

Content CuesVisual differences

ShapeDirection

SizeColor

19

Be Aware of the Z

On the next slide, as your eye finishes the first line the pencil draws the eye from the upper information to the information on the lower lines. Color is also helpful. Can you see the Z in the slide design?

20

Arrangement

Balance Proportion Space

21

Text Selection

* Usually two fonts / two styles / color

* 18--24 pt recommended body copy

* Double size at each heading level

22

Readability

Process blocks of text quickly and easily

* Serif

* Align left

* Avoid creating widows and orphans

* Use italics (not CAPITALS or boldface)

23

Text Wrapping

Text wrapping a graphic makes it difficult for a reader to smoothly read the information and process it . There are a variety of ways to wrap text around a graphic. All slow reading speed and influence comprehension.

24

Graphic Selection

* Clip Art

* Drawing and Painting

(* Animation, still photography and video)

25

Graphics

Promote thinking and increase learning

Visually informative not

Prioritize and emphasize information

26

ReferencesGarcia, M. (1997). Redesigning print for the web.

Indianapolis, IN: Hayden Books.

Flanders, V. & Willis, M. (1998). Web pages that suck. Alemada, CA: Sybex

Hyerle, D. (1996). Visual tools for constructing knowledge. Alexandria, VA: ASCD

Meyer, E. (1997). Designing infographics. Indianapolis, IN: Hayden Books.

Moline, S. (1995). I see what you mean. York, Maine:

Stenhouse Publishers.

27

Reinking.D, McKenna, M.C., Labbo, L.D. & Kieffer, R.D. (Eds.) (1998). Handbook of literacy and technology: Transformations in a post-typographical world. Mahwah, NJ.: Erlbaun Assoc.

Schriver, K.A. (1996). Dynamics in document design. New York: John Wiley & Sons.

Smith, I. & Yoder, S. (1998). On the web or off. Eugene, OR: ISTE.

28

WEB References

Burbules, N.C. (June 14, 1998). Rhetorics of the WEB: Hyperreading and critical literacy [On-line]. Available: http://www.ed.uiuc.edu/facstaff/ burbules/ncb/ papers/rhetorics.html

Nielsen, J. (June, 1996). In defense of print. [On-line]. Available: http://useit.com/ alertbox/9602html