1. Introduction to Web Authoring Ellen Cushman cushmane @msu.edu www.msu.edu/~cushmane/wra210.htm www.msu.edu/~cushmane/wa2.htm Class mtg. #22

2. Where we are M 3/17 assignment #4 intro, assign groups, brainstorm orgs. W 3/19 selecting organizations, problem analysis procedure M 3/24 proposal workshop W 3/26 web standards (proposals due 1-2 pages) M 3/31 designing test, planning W 4/2 testing and compliance, executing M 4/7 M 4/7 visual rhetoric, intro (readability (fonts & white space), rhetoric and psych of color schemes) W 4/9 W 4/9 visual rhetoric, 2 (space: real estate, eye/hand movement, information layout) M 4/14 Workshop usability testing (Progress report due 3-6 slides) W 4/16 Presentation workshops. M & W 4/21- /23 Presentations on websolutions Reports due. 4/23 Note the changes in content as per 3/26 discussion

3. Today in Class | Next Class WedSolutions Design 1 Readability Rhetoric of Color Activity Progress Report Template WedSolutions Design 2 Space Movement Activity Work on Progress Reports

4. Visual Rhetoric: Fonts Font Readability  Perception of the words  How easy is it to scan the word and decode it?  Can a word or phrase be perceived from its surroundings (white space, size, color) Font Legibility  The design of typeface itself  Is the design transparent?  Does it have serifs?  Does it draw attention to itself and have a message. Some designers say readability includes legibility. Some say the opposite!

5. WebSolutions: Readability Readability W3C Guidelines Studies have shown that perception of text, our ease of scanning it, and decoding it is enhanced by contrast in colors. See guideline #2 on color visibility: http://www.w3.org/WAI/ER/IG/ert/ert- 19991221.html

6. WebSolutions: Readability, 2 Try these guidelines out for yourself: http://www.hgrebdes.com/colour/spectrum/colour visibility.html The greater the contrast between colors, in general, the better the user’s perception of the words. Unless, of course the user is color blind.

7. WebSolutions: Readability, 3 Color blindness affects many people, making websites difficult to read. To see the ways in which color blind people view your text, use this tool: http://gmazzocato.altervista.org/colorwheel/wheel. php

8. WebSolutions: Legibility, 1 Legibility has to do with font size and style, its personality if you will. Some designers strive for fonts that send a message:  Handwriting on the wall  http://www.dafont.com/theme.php?cat=603  Blood of Dracula? Sabrina Star?  http://www.themeworld.com/fonts/index.html http://www.themeworld.com/fonts/index.html  Watch out for stereo-typography!! (Check out the foreign look fonts here:  http://www.dafont.com/theme.php?cat=201

9. WebSolutions: Legibility, 2 A font’s transparency  Some designers believe that fonts should be seen and never heard!  They should invisibly carry their message--not draw attention to themselves.  Need a sample? Look at the font in these slides :)

10. WebSolutions: Legibility, 3 Size does matter! At least in fonts.  This is a matter of accessibility  And a matter of readability  Check out what happens when you increase the size of a font on a website: Notice the sea of white space? The indefinite word breaks? http://www.hgrebdes.com/typefaces/sizemyth.php

11. WebSolutions: Color Color psychology:  Colors are culturally and psychologically loaded.  http://www.colormatters.com/brain.html http://www.colormatters.com/brain.html Dr. J.L. Morton summarizes many ways in which colors impact people. Interesting!

12. Activity Using the framework for fonts readability, legibility and any psychological aspects of color you choose:  Analyze your site together as a group.  What recommendations might you make for redesign?  Take notes on your slides, come together as a group, and discuss your recommendations

13. Assess & Request Progress Reports: The basics This is a persuasive genre! You will likely have one of two aims: To convince your audience (me, in this case) that your team is on track, organized, and likely to meet the goals you set To convince your audience of a need to re-focus the project’s scope or increase resources for the project in light of unexpected circumstances (e.g. lack of progress). Work remaining Work completed

14. Progress Reports: Content 1 What are your, questions, data sources, & methods in each of our four major focus areas: Usability Accessibility Sustainability Design RDC

15. Progress Reports: Content 2 How is your inquiry progressing? What is done? What remains to be done? Usability Accessibility Sustainability Design Gantt

16. Progress Reports: Content 3 What have you learned so far? Usability Accessibility Sustainability Design Findings?

17. Progress Reports: FAQ Q: How long? 3-6 slides Q: What format? PowerPoint; two charts RDC + Gantt, notes to me Q: How do we turn it in? A: Post it to your project page, load it up, show it to me on Monday 4/14