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?
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
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
Top Related