Customer-Centred Design
• 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 customer-centered 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/cyber/commerce/30commerce.html
Web Design Patterns
• Design patterns communicate common design problems and solutions – how to create navigation bars
for finding relevant content…
– how to create a shopping cart that supports check out…
– how to make sites where people return & buy…
NAVIGATION BAR (K2)
• Problem: Customers need a structured, organized way of finding the most important parts of your Web site
NAVIGATION BAR (K2)
• Problem: Customers need a structured, organized way of finding the most important parts of your Web site
NAVIGATION BAR (K2)
• Solution
– captures essence on how to solve problem
First-level navigation
Second-level navigation
Link to home
Best Practices for Designing Interfaces
• Iterative design
• Getting it right the first time is hard • Need better support for quick turns around loop
Design
Prototype Evaluate
Design Patterns
Customer-Centered Design
• Understanding customers, their needs, the tools they use, their social and organizational context
• What if you don’t practice CCD?
– might overrun budget & management pulls plug
– site may be too hard to learn or use; visitors may never return
Myths of Customer-Centered Design
• Myth 1: Good Design is Just Common Sense
– why are there so many bad sites?
• Myth 2: Only Experts Create Good Designs
– experts faster, but anyone can understand & use CCD
• Myth 3: Interfaces can be Redesigned Before Launch
– assumes site has right features & being built correctly
• Myth 4: Good Design Takes Too Long/Costs Too Much
– CCD can reduce total development time & cost (finds problems early on)
• Myth 5: Good Design Is Just Cool Graphics
– only one part of the larger picture of what to communicate & how
• Myth 6: UI Guidelines Guide you to Good Designs
– only address how a site is implemented, not features, organization, or flow
• Myth 7: Customers Can Always Rely on Documentation & Help
– help is the last resort of a frustrated customer
• Myth 8: Market Research Takes Care of Understanding All Customer Needs
– does not help you understand behavior: what people say vs. what they do
• Myth 9: Quality Assurance Groups Make Sure That Web Sites Work Well
– QA makes sure product meets spec., not what happens w/ real customers on real problems
Design = Solutions
• Design is about finding solutions – unfortunately, designers often reinvent the wheel
• hard to know how things were done before
• why things were done a certain way
• how to reuse solutions
Design Patterns
• Design patterns communicate common design problems and solutions
– First used in architecture (Christopher Alexander)
Design Patterns
• Not too general & 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.”
– E.g. BEER HALL is part of a CENTER FOR PUBLIC LIFE…
– E.g. BEER HALL needs spaces for groups to be alone…
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 (principles) & not too specific (guidelines) – designer will specialize to their needs
• Patterns let designers focus on the hard, unique problems to their design situation – every real design will have many of these
PROCESS FUNNEL (H1)
• 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
PROCESS FUNNEL (H1)
• 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
PROCESS FUNNEL (H1) Related Patterns
(A10) Web Apps
(K5) High-Viz Action Buttons
(A1) E-Commerce (A11) Intranets
(H1) Process Funnel
(K12) Preventing Errors
(H8) Context-Sensitive Help (I2) Above the Fold
(K13) Meaningful Error Messages
(H6) Floating Windows
Patterns Offer the Best of Principles, Guidelines, & Templates
• Patterns help you get the details right, without over-constraining your solution – unlike principles, patterns not too general, so will apply to your
situation
– unlike guidelines, patterns discuss tradeoffs, show good examples, & tie to other patterns
– unlike style guides, patterns not too specific, so can still be specialized
– unlike templates, patterns illustrate flows among different pages
Format of Web Design Patterns
• Pattern Name & Number
• Exemplar
• Background
• Problem Statement
• Forces
• Solution Summary
• Solution Diagram
• Related Patterns
April 1, 2008 CSE 490 L - Spring 2008
Bus Stops Solution
Diagram
Related
Patterns
Solution
Summary
35