1. Introduction to Web Authoring Ellen Cushman cushmane
@msu.edu
Class mtg. #22

2. 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

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.
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!

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:

6. WebSolutions: Readability, 2
Try these guidelines out for yourself:
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:

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
Blood of Dracula? Sabrina Star?
Watch out for stereo-typography!! (Check out the foreign look fonts here:
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.

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?

11. WebSolutions: Color Color psychology:
Colors are culturally and psychologically loaded.
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
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.

13. 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

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