Topic 8: Web Design and Accessibility
Instructor’s Notes

"Art has to move you and design does not, unless it’s a good design for a bus."

—David Hockney, draftsman, printmaker

Web Design Tips

Good Web design means your site achieves its goals and objectives with minimal obstacles to the user.

Good design is CRAP: Humorous acronyms aside, you’ll find this is the key to the four essential elements of good graphic design.

• Contrast—Add variety by making dissimilar elements look different
• Repetition—Add unity by repeating elements
• Alignment—Create visual connections between elements
• Proximity—Group related items together

A few basic tips:

Tip 1: Uphold user-friendliness (the most important design principle)

• Keep the user in mind.
• Even if your fabulous design makes perfect sense to you, if others are bogged down it is not effective interface design.
• Only design that is understood is truly effective. The designer’s opinion is secondary.
• Web sites should be accessible.

  For public institutions in the United States Web sites must be accessible to people with disabilities such as low vision, blindness and color blindness, hearing impairments, and people who cannot use a mouse. The World Wide Web Consortium (WC3) has developed a list of "Checkpoints for the Web Content Accessibility Guidelines" for Web designers to follow.

  The Guidelines are quite extensive and complex. The following is a summary of a few of the key checkpoints identified as Priority 1 by the WC3.

• Provide a text equivalent describing the images (graphics, animation, video) for people using a screen reader or browsing without images.
• Provide text equivalent describing any important sounds for people who are hard of hearing or deaf.
• Avoid using frames (if you don’t know what frames are you are probably not using them) It is difficult for people with screen readers to navigate frames.
• Avoid combinations of red and green for color blind people (8-12% of the population.)
• Keep navigation simple for people with motor impairments.

Tip 2: Functionality first

• Function over form: Make it readable and accessibleº then make it pretty
• Don’t substitute functionality for art—make the art fit the functionality (this sounds exceedingly simple, but all too often people begin developing the art only to find that it does not meet the technical constraints or the overall goals and objectives. Begin by developing the content of your site and then develop the art to accommodate the functionality.)
• Avoid ‘click’ and ‘click again’
• Don’t bury information in your site
• You should be able to get what you want in two or three clicks
• If you have a large site, create a site map, index, or table of contents so students can find information

Tip 3: Grouping items

• Group things that are similar by color, shape, and proximity
• Make dissimilar things look different
• Accentuate things that are clickable
• Reserve blue text for clickable items

Tip 4: Question your interface: Can I turn this on its head? Can I simplify?

• Remember effective design is often a matter of compromise; a balance between competing goals and objectives
• According to Dr. George Bracket, "Sometimes a picture is worth a thousand words but sometimes a word is better than a picture." How do we symbolize a word? If the word is ‘volume,’ you can show a picture of a speaker; however, if the word is ‘quit,’ you can show a picture ofº ? It’s possible the word quit is more effective than its icon.

Tip 5: Chose typestyles that increase reading comprehension.

• In the online environment san-sarifed fonts such as Ariel, Helvetica and Verdana are easier to read.

Caps—DO NOT USE ALL CAPITAL FOR SENTANCES THAT ARE MORE THAN FOUR WORDS IN LENGTH. CAPITAL LETTERS ARE HARD TO READ. MANY PEOPLE BELIEVE THAT USING CAPITAL LETTERS WILL CALL ATTENTION TO THEIR MESSAGE, BUT IN REALITY MOST PEOPLE TEND TO SKIP ENTIRELY CAPITALIZED TEXT.

Bold—Bold typeface should be used cautiously. Boldface is great for headers but after ten words in running text it is difficult to read, especially for people with vision impairment. Most people tend to skip long sentences or paragraphs written in boldface font.

Topic 8

Warm-Up

Instructor's Notes

Web Design Tips

Web Design and Accessibility Rubric

Assignment 8:Write a Web design and accessibility plan for your course

Curriculum Wizard

Table of Contents

Tip 6: Use tables to lay out your text. Studies show that reading comprehension increases if each line of text is no more than 10–12 words across.
Most English language print material is laid out with no more than an average of 10–12 words on each row. If text is permitted to adjust to the size of the screen, it can be challenging to comprehend and retain what you read. Most professional Web sites use tables to constrain the size of the text so it doesn’t go across the entire screen. (For more information on tables see Diane Wang’s course "HTML" and read the module on how to create tables in HTML http://think-ink.net/html/table.htm)

Rubric for Web Design and Accessibility

Resources

Accessibility Resources

Diane Wang's module on Accessibility
http://www.think-ink.net/html/08week.htm

"A Web Without Barriers Accessibility And Usability: What's In It For Me?" by Beth Archibald Tang
http://www.webdevelopersjournal.com/articles/accessibility.html

"Distance Education: Access Guidelines for Students with Disabilities" August 1999
http://pdc.cvc.edu/uaccess/

"Quicktips to Make Accessible Web Sites" by the W3
http://www.w3.org/WAI/References/QuickTips/

California Virtual Campus site on accessibility:
http://pdc.cvc.edu/uaccess/

"Considering the Color-Blind" By Chuck Newman
http://www.webtechniques.com/archives/2000/08/newman/

Web Design Resources

"Design" by Jay Cross, Founder of www.internettime.com
This is an outstanding site on user-centered design.
http://www.internettime.com/itimegroup/design.htm

One chapter "Don't Make Me Think" by Steve Krug
http://www.sensible.com/chapter.html

"Good Design Features" by author Robin Williams
http://www.ratz.com/features.html

"The Yale C/AIM Web Style Guide"
Provides design tips as well as "how to" advice and is the most recognized guide for Web design
.http://info.med.yale.edu/caim/manual/contents.html

"About the Human Interface"
Offers great tips on Web design and showcases well designed sites
http://webdesign.about.com/compute/webdesign/

"Buf Uglly"
A parody site dedicated to showing bad Web design
http://budugllydesign.com/

"Alistapart"
An online magazine for serious Web designers
http://www.alistapart.com

Books

"Non-Designer's Web Book" second edition, by author Robin Williams.
This is a primer on how to create Web pages. It provides simple but powerful tips on how to create Web pages and how to make them look good.

"Don't Make Me Think! A Common Sense Approach to Web Usability"
by Steve Krug
This is a insightful and entertaining book on interface design.

Professional Help

Be your own web designer and market you site too.