Transcript Designing for the Web - School of Computing and

Designing for the Web
 Web site design
 Web page design
 Web usability
Web Design Guidelines by Scott
Grissom
1
Your Goal
 Create a web site that is:





useful
compelling
attractive
easy to use
satisfying
Web Design Guidelines by Scott
Grissom
2
Web Development Team







Content provider
Information architect
Graphic designer
Writer / editor
Programmer
Project Manager
Usability Expert
Web Design Guidelines by Scott
Grissom
3
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?
Web Design Guidelines by Scott
Grissom
4
Site Design
 Content
 Organization
 Navigation system
Web Design Guidelines by Scott
Grissom
5
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?
Web Design Guidelines by Scott
Grissom
6
Activity #1
 Develop a mission statement
 one sentence
 must contain audience, purpose, and
content
 Develop an initial inventory of content
 on your own
Web Design Guidelines by Scott
Grissom
7
Organization Schemes




White pages
Yellow pages
Supermarket
Your computer
Web Design Guidelines by Scott
Grissom
8
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 6 Topic 7
1
2
3
4
5
Web Design Guidelines by Scott
Grissom
6
7
9
Navigation System
 How do I get home?
 Where am I?
 Where else can I go?
Web Design Guidelines by Scott
Grissom
10
Examples
 across the top
 down the left side
Web Design Guidelines by Scott
Grissom
11
Additional Navigation
 Site map
 overall view
 Index
 alphabetical list of terms
 Search facility
 requires special expertise
Web Design Guidelines by Scott
Grissom
12
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
Web Design Guidelines by Scott
Grissom
13
Activity #2





refrigerator
socks
living room
dictionary
milk





bureau
kitchen
bookshelf
bedroom
a live elephant
Web Design Guidelines by Scott
Grissom
14
Web Page Design
 KISS
Web Design Guidelines by Scott
Grissom
15
Home Page




What can I do at this site?
No scrolling should be necessary!
Attractive
This is your first impression
Web Design Guidelines by Scott
Grissom
16
Web Writing
 remember visitors only scan
 keep it short
 at least 50% of normal text
 use headings
 use bullet lists
 put conclusion first
Web Design Guidelines by Scott
Grissom
17
Common Page Guidelines




dark text on light background
limit visitor scrolling
limit use of images
limit use of animations
Web Design Guidelines by Scott
Grissom
18
Be Aware of Browser Features
 Back button
 do not provide your own
 Colored links
 do not change default
 Bookmarks
 provide meaningful title
Web Design Guidelines by Scott
Grissom
19
Proofread
 errors will kill the professional appearance of
your site
 use a spell checker
 use a grammar checker?
 ask someone else to check grammar
Web Design Guidelines by Scott
Grissom
20
Web Usability Measures





What are some indications of ‘user friendly’?
Ease of learning
Improved user performance
Low user error rate
User satisfaction
Web Design Guidelines by Scott
Grissom
21
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?
Web Design Guidelines by Scott
Grissom
22
Usability Evaluation Strategies
 Checklist
 User testing
 Usability inspection
 bring in a usability expert
Web Design Guidelines by Scott
Grissom
23
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?
Web Design Guidelines by Scott
Grissom
24
User Testing




Identify appropriate users
Select appropriate tasks
Watch, listen, but don’t talk!
Ask volunteers to complete a survey
Web Design Guidelines by Scott
Grissom
25
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
Web Design Guidelines by Scott
Grissom
26
Some Sample Sites
 Let’s take a look at some of your
favorite sites….
Web Design Guidelines by Scott
Grissom
27
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?
Web Design Guidelines by Scott
Grissom
28
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.ht
ml
 Link Checking Software
 Xenu's Link Sleuth - freeware
 http://home.snafu.de/tilman/xenulink.html
Web Design Guidelines by Scott
Grissom
29
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 Design Guidelines by Scott
Grissom
30
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 Design Guidelines by Scott
Grissom
31