Douglas K. van Duyne

James A. LandayJason I. Hong

Using Design Patterns to Create Customer-Centered Web Sites

Oct 08 2002 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 Saleshttp://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html

Oct 08 2002 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.newscientist.com/opinion/opinterview.jsp?id=ns23631

Oct 08 2002 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?

Oct 08 2002 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…

Oct 08 2002 6

A Web of Design Patterns

(181) The Fire

(8) Mosaic of Subcultures

(179) Alcoves

(95) Building Complex

(33) Night Life(31) Promenade

(90) Beer Hall

Cities

& T

owns

InteriorsLocal

Gatherings

Oct 08 2002 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…

Oct 08 2002 8

Navigation Bar

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

Oct 08 2002 9

Navigation Bar

• Solution– Captures essence on how to solve problem

First-level navigation

Second-level navigation

Link to home

Oct 08 2002 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

Oct 08 2002 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

Oct 08 2002 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

Oct 08 2002 13

Process Funnel

• Desktop Solution

Oct 08 2002 14

Process Funnel

• Web Solution

Oct 08 2002 15

Process Funnel

• Web Solution

• What’s different?– No tab rows– No impulse buys– Only navigation on page

takes you to next step

• What’s different?– No tab rows– No impulse buys– Only navigation on page

takes you to next step

• What’s the same?– Logo, layout, color, fonts

• What’s the same?– Logo, layout, color, fonts

Oct 08 2002 16

Process Funnel

• Problem: What if users need extra help?

Oct 08 2002 17

Process Tunnel

Oct 08 2002 18

Process Tunnel

Oct 08 2002 19

Process FunnelSolution Diagram

Oct 08 2002 20

Process FunnelRelated Patterns

(A10) Web Apps

(K5) High-Viz Action Buttons

(A1) E-Commerce (A11) Intranets

(H1) Process Funnel

(K2) Navigation Bars

(K3) Tab Rows

(K4) Action Buttons

(K12) Preventing Errors

(H8) Context-Sensitive Help

(I2) Above the Fold

(K13) Meaningful Error Messages

Oct 08 2002 21

Format of Web Design Patterns

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

Oct 08 2002 22

Pattern Name and NumberPattern Name and Number

ExemplarExemplar

BackgroundBackground

Problem Statement

Problem Statement

Forces &

Solution

Forces &

Solution

Oct 08 2002 23

Bus StopsBus StopsSolution

Diagram

Solution

Diagram

Related

Patterns

Related

Patterns

Oct 08 2002 24

Process FunnelRelated Patterns

(A10) Web Apps

(K5) High-Viz Action Buttons

(A1) E-Commerce (A11) Intranets

(H1) Process Funnel

(K2) Navigation Bars

(K3) Tab Rows

(K4) Action Buttons

(K12) Preventing Errors

(H8) Context-Sensitive Help

(I2) Above the Fold

(K13) Meaningful Error Messages

Oct 08 2002 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

Oct 08 2002 26

Oct 08 2002 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)

• 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)

Oct 08 2002 28

Oct 08 2002 29

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

problem

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

problem

Oct 08 2002 30

Meaningful Error Messages Solution Diagram

Oct 08 2002 31

Process FunnelRelated Patterns

(A10) Web Apps

(K5) High-Viz Action Buttons

(A1) E-Commerce (A11) Intranets

(H1) Process Funnel

(K2) Navigation Bars

(K3) Tab Rows

(K4) Action Buttons

(K12) Preventing Errors

(H8) Context-Sensitive Help

(I2) Above the Fold

(K13) Meaningful Error Messages

Oct 08 2002 32

Web Apps

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

Oct 08 2002 33

Web AppsSolution

• 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

Oct 08 2002 34

Web Apps

Oct 08 2002 35

Web Apps

Oct 08 2002 36

Web AppsSolution Diagram

Oct 08 2002 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– we’ve started it with 92 patterns– time for the community to comment &

contribute!

Douglas K. van Duyne

James A. LandayJason I. Hong

www.designofsites.com

Thanks!

Oct 08 2002 39

Extra Slides