1. 1 Reader As Artist Janet M. Beyersdorfer, Ed.D CCSD #21

2. 2 Author’s Tasks Understand information Establish audience Simplify message Integrate graphic and text elements Garcia, 1997

3. 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. 4 Reader Attention 35 %25 % 15 % X Smith & Yoder, 1998

5. 5 Eye Movement Size of elements Placement of elements Presence of color Content Garcia, Eye Track Research, 1990-91

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

7. 7

8. 8 Text Elements

9. 9 * Major Ideas * Memory Hints * Few Items per Page * Bullet Listing

10. 10 * Important Details * Add Interest & Clarify Ideas * Few Items per Page

11. 11 * Bold * Italics * Color Styles * Underline Emphasis & Attention

12. 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. 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. 14 Legibility Ability to recognize letters and words

15. 15 Emphasize Ideas *Using rules not by underlining *Using boxes *Using italic, not bold

16. 16 Size Learn how now! Learn how NOW!

17. 17 Color and Shape Emotions

18. 18 Content Cues Visual differences Shape Direction Size Color

19. 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. 20 Arrangement Balance Proportion Space

21. 21 Text Selection *Usually two fonts / two styles / color *18--24 pt recommended body copy *Double size at each heading level

22. 22 Readability Process blocks of text quickly and easily *Serif *Align left *Avoid creating widows and orphans *Use italics (not CAPITALS or boldface)

23. 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. 24 Graphic Selection *Clip Art *Drawing and Painting (*Animation, still photography and video)

25. 25 Graphics Promote thinking and increase learning Visually informative not Prioritize and emphasize information

26. 26 References Garcia, 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. 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. 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