web design guidelines by scott grissom 1 designing for the web web site design web page design ...

Web Design Guidelines by Scott GrissomWeb Design Guidelines by Scott Grissom

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


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


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

web design guidelines by scott grissom 1 designing for the web web site design web page design ...

Documents