1. Web Design Patterns (E-Commerce) IS 485, Professor Matt Thatcher

2. 2 Hall of Shame or Hall of Fame? l http://www.balthaser.com/

3. 3 Hall of Shame or Hall of Fame?

4. 4 Hall of Shame! l no Clear First Read (I3)! l links to basic areas? –doesn’t make navigation easy l bleeding-leading edge tech? –doesn’t download fast or at all!

5. 5 And It’s Look Recently

6. 6 Agenda l Review l Personalization –Content Modules (D2) –Personalized Content (D4) l Writing on the Web –Inverse Pyramid Writing Style (D7) l Shopping on the Web –Shopping Cart (F3) –Quick-Flow Checkout (F1)

7. 7 Review l Web design process –discovery, exploration, refinement, production, implementation, and maintenance l Design patterns allow us to reuse? – design knowledge l Previously used in? –architecture & software engineering l Web design patterns are new & evolving –example: Homepage »problem u if it isn’t compelling, they won’t return »solutions u build your site identify and brand u make a positive first impression u seduce with content u make navigation easy u make it download fast u make it accessible

8. 8 Image Headline Relate +Promote High-Level Browse Categories Search Logo + value prop Browse Fold

9. 9 Content Modules (D2) Solution Diagram Content Database Admin Page Customer’s Current Location Admin Page Admin Page Template Targeted Content

10. 10 Content Database (Stored Data) l ArticleNumber l Headline l Blurb l PubDate l Author l Copyright l ContentHome l ContentPosition l NumPages l PageTitle1 l Body1 l Image 1 l PageTitle2 l ….. l Related Articles l Related Content l Related Links l...

11. 11 Personalized Content (D4) l Problem –web sites would like to have visitors return often »to buy, see ads, use services, etc. –if your content isn’t changing & personal, users less likely to return or stay –personalized info is more useful to people than generic info. Engineering a dynamic site is difficult if the basic structures & designs are not in place l Solution –personalization »a home page that is customized for each visitor

12. 12

13. 13 Personalized Content (D4) Solution Diagram Content Database Admin Page Customer’s Current Location + Customer Profile Database Page Template 2 Personalization Form aggregate + individual profile 1 New Visitors 3 Personalized Page

14. 14 How to Personalize Your Page l Don’t force people to personalize your site before they can use it –draw users in by providing basic, valuable content that can be personalized later l Invite customers to personalize from a menu of options –backgrounds and areas of interest l Collect by “interviews” and giving people the ability to “edit” their interests l “Deduce” what other things might interest your customers by tracking areas of the site they visit and scoring the information l Categorize the content and map it (with the targeting engine) to the people who find that content useful l Structure the site into page templates and content modules that receive the content from the targeting engine

15. 15

16. 16 How to Personalize Your Page l Gather information from guest profiles & use it to build a site that –holds their interest –looks customized just for them l Visitors will need to trust you –to give this information directory/indirectly –must use for their benefit only l Four ways to collect information –edit, interview, deduce, collaborative filter

17. 17 Editing Personalization Info l Visitors click on buttons to make selections from lists –weather cities –news sources –stocks to follow –sports to follow –…–… l Include Content Modules (D2) based directly on selections l Drawbacks to this approach? –can get tedious if you have to do it repeatedly –users won’t spend time entering info if little benefit my.yahoo.com is a good example of editing for personalization

18. 18

19. 19 Interviewing for Personalization Info l Visitors answer multiple choice questions l Update guest profile l Include Content Modules (D2) based on one or more scoring methods l Allow the option of continuing the personalization process over time

20. 20

21. 21

22. 22

23. 23 Deduction for Personalization Info l Watch visitors behavior –Amazon tracks the books visitors order & later offers similar books l Update guest profile based on customer’s own actions l Select Content Modules (D2) based on scoring method

24. 24

25. 25 Note Effective Use of Pop-ups

26. 26 Collaborative Filtering for Personalization Info l First provide popular content based on all visitors l Provide customized Content Modules (D2) based on similar guest profiles –customer starts to fit into a customer “group” –use correlation of profiles to determine areas of interest –“people who bought and liked this also tended to buy and like this”

27. 27 Scoring Methods to Match Content to Audience l Rank –show ordered list of content l Top rank –content of only the top few scores shown l Threshold score –show all content over a particular score l Required attributes –show all content that is on “NCAA Sports” l Combination –e.g., job site might use top rank & required attributes to show best jobs a person is qualified for

