Web Design Patterns

1
Web Design Patterns 3

• CS 160, Fall 2000
• James Landay
• 10/6/2000

2
Hall of Shame or Hall of Fame?

• College of Arts Crafts
• http//www.ccac-art.edu/

3
Hall of Shame

• College of Arts Crafts
• http//www.ccac-art.edu/
• What is this page about?
• no first read
• no value proposition
• How do I navigate?
• tiny links at the very bottom
• scrolled off many screens!
• Second page
• how do I do anything?
• fonts so small you cant read at all on a
  high-res monitor

4
Web Design Patterns 3

• CS 160, Fall 2000
• James Landay
• 10/6/2000

5
Outline

• Review
• E-commerce patterns
• Announcements
• Open question answer period

6
Review

• Design patterns allow us to?
• reuse design knowledge
• Previously used in?
• architecture S/E
• Web design patterns leverage
• peoples usage habits on/off-line
• Home page web design pattern solution
• make a positive first impression
• focus on a single item
• build your site brand
• make navigation easy
• lure visitors to return
• make it download fast

7
Pattern Examples

• Patterns leverage visitors off-line experience
• E-commerce
• shopping carts
• check out

8
Shopping Cart

• Problem?
• how to allow customers to purchase multiple items
  in one transaction
• Solution
• use shopping cart metaphor to keep track of items
  before customer finalizes the purchase
• track name, quantity, availability, price

9
How to Apply Shopping Carts

• Make available on each page and easy to add items
  from product pages?
• make it easy for people to buy!
• seems obvious, but many sites dont do it

10
How to Apply Shopping Carts

• Provide detailed info on each item in cart

11
How to Apply Shopping Carts

• Provide info about all items in cart
• sub-totals
• shipping, taxes, other charges (if known)

12
How to Apply Shopping Carts

• Provide a prominent link to CHECKOUT

13
How to Apply Shopping Carts

• Have a link to let people continue shopping

14
How to Apply Shopping Carts

• Dont let unavailable things be added
• hard to find a good example of this

15
(No Transcript)
16
Summary

• Shopping carts leverage an off-line metaphor
• How to make this pattern work
• make available on each page
• make it easy to add items from product pages
• provide detailed info on each item in cart
• provide summary info on all items in cart
• give a prominent link to CHECKOUT
• have a link to let people continue shopping
• dont let unavailable things get added to the
  cart

17
Next Time

• Midterm on Wed here in 405
• closed book
• covers everything
• handing out a copy of an old midterm
• Turn in hall of fame/shame next Wed.