Designing for the Web

1
Designing for the Web

• Web site design
• Web page design
• Web usability

2
Your Goal

• Create a web site that is
• useful
• compelling
• attractive
• easy to use
• satisfying

3
Web Development Team

• Content provider
• Information architect
• Graphic designer
• Writer / editor
• Programmer
• Project Manager
• Usability Expert

4
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?

5
Site Design

• Content
• Organization
• Navigation system

6
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?

7
Activity 1

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

8
Organization Schemes

• White pages
• Yellow pages
• Supermarket
• Your computer

9
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
10
Navigation System

• How do I get home?
• Where am I?
• Where else can I go?

11
Examples

• across the top
• down the left side

12
Additional Navigation

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

13
Labels are important

• Strive to make labels clear concise
• Be consistent
• Follow convention
• Home / Main
• Search / Find
• Contact Us
• About Us
• Help / FAQ
• News / Whats New

14
Activity 2

• refrigerator
• socks
• living room
• dictionary
• milk

• bureau
• kitchen
• bookshelf
• bedroom
• a live elephant

15
Web Page Design

• KISS

16
Home Page

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

17
Web Writing

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

18
Common Page Guidelines

• dark text on light background
• limit visitor scrolling
• limit use of images
• limit use of animations

19
Be Aware of Browser Features

• Back button
• do not provide your own
• Colored links
• do not change default
• Bookmarks
• provide meaningful title

20
Proofread

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

21
Web Usability Measures

• What are some indications of user friendly?
• Ease of learning
• Improved user performance
• Low user error rate
• User satisfaction

22
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?

23
Usability Evaluation Strategies

• Checklist
• User testing
• Usability inspection
• bring in a usability expert

24
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?

25
User Testing

• Identify appropriate users
• Select appropriate tasks
• Watch, listen, but dont talk!
• Ask volunteers to complete a survey

26
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

27
Some Sample Sites

• Lets take a look at some of your favorite sites.

28
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?

29
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

30
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

31
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