Creating a Usable Web Site

Royce Shin - reshin@alum.mit.eduWeb DevelopmentUniversity of Minnesota

Introduction

Describe the general process Rules of thumb in design

Who’s Involved in Building a Web Site? 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

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

Starting Out

Define your goal Know your audience - focus group Gather your content

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

Design Protosite

Design pages Create HTML-only protosite Usability test the protosite

Production

Optimize graphics Incorporate graphics and content Add extras QA testing

Maintenance

More usability Update content List with search engine QA testing

Web Design

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

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

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

Graphic Design / Layout / Graphics Alignment Repetition Contrast Balance Proximity

Optimize images JPG vs. GIF Web-safe palette

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

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

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

Content writing

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

Usability - Top Ten Mistakes in Web Design 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

The Ugly Truth - Recent User Demographics 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

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/