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

Where we are Note the changes in content as per 3/26 discussion 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 visual rhetoric, intro (readability (fonts & white space), rhetoric and psych of color schemes) 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

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

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. Cohesion and coherence- how the words satisfy expectations. When looking at a sentence you are giving the user expectations and evoking images. Serif- the ornimentation at the end of the font. San serif means without serif. Some designers say readability includes legibility. Some say the opposite!

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

WebSolutions: Readability, 2 Try these guidelines out for yourself: http://www.hgrebdes.com/colour/spectrum/colourvisibility.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.

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

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 Watch out for stereo-typography!! (Check out the foreign look fonts here: http://www.dafont.com/theme.php?cat=201 Stereo-typography - a font that looks like stereo-typography would look like a culture. The writing that looks like chinese… that would go for chinese websites or something.

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 :)

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

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

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 Notes: Things that need changes- No bold font in the main text on the pages. No changing of the top menu bar when toggling over it. Readability is poor because your eye goes straight to the bold words that do not matter. Words overlap at the bottom of the page and overlap with the menu bar on the top. Recommendations- More uniform subheadings and consistency with them. Make full use of the whole top menu bar and change the color scheme. The contrast is distracting. The three different parts of the top menu bar are distracting and the bolding on the bar when it is toggled or when you are on that certain page. Add a forum to the site so that people can actually contact the club through the website. Changing the main heading name to the website/group to one consistant title. Either the Outdoors Club or the Outing Club. The Links tab needs to be titled something different so that the user will go there for things other then links. Having a perspective members tab would be helpful in this site so that the members to be would know what to do and how to do it when joining the club. Fonts, readability, legibility and aspects of color: Change the color scheme altogether. Maybe have some green in there but not ugly greens that hurt the users eyes. The main heading that states the title of the club is nice and should stand out, but it needs to work a little better in the site itself. The blue colors in the text also don’t help the eye when reading the text. The type of font on the pages are okay but are not that interesting. The black on white is good though. The links should be highlighted but maybe not in blue. The pictures on the top heading are way to faded and can hardly be seen. There should be pictures and maybe even more pictures then they already have, but these pictures do not do the group justice. The main heading is confusing because the user does not know if the group is called Outdoors Club or Outing Club.

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). Assess & Request Work completed Work remaining

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

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

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

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