28. 28 Inverse Pyramid Writing Style (D7) l Problem –25% slower to read from a computer screen –web surfers want immediate gratification or they will leave – they want web pages that are »delivered quickly »easy to use »quick to skim l Solution –give the conclusions first –add detail later for those that want it

29. 29 This is the short blurb describing the article This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing w This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. I am in love with XXX To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does this work at all? I don’t know. What is love? What is the good life? What is, and is not? That which is, is. The world is all that exists. Nothing unreal exists, metaphysics law #1. This is some the the the the nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is Is there a god? Are we a quantum accident? Will we ever know? Are there questions that should never be asked? What is the nature of goodness? Why are we so mean to each other? How can we be so cruel to one another? This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical What is good in life, he asks? That is a question we may never have an answer to. is some nonsensical text This is some nonsensical text This is some Most important info Less important info...... Title Short Blurbs Summaries Overviews Teasers Background Information Supporting Details Long Quotes Inverse Pyramid Writing Inverse Pyramid Writing Style (D7)

30. 30 Journalists Use Inverted Pyramid from www.nytimes.com

31. 31

32. 32 Using Bullets

33. 33 Basic E-Commerce (F) l Problem? –how to allow customers to purchase multiple items in one transaction l Solution –use shopping cart metaphor to keep track of items before customer finalizes the purchase

34. 34 Product Details Shopping Cart Shipping Billing Summary Sign-In or Guest Confirmation

35. 35 Clean Product Details (F2) l Create a Page Template for product detail pages l Keep key elements above the fold –standard navigation and shopping tools –small, clickable product thumbnail –short, needs-oriented description –product price –product configuration button –overall ratings of the product, if appropriate –delivery time frame –product item number –Add to Cart action button and Wish List link –links to more detailed information  e.g., product reviews, product specs, product comparison tools

36. 36 Clean Product Details (F2) l Keep less important information below the fold –full product description –in-depth expert and customer reviews (highlight best products and allow customers to rate) –related products and accessories –product comparisons

37. 37

38. 38

39. 39 very cool

40. 40 Fold

41. 41 How to Apply Shopping Carts (F3) l Make available on each page and easy to add items from product pages? –make it easy for people to buy! –seems obvious, but many sites don’t do it

42. 42 How to Apply Shopping Carts l Make available on each page and easy to add items from product pages?

43. 43 How to Apply Shopping Carts l Provide detailed info on each item in cart a way to remove item quantity w/ a way to change price name w/ link to detail short description availability

44. 44 How to Apply Shopping Carts l Provide info about all items in cart –sub-totals –shipping, taxes, other charges (if known) –prevent unpleasant surprises

45. 45 How to Apply Shopping Carts l Provide a prominent link to CHECKOUT

46. 46 How to Apply Shopping Carts l Have a link to let people continue shopping

47. 47 How to Apply Shopping Carts l Don’t let unavailable things be added –here’s Martha’s old site - what happened?

48. 48

49. 49

50. 50

51. 51

52. 52 Product Details Shopping Cart Shipping Billing Summary Sign-In or Guest Confirmation

53. 53 Shipping AddressNew Address -------------------- EditUse this Address -------------------- Use this Address Checkout Step: Shipping > Billing > Summary Minimal Top-Level Navigation Shopping Cart Privacy Policy

54. 54 Shipping Method Checkout Step: Shipping > Billing > Summary Minimal Top-Level Navigation Shopping Cart Option 1 ------------------------- Option 2 ------------------------- Option 3 ------------------------- continue Privacy Policy

55. 55 Billing InformationNew Billing Information -------------------- EditUse this Information -------------------- use my shipping address -------------------- Use this Information Checkout Step: Shipping > Billing > Summary Minimal Top-Level Navigation Shopping Cart Privacy Policy

56. 56 Billing To: Place Order -------------------- Change -------------------- Checkout Step: Shipping > Billing > Summary Minimal Top-Level Navigation Shopping Cart (with subtotal, tax, shipping, total) Privacy Policy Shipping To: Change Place Order -------------------- Shipping Method: Change

57. 57

58. 58 Order Confirmation l Thank customer l Highlight Order Number and Date l Show all key elements from Order Summary l Make the page printable l Encourage customers to continue shopping

59. 59 Summary l Personalization. Why? –if content isn’t fresh, visitors won’t return –four ways to collect information? »edit, interview, deduce, collaborative filter l Key idea to inverse-pyramid writing style? –start with the conclusions & add details below l Basics of e-commerce –Quick-Flow Checkout (F1)