1. Creating a Usable Web Site Royce Shin - reshin@alum.mit.edu Web Development University of Minnesota

2. Introduction n Describe the general process n Rules of thumb in design

3. Who’s Involved in Building a Web Site? n Graphic Designer n Visual Designer n HTML Production Engineer n Interaction Designer n Navigation Designer n Information Architect n Usability Specialist n Copywriter n Technical Writer n Software Engineer n Test Engineer n Web Server Administrator n Database Administrator

4. How Do I Compete? n Don’t, start small - find your niche n Publish original, credible content and good links n Listen to and connect with your audience n Update frequently n Keep loading small and fast n Test your usability throughout

5. Starting Out n Define your goal n Know your audience - focus group n Gather your content

6. Design Structure n Develop the information architecture n Develop naming conventions and titles n Build the site map n Work out navigation n Create outlined content pages n Usability test the structure on paper

7. Design Protosite n Design pages n Create HTML-only protosite n Usability test the protosite

8. Production n Optimize graphics n Incorporate graphics and content n Add extras n QA testing

9. Maintenance n More usability n Update content n List with search engine n QA testing

10. Web Design n HTML / Scripting n Graphic design / Layout / Graphics n Typography n Information architecture n Navigation n Content writing n Usability

11. HTML n Test in multiple browsers throughout n Avoid frames if possible n Break up long tables n Label important images with ALT n Descriptive blue links n Small pages(20-30k) n Learn browser limitations

12. JavaScript n Test in multiple browsers throughout n Be aware of differences between JavaScript and JScript n Try not to require JavaScript n Be aware of limitations in different versions

13. Graphic Design / Layout / Graphics n Alignment n Repetition n Contrast n Balance n Proximity n Optimize images n JPG vs. GIF n Web-safe palette

14. Typography n Use restraint n Contrast, don’t conflict n Conservative serif font for content n Use HTML text if possible n Black on unsaturated light background for content n Be careful with decorative fonts

15. Information Architecture n Tree is standard for content-driven sites n Balance width and depth n Categorize into comprehensive, yet limited set of topics n Test this for usability

16. Navigation n Always link home n Show users where they are n Allow users to traverse back up the tree n Keep navigation consistent n Search engine is a must for over 200 pages

17. Content writing n Highlight keywords n Meaningful sub-headings n Bulleted lists n One idea per paragraph n Inverted pyramid n Half the word count of print

18. Usability - Top Ten Mistakes in Web Design n Using frames n Gratuitous use of bleeding-edge technology n Scrolling text, marquees, and constantly running animations n Complex URLs n Orphan pages n Long scrolling pages n Lack of navigation support n Non-standard link colors n Outdated information n Overly long download times

19. The Ugly Truth - Recent User Demographics n Easy majority use IE n 27% sometimes use browser other than IE or Netscape n 33% using browser older than 4.0 n 90% using Windows n 19% not using JavaScript n 20% have 28k connection or slower n 89% have at least 16- bit color n 25% have 14-inch or smaller monitors n 13% have 640x480 monitors, 55% have 800x600 monitors n 61.4% cite speed as a major problem n 45.4% cite finding new info as a major problem n 30% cite finding known info as a major problem n 79% of users simply scan new pages

20. URLs n HTML - http://www.w3.org/MarkUp/ n Design - http://www.wpdfd.com/wpdhome.htm n Usability - http://www.useit.com/ http://www.asktog.com/ http://www.iarchitect.com/ n Users - http://www.cc.gatech.edu/gvu/user_surveys/ http://www.thecounter.com/stats/ n Web-safe palette - http://www.lynda.com/hex.html n JavaScript - http://www.builder.com/Programming/Javascript/