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