Transcript 04-patternsx

Web Design and Patterns
CMPT 281
Outline
• Motivation: customer-centred design
• Web design introduction
• Design patterns
Hall of Shame or Hall of Fame?
• http://www.balthaser.com/
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.”
Good Web Site Design can Lead to Healthy Sales
http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
• After customer-centered redesign
– use of the help button decreased 84%
– sales increased 400 percent
Click and Go
Customer-Centred Design:
“build the right site & build the site right!”
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
Link to home
First-level navigation
Second-level navigation
NAVIGATION BAR (K2)
NAVIGATION BAR (K2)
NAVIGATION BAR (K2)
Best Practices for Designing Interfaces
• Iterative design
Evaluate
Design Patterns
Prototype
• Getting it right the first time is hard
• Need better support for quick turns around loop
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
–
•
Myth 2: Only Experts Create Good Designs
–
•
help is the last resort of a frustrated customer
Myth 8: Market Research Takes Care of Understanding All Customer Needs
–
•
only address how a site is implemented, not features, organization, or flow
Myth 7: Customers Can Always Rely on Documentation & Help
–
•
only one part of the larger picture of what to communicate & how
Myth 6: UI Guidelines Guide you to Good Designs
–
•
CCD can reduce total development time & cost (finds problems early on)
Myth 5: Good Design Is Just Cool Graphics
–
•
assumes site has right features & being built correctly
Myth 4: Good Design Takes Too Long/Costs Too Much
–
•
experts faster, but anyone can understand & use CCD
Myth 3: Interfaces can be Redesigned Before Launch
–
•
why are there so many bad sites?
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…
A Web of Patterns
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
Example
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
• What’s the(H1)
same?
– logo, layout, color, fonts
• What’s different?
– no tab rows
– no impulse buys
– only navigation on page
takes you to next step
PROCESS FUNNEL (H1)
• Problem: What if users need extra help?
Process Tunnel
Floating Windows (H6)
Floating Windows (H6)
PROCESS FUNNEL (H1)
Solution Diagram
PROCESS FUNNEL (H1)
Related Patterns
(A1) E-Commerce
(A10) Web Apps
(A11) Intranets
(H1) Process Funnel
(I2) Above the Fold
(H8) Context-Sensitive Help
(K5) High-Viz Action Buttons
(H6) Floating Windows
(K12) Preventing Errors
(K13) Meaningful Error Messages
Patterns Offer the Best of Principles,
Guidelines, & Templates
• Patterns help you get the details right, without overconstraining 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
Pattern Name and Number
Exemplar
Forces &
Solution
Background
Problem
Statement
Bus Stops
Solution
Diagram
Related
Patterns
Solution
Summary
April 1, 2008
CSE 490 L - Spring 2008
35
Next…
• Complete online tutorials:
– http://www.w3schools.com/html/
– http://www.w3schools.com/css/
• Reading:
– Part 1
– K2 (Navigation Bar) and H6 (Floating Windows)