Transcript design of sites

Web Site Design
Customer Centered Design
Principles
Patterns and Processes
Dr. Carl Rebman
1
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
2
Key Issues of Customer centered design
• First, why not customers and not
users?
• Main issues
– Ease of use
– Performance
– Content
– Satisfaction
– Brand value
3
Other types of design
•
•
•
•
User centered
Company centered design
Technology centered design
Designer centered design
4
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
5
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.
6
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
7
Techniques for knowing your customers
• Task/customer analysis
• Build scenarios
– Write a storyboard
•
•
•
•
Observe your customers
Interview
Survey
Focus groups
8
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
9
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
10
Process for Web Development
• Discover
– Deliverables
• Customer & business analysis document
• Specification document
• Exploration
– Deliverables
• Site maps, storyboard, schematics
• Refinement
– Deliverables
• Site maps, storyboard, schematics
11
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
12
Process Funnel (H1)
• Problem – Need a way to help people
complete highly specific stepwise tasks
• Desktop Solution
13
Process Funnel (H1)
• Web Solution
– “Next” to step
forward
– “Back” to undo
14
Process Funnel (H1)
• Some problems
– How much longer
before I finish?
– Why are there ads
and nav bars?
– What if users need
extra help?
15
Process Funnel (H1)
• Problem – How much longer?
• Solution – Progress bars
16
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
17
Process Funnel (H1)
• Problem – What if users need extra help?
• Solution – Use pop-up windows because
we want to keep people in the funnel
18
Solution Diagram
Process Funnel (H1)
19
Basic Web Design
• Let's take a closer look page by page
20
Related Patterns
Process Funnel (H1)
(A1) E-Commerce
(A10) Web Apps
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(K3) Tab Rows
(K4) Action Buttons
(H8) Context-Sensitive Help
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
21
22
• What site is this?
– Logo in top-left corner
denotes the site
– Another logo at top-right
to reinforce
23
• What kind of site is this?
–
–
–
–
Shopping cart icon
Tab row content
Categories on left
Prices in content area
24
• What can I do here?
–
–
–
–
–
Welcome for new visitors
Tab row / Search on top
“Categories”
Prices
All links are clear
25
• Above the Fold
– Most important info
visible without scrolling
26
27
• What site am I at?
– Logo in upper-left
reinforces brand, can
click to go to home
– Same font, layout, color
scheme also reinforces
28
• Where am I in the site?
– “Home > Music” are
location breadcrumbs
– Tab row says “Music”
– Album cover, “Product
Highlights”, and CD cover
29
• What can I do?
– See more info about this
album
– “Buy!” “Buy!” “Buy!”
– See more info about
specific CDs
30
• Can I trust these sellers?
– Who am I buying from?
– Are they reputable?
– What about shipping?
31
• The Fold
– Hmm, what’s below here?
32
• Impulse buy
– Recommended products
• About this album
• Lots of unused
whitespace
• Still more info below…
33
• Is this product any
good?
– Editorial reviews
– Customer reviews
• Some important info
below the fold here
– Nothing critical though
34
35
• What site am I at?
– Logo in upper-left
– Colors, layout, font
36
• Where am I in the site?
– Last link clicked was
“Buy!”
– “Shopping Cart” and
“Proceed to Checkout”
reinforce that this is “the
right page”
37
• Cross-selling
– Possibly a pleasant
surprise
– Impulse buy
38
• 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
39
• What can I do?
– “Proceed to Checkout”
action button
– Visually distinct
– 3D, looks clickable
– Repeated above and
below the fold
40
41
• What if I don’t have a
User ID?
• What if I forgot my
password?
42
• 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?)
43
44
• What site?
– Logo, layout, color, fonts
• Where in site?
– Checkout, step 1 of 3
– “Choose shipping
address”
45
• 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
46
Quick-Flow Checkouts
47
Quick-Flow Checkouts
• Last step of process
– Step 3, “Place Order”
– “Place my order” button
• Two buttons for fold
48
Quick-Flow Checkouts
• No nasty surprises
– Can see order
– Total price is same as
shopping cart
49
• Easy to change shipping
Quick-Flow
and billing
• Easy to save this info
Checkouts
– Easier to setup info in
context of specific task
instead of setup first
– Clearer to users why this
info is needed in former
50
The End
• Now lets go back and make some
good sites
51