11

Designing for the WebDesigning for the Web

Web site design Web page design Web usability

Web site design Web page design Web usability

22

Your GoalYour 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

33

Web Development TeamWeb 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

44

Mission StatementMission 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?

55

Site DesignSite Design

Content Organization Navigation system

Content Organization Navigation system

66

ContentContent

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?

77

Activity #1Activity #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

88

Organization SchemesOrganization Schemes

White pages Yellow pages Supermarket Your computer

White pages Yellow pages Supermarket Your computer

99

HierarchyHierarchy no more than seven categories three clicks and you are there

no more than seven categories three clicks and you are there

Home Page

Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 7Topic 6

1 3 4 5 62 7

1010

Navigation SystemNavigation 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?

1111

ExamplesExamples

across the top down the left side

across the top down the left side

1212

Additional NavigationAdditional 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

1313

Labels are importantLabels 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

1414

Activity #2Activity #2

refrigerator socks living room dictionary milk

refrigerator socks living room dictionary milk

bureau kitchen bookshelf bedroom a live elephant

bureau kitchen bookshelf bedroom a live elephant

1515

Web Page DesignWeb Page Design

KISS KISS

1616

Home PageHome 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

1717

Web WritingWeb 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

1818

Common Page GuidelinesCommon 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

1919

Be Aware of Browser Features

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

2020

ProofreadProofread

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

2121

Web Usability MeasuresWeb 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

2222

Web Design GuidelinesWeb 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?

2323

Usability Evaluation Strategies

Usability Evaluation Strategies

Checklist User testing Usability inspection

bring in a usability expert

Checklist User testing Usability inspection

bring in a usability expert

2424

Usability ChecklistUsability 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?

2525

User TestingUser 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

2626

A Typical SurveyA Typical Survey

Strive for unbiased questions Use a rating scale 1-5Finding 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-5Finding 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

2727

Some Sample SitesSome Sample Sites

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

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

2828

Activity #3Activity #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?

2929

Additional ResourcesAdditional 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

3030

Summary (1)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

3131

Summary (2)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