Creating a Usable Web Site Royce Shin - Web Development University of Minnesota

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

URLs n HTML - n Design - n Usability n Users n Web-safe palette - n JavaScript -