Designing for the Web Web site design Web page design Web usability

Web site design

Web page design

Web usability

Your Goal Create a web site that is: useful compelling attractive easy to use satisfying

Create a web site that is:

useful

compelling

attractive

easy to use

satisfying

Web Development Team Content provider Information architect Graphic designer Writer / editor Programmer Project Manager Usability Expert

Content provider

Information architect

Graphic designer

Writer / editor

Programmer

Project Manager

Usability Expert

Mission Statement What are you creating and why? Who will use it? What will they want to do? How will you know if your site is successful?

What are you creating and why?

Who will use it?

What will they want to do?

How will you know if your site is successful?

Site Design Content Organization Navigation system

Content

Organization

Navigation system

Content What do your visitors want? What information do you want to provide? What do similar organizations provide? What do you already have? What do you need to create?

What do your visitors want?

What information do you want to provide?

What do similar organizations provide?

What do you already have?

What do you need to create?

Activity #1 Develop a mission statement one sentence must contain audience, purpose, and content Develop an initial inventory of content on your own

Develop a mission statement

one sentence

must contain audience, purpose, and content

Develop an initial inventory of content

on your own

Organization Schemes White pages Yellow pages Supermarket Your computer

White pages

Yellow pages

Supermarket

Your computer

Hierarchy no more than seven categories three clicks and you are there Home Page Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 7 Topic 6 1 3 4 5 6 2 7

no more than seven categories

three clicks and you are there

Navigation System How do I get home? Where am I? Where else can I go?

How do I get home?

Where am I?

Where else can I go?

Examples across the top down the left side

across the top

down the left side

Additional Navigation Site map overall view Index alphabetical list of terms Search facility requires special expertise

Site map

overall view

Index

alphabetical list of terms

Search facility

requires special expertise

Labels are important Strive to make labels clear & concise Be consistent Follow convention Home / Main Search / Find Contact Us About Us Help / FAQ News / What’s New

Strive to make labels clear & concise

Be consistent

Follow convention

Home / Main

Search / Find

Contact Us

About Us

Help / FAQ

News / What’s New

Activity #2 refrigerator socks living room dictionary milk bureau kitchen bookshelf bedroom a live elephant

refrigerator

socks

living room

dictionary

milk

bureau

kitchen

bookshelf

bedroom

a live elephant

Web Page Design KISS

KISS

Home Page What can I do at this site? No scrolling should be necessary! Attractive This is your first impression

What can I do at this site?

No scrolling should be necessary!

Attractive

This is your first impression

Web Writing remember visitors only scan keep it short at least 50% of normal text use headings use bullet lists put conclusion first

remember visitors only scan

keep it short

at least 50% of normal text

use headings

use bullet lists

put conclusion first

Common Page Guidelines dark text on light background limit visitor scrolling limit use of images limit use of animations

dark text on light background

limit visitor scrolling

limit use of images

limit use of animations

Be Aware of Browser Features Back button do not provide your own Colored links do not change default Bookmarks provide meaningful title

Back button

do not provide your own

Colored links

do not change default

Bookmarks

provide meaningful title

Proofread errors will kill the professional appearance of your site use a spell checker use a grammar checker? ask someone else to check grammar

errors will kill the professional appearance of your site

use a spell checker

use a grammar checker?

ask someone else to check grammar

Web Usability Measures What are some indications of ‘user friendly’? Ease of learning Improved user performance Low user error rate User satisfaction

What are some indications of ‘user friendly’?

Ease of learning

Improved user performance

Low user error rate

User satisfaction

Web Design Guidelines Know the user Involve the user during design Design a navigation system Where am I? How can I get home? Where else can I go?

Know the user

Involve the user during design

Design a navigation system

Where am I?

How can I get home?

Where else can I go?

Usability Evaluation Strategies Checklist User testing Usability inspection bring in a usability expert

Checklist

User testing

Usability inspection

bring in a usability expert

Usability Checklist Are all links correct? Is there a link to home on every page? Is navigation consistent on every page? Does each page have an appropriate title? Did I proofread all content? Create user profiles can they do what they will likely want to do?

Are all links correct?

Is there a link to home on every page?

Is navigation consistent on every page?

Does each page have an appropriate title?

Did I proofread all content?

Create user profiles

can they do what they will likely want to do?

User Testing Identify appropriate users Select appropriate tasks Watch, listen, but don’t talk! Ask volunteers to complete a survey

Identify appropriate users

Select appropriate tasks

Watch, listen, but don’t talk!

Ask volunteers to complete a survey

A Typical Survey Strive for unbiased questions Use a rating scale 1-5 Finding the information was: difficult 1 2 3 4 5 easy Appearance of the site was: ugly 1 2 3 4 5 beautiful Overall, the site was: really sucky 1 2 3 4 5 excellent

Strive for unbiased questions

Use a rating scale 1-5

Finding the information was:

difficult 1 2 3 4 5 easy

Appearance of the site was:

ugly 1 2 3 4 5 beautiful

Overall, the site was:

really sucky 1 2 3 4 5 excellent

Some Sample Sites Let’s take a look at some of your favorite sites….

Let’s take a look at some of your favorite sites….

Activity #3 Go to a competitors site Kick the tires and look for usability problems What do you like? What do you think will cause problems? What do you hate?

Go to a competitors site

Kick the tires and look for usability problems

What do you like?

What do you think will cause problems?

What do you hate?

Additional Resources Usable Web the mother of all sites http://www.usableweb.com/ Yale Web Style Guide http://info.med.yale.edu/caim/manual/contents.html Link Checking Software Xenu's Link Sleuth - freeware http://home.snafu.de/tilman/xenulink.html

Usable Web

the mother of all sites

http://www.usableweb.com/

Yale Web Style Guide

http://info.med.yale.edu/caim/manual/contents.html

Link Checking Software

Xenu's Link Sleuth - freeware

http://home.snafu.de/tilman/xenulink.html

Summary (1) Web site design start with a mission statement plan and organize the site design a navigation system Web page design be concise be consistent proofread

Web site design

start with a mission statement

plan and organize the site

design a navigation system

Web page design

be concise

be consistent

proofread

Summary (2) Web usability you are NOT the typical visitor find out what problems the typical visitor has with your site Web Usability Evaluation discover usability problems BEFORE it is too late

Web usability

you are NOT the typical visitor

find out what problems the typical visitor has with your site

Web Usability Evaluation

discover usability problems BEFORE it is too late