Using Design Patterns to Create CustomerCentered Web Sites

1
Using Design Patterns to Create Customer-Centered
Web Sites
Douglas K. van Duyne James A. Landay Jason I.
Hong
2
Good Web Site Design Matters

• NYTimes, Aug 30 1999, on IBM Web site
• Most popular feature was search people
  couldn't figure out how to navigate the site
• The second most popular feature was the help
  button, because the search technology was so
  ineffective.
• After redesign
• use of the "help" button decreased 84
• sales increased 400 percent

Good Web Site Design can Lead to Healthy
Sales http//www.nytimes.com/library/tech/99/08/cy
ber/commerce/30commerce.html
3
Design Solutions

• Design is about finding solutions
• Unfortunately, designers often reinvent
• Hard to know how things were done before
• Why things were done a certain way
• How to reuse solutions
• Norman recently said
• as computer technology moves into other
  fields, they're repeating the same mistakes. Each
  time, people think everything is new. It takes
  about five years to sort that out

Designed for Life, NewScientist.com http//www.new
scientist.com/opinion/opinterview.jsp?idns23631
4
Design Patterns

• Design patterns communicate common design
  problems and solutions
• First used in architecture Alexander
• Ex. How to create a beer hall where people
  socialize?

5
Using Design Patterns

• Not too general and not too specific
• Use a solution a million times over, without
  ever doing it the same way twice
• Design patterns are a shared language
• A language for building and planning towns,
  neighborhoods, houses, gardens, and rooms.
• Ex. Beer hall is part of a center for public
  life
• Ex. Beer hall needs spaces for groups to be
  alone

6
A Web of Design Patterns
(8) Mosaic of Subcultures
Cities Towns
(31) Promenade
(33) Night Life
(90) Beer Hall
Local Gatherings
(95) Building Complex
Interiors
(181) The Fire
(179) Alcoves
7
Web Design Patterns

• Now used in Web design
• Communicate design problems solutions
• how to create navigation bars for finding
  relevant content
• how to create a shopping cart that supports check
  out
• how to make e-commerce sites where people return
  buy

8
Navigation Bar

• Problem Customers need a structured, organized
  way of finding the most important parts of your
  Web site

9
Navigation Bar

• Solution
• Captures essence on how to solve problem

10
Patterns Support Creativity

• Patterns come from successful examples
• sites that are so successful that lots of users
  are familiar with their paradigms (e.g., Yahoo)
• interaction techniques/metaphors that work well
  across many sites (e.g., shopping carts)
• Not too general not too specific
• you need to specialize to your needs
• Patterns let you focus on the hard, unique
  problems to your design situation
• every real design will have many of these

11
Pattern Groups

• Our patterns organized by group

Site genres Navigational framework Home
page Content management Trust and
credibility Basic ecommerce
Advanced ecommerce Completing tasks Page
layouts Search Page-level navigation Speed
12
Process Funnel

• Problem Need a way to help people complete
  highly specific stepwise tasks
• Ex. Create a new account
• Ex. Fill out survey forms
• Ex. Check out

13
Process Funnel

• Desktop Solution

14
Process Funnel

• Web Solution

15
Process Funnel

• Whats different?
• No tab rows
• No impulse buys
• Only navigation on page takes you to next step

• Web Solution

• Whats the same?
• Logo, layout, color, fonts

16
Process Funnel

• Problem What if users need extra help?

17
Process Tunnel
18
Process Tunnel
19
Process Funnel Solution Diagram
20
Process Funnel Related Patterns
(A10) Web Apps
(A1) E-Commerce
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(H8) Context-Sensitive Help
(K3) Tab Rows
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K4) Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
21
Format of Web Design Patterns

• Pattern Name and Number
• Exemplar
• Background
• Problem
• Forces
• Solution Diagram
• Related Patterns

22
(No Transcript)
23
Bus Stops
Solution Diagram
Related Patterns
24
Process Funnel Related Patterns
(A10) Web Apps
(A1) E-Commerce
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(H8) Context-Sensitive Help
(K3) Tab Rows
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K4) Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
25
Meaningful Error Messages

• Problem When customers make mistakes, they need
  to be informed of the problem and how to recover
• Solution
• Clear statement of problem
• Explain how to recover
• Position near the problem

26
(No Transcript)
27

• Clear error message?
• Two messages at top
• Explains how to recover?
• Says it is missing required information
• Positioned near the problem?
• Error messages far away
• Required info in green, hard to see
  (color-blindness)

28
(No Transcript)
29

• Clear error message
• Explains how to recover
• Positioned near the problem

30
Meaningful Error Messages Solution Diagram
31
Process Funnel Related Patterns
(A10) Web Apps
(A1) E-Commerce
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(H8) Context-Sensitive Help
(K3) Tab Rows
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K4) Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
32
Web Apps

• Problem How to create online interactive
  services with simple interfaces?
• Ex. Online banking
• Ex. Hotmail or Yahoo Mail

33
Web Apps Solution

• Let customers try before they buy
• Consider cross-platform issues
• Provide abundant help
• Context Sensitive Help
• Pop-up Windows
• Security and Privacy
• Secure Connections
• Fair Information Practices
• Support different roles

34
Web Apps
35
Web Apps
36
Web Apps Solution Diagram
37
Takeaway Ideas

• Design patterns can be used throughout the design
  process
• Ideation, Design, Re-design
• Design patterns at all levels
• Site genres, Tasks, Navigation, Performance
• Design patterns are an ongoing conversation
• weve started it with 92 patterns
• time for the community to comment contribute!

38

Thanks!

• Douglas K. van Duyne
• James A. Landay
• Jason I. Hong

www.designofsites.com