Date post: | 21-Dec-2015 |
Category: |
Documents |
View: | 214 times |
Download: | 0 times |
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 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 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 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 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 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 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!