Download - 1 Web Site Design Customer Centered Design Principles Patterns and Processes Dr. Carl Rebman
1
Web Site Design
Customer Centered Design
Principles
Patterns and Processes
Dr. Carl Rebman
2
Evolution of web design
• First generation– Build it and they will come
• Second generation– Advertise that you do it and they will
come
• Third generation– Customer centered design• Shifting to constructing sites that add
positive value and experience
3
Key Issues of Customer centered design
• First, why not customers and not users?
• Main issues– Ease of use– Performance– Content– Satisfaction– Brand value
4
Other types of design
• User centered
• Company centered design
• Technology centered design
• Designer centered design
5
Myths of CCD
• Good design is just common sense• Only experts can create good design• Web interfaces can be redesigned
right before launch• Good design takes too long and
costs too much• Good design is just cool graphics• Web interface guidelines will guide
you to a good design
6
More myths of CCD
• Customers can always rely on documentation and help
• Market research takes care of understanding all customer needs
• Quality assurance groups make sure that web sites work well.
7
Principles
• Knowing your customers helps you choose patterns
• You are not your customers• Understand the task, technology, people
and the overall organizational and social issues
• Understand you customers as people• Your customers are different but they are
also the same• Understand your customers task
8
Techniques for knowing your customers
• Task/customer analysis
• Build scenarios–Write a storyboard
• Observe your customers
• Interview
• Survey
• Focus groups
9
Iterative Design
• Design• Prototype• Evaluation• Why use it?– Helps you find problems while they are cheap
and easy to fix– Ensures you are building a site that has the
features that people want– Ensures that you are building those features in
a way that your customers can use
10
Design principles
• Be consistent throughout• Offer informative feedback• Rely on recognition over recall• Help customers prevent and recover from
errors• Support customer control and freedom• Help customers use accelerators• Strive for aesthetic and minimalist design
11
Process for Web Development
• Discover– Deliverables• Customer & business analysis document• Specification document
• Exploration– Deliverables• Site maps, storyboard, schematics
• Refinement– Deliverables• Site maps, storyboard, schematics
12
Process continued
• Production– Deliverables
• Design document• Interactive prototype• Tech specs• Design guidelines• Web page template
• Implementation– Deliverables
• Completed web site• Maintenance• Test plan document• Upgrade
• Launch• Maintenances
– Deliverables• Periodic web site metrics• Bug reports• Periodic backups
13
Process Funnel (H1)
• Problem – Need a way to help people complete highly specific stepwise tasks
• Desktop Solution
14
Process Funnel (H1)
• Web Solution– “Next” to step
forward– “Back” to undo
15
Process Funnel (H1)
• Some problems– How much longer
before I finish?–Why are there ads
and nav bars?–What if users need
extra help?
16
Process Funnel (H1)
• Problem – How much longer?
• Solution – Progress bars
17
Process Funnel (H1)
• Problem – Why ads and nav bars?
• Solution – Remove them and present minimal interface
• New problem – What site?
• Solution – Keep the logo, layout, colors
18
Process Funnel (H1)
• Problem – What if users need extra help?
• Solution – Use pop-up windows because we want to keep people in the funnel
19
Solution DiagramProcess Funnel (H1)
20
Basic Web Design
• Let's take a closer look page by page
21
Related PatternsProcess Funnel (H1)
(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
22
23
• What site is this?– Logo in top-left corner
denotes the site– Another logo at top-right
to reinforce
• What site is this?– Logo in top-left corner
denotes the site– Another logo at top-right
to reinforce
24
• What kind of site is this?– Shopping cart icon– Tab row content– Categories on left– Prices in content area
• What kind of site is this?– Shopping cart icon– Tab row content– Categories on left– Prices in content area
25
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– All links are clear
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– All links are clear
26
• Above the Fold– Most important info
visible without scrolling
• Above the Fold– Most important info
visible without scrolling
27
28
• What site am I at?– Logo in upper-left
reinforces brand, can click to go to home
– Same font, layout, color scheme also reinforces
• What site am I at?– Logo in upper-left
reinforces brand, can click to go to home
– Same font, layout, color scheme also reinforces
29
• Where am I in the site?– “Home > Music” are
location breadcrumbs– Tab row says “Music”– Album cover, “Product
Highlights”, and CD cover
• Where am I in the site?– “Home > Music” are
location breadcrumbs– Tab row says “Music”– Album cover, “Product
Highlights”, and CD cover
30
• What can I do?– See more info about this
album– “Buy!” “Buy!” “Buy!”– See more info about
specific CDs
• What can I do?– See more info about this
album– “Buy!” “Buy!” “Buy!”– See more info about
specific CDs
31
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
32
• The Fold– Hmm, what’s below here?
• The Fold– Hmm, what’s below here?
33
• Impulse buy– Recommended products
• About this album• Lots of unused
whitespace• Still more info below…
• Impulse buy– Recommended products
• About this album• Lots of unused
whitespace• Still more info below…
34
• Is this product any good?– Editorial reviews– Customer reviews
• Some important info below the fold here– Nothing critical though
• Is this product any good?– Editorial reviews– Customer reviews
• Some important info below the fold here– Nothing critical though
35
36
• What site am I at? – Logo in upper-left– Colors, layout, font
• What site am I at? – Logo in upper-left– Colors, layout, font
37
• Where am I in the site?– Last link clicked was
“Buy!”– “Shopping Cart” and
“Proceed to Checkout” reinforce that this is “the right page”
• Where am I in the site?– Last link clicked was
“Buy!”– “Shopping Cart” and
“Proceed to Checkout” reinforce that this is “the right page”
38
• Cross-selling– Possibly a pleasant
surprise– Impulse buy
• Cross-selling– Possibly a pleasant
surprise– Impulse buy
39
• What am I going to buy?– Easy to remove– Easy to move to wishlist
• How much will it cost?– Shipping costs there, no
nasty surprises
• What am I going to buy?– Easy to remove– Easy to move to wishlist
• How much will it cost?– Shipping costs there, no
nasty surprises
40
• What can I do?– “Proceed to Checkout”
action button– Visually distinct– 3D, looks clickable–Repeated above and
below the fold
• What can I do?– “Proceed to Checkout”
action button– Visually distinct– 3D, looks clickable–Repeated above and
below the fold
41
42
• What if I don’t have a User ID?• What if I forgot my
password?
• What if I don’t have a User ID?• What if I forgot my
password?
43
• Error message– Small, hard to see– Too far away from where
people will be looking– Page looks too similar to
last page (did anything happen?)
• Error message– Small, hard to see– Too far away from where
people will be looking– Page looks too similar to
last page (did anything happen?)
44
45
• What site?– Logo, layout, color, fonts
• Where in site?– Checkout, step 1 of 3– “Choose shipping
address”
• What site?– Logo, layout, color, fonts
• Where in site?– Checkout, step 1 of 3– “Choose shipping
address”
46
• Note what’s different– No tab rows– No impulse buys– Only navigation on page
takes you to next step
• This is a Process Funnel– Extraneous info and links
removed to focus users
• Note what’s different– No tab rows– No impulse buys– Only navigation on page
takes you to next step
• This is a Process Funnel– Extraneous info and links
removed to focus users
47
Quick-Flow Checkouts
48
Quick-Flow Checkouts
• Last step of process– Step 3, “Place Order”– “Place my order” button
• Two buttons for fold
• Last step of process– Step 3, “Place Order”– “Place my order” button
• Two buttons for fold
49
Quick-Flow Checkouts
• No nasty surprises– Can see order– Total price is same as
shopping cart
• No nasty surprises– Can see order– Total price is same as
shopping cart
50
Quick-Flow Checkouts• Easy to change shipping and billing• Easy to save this info– Easier to setup info in
context of specific task instead of setup first
– Clearer to users why this info is needed in former
• Easy to change shipping and billing• Easy to save this info– Easier to setup info in
context of specific task instead of setup first
– Clearer to users why this info is needed in former
51
The End
• Now lets go back and make some good sites