1. 1 Web Site Design Customer Centered Design Principles Patterns and Processes Dr. Carl Rebman

2. 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. 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. 4 Other types of design User centered Company centered design Technology centered design Designer centered design

5. 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. 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. 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. 8 Techniques for knowing your customers Task/customer analysis Build scenarios –Write a storyboard Observe your customers Interview Survey Focus groups

9. 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. 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. 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. 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. 13 Process Funnel (H1) Problem – Need a way to help people complete highly specific stepwise tasks Desktop Solution

14. 14 Process Funnel (H1) Web Solution –“Next” to step forward –“Back” to undo

15. 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? … Screen 1 (Step 1) Screen 2 (Step 2) Screen N (Step N)

16. 16 Process Funnel (H1) Problem – How much longer? Solution – Progress bars

17. 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. 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. 19 Solution Diagram Process Funnel (H1)

20. 20 Basic Web Design Let's take a closer look page by page

21. 21 Related Patterns Process 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. 22

23. 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. 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. 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. 26 Above the Fold –Most important info visible without scrolling Above the Fold –Most important info visible without scrolling

27. 27

28. 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. 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. 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. 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. 32 The Fold –Hmm, what’s below here? The Fold –Hmm, what’s below here?

33. 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. 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. 35

36. 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. 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. 38 Cross-selling –Possibly a pleasant surprise –Impulse buy Cross-selling –Possibly a pleasant surprise –Impulse buy

39. 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. 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. 41

42. 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. 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. 44

45. 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. 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. 47 Quick-Flow Checkouts

48. 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. 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. 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. 51 The End Now lets go back and make some good sites