1 / 20

Creating a Usable Web Site

Creating a Usable Web Site. Royce Shin - reshin@alum.mit.edu Web Development University of Minnesota. Introduction. Describe the general process Rules of thumb in design. Graphic Designer Visual Designer HTML Production Engineer Interaction Designer Navigation Designer

dpipkin
Download Presentation

Creating a Usable Web Site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related