1. Designing E-commerce User Interfaces Lawrence Najjar Lawrence_Najjar@yahoo.com Presented at the Usability Professionals Association – Austin meeting on November 13, 2003. Based on a chapter to be published in the “Handbook of Human Factors in Web Design”

2. 2 Outline Why worry about e-commerce usability? Design process Design suggestions

3. 3 Why is E-commerce Important? Online sales in US are 5% of retail sales and increasing (Wolverton, 2002) US e-commerce sales increased 40% from last year (eMarketer, 2003a) European e-commerce sales may increase as much as 67% this year (Weaver, 2003) UN predicts that 18% of all purchases worldwide will be performed online by 2006 (UNCTAD, 2002)

4. 4 Why Worry about E- commerce Usability? Up to 50% of potential sales lost because shoppers cannot find what they want (Cohen & Thompson, 1999; Seminerio, 1998) 83% of shoppers left e-commerce sites due to poor navigation and slow downloads (Thompson, 1999) 78% of shoppers abandoned their online shopping carts (BizRate, 2000)

5. 5 Why Improve Usability? After improving e-commerce usability: IBM increased sales by 400% (Tedeschi, 1999) DEC increased revenue by 80% (Wixon & Jones, 1992) Liz Claiborne’s Elisabeth.com tripled rate at which lookers became buyers (Tedeschi, 2002) Dell increased daily online purchases by $33 million (Black, 2002)

6. 6 E-commerce Design Process 1.Develop business strategy 2.Define users 3.Define functional requirements 4.Write use cases (example) 5.Develop site structure diagrams (example) 6.Build interactive mockups (example) 7.Test usability of interactive mockups 8.Write functional design specification 9.Perform acceptance tests

7. 7 Use Cases

8. 8 Site Diagram

9. 9

10. 10 Page Format Design page to download in less than 10 seconds (40K max) (Lamers, 1996; Nielsen, 1994, 1997; Sacharow & Mooradian, 1999; Sullivan, 1998) Avoid scrolling, especially home page Put user interface elements in familiar locations (Bernard, 2001; CyberAtlas, 1999) (example) Put sign-in entry fields on home page (example) Show greeting to signed-in members (example) Include a tag line (Nielsen, 2001) (example) Place shopping cart summary on every page (CyberAtlas, 1999; Ragus, 2000) (example) Include links for sign-in, contact us, privacy policy, security info, and referral (Reichheld & Schefter, 2000; Stanley, McCarthy, & Sharrard, 2000) (example)

11. 11

12. 12

13. 13

14. 14 Navigation Make nav simple, intuitive, and consistent Tell users where they are, how they got there, how to get back, where else to go (Fleming, 1998) Provide global and local nav controls (example) Use breadcrumbs (example) Allow users to get to any product in 5 clicks or less (Tracy, 2000) Provide specialized browse functions (example)

15. 15

16. 16

17. 17

18. 18 Navigation (continued) Put search entry field on every page Design search to put users’ searched-for hit on first page of search results Allow users to search by product name, product category, brand, item number, and price (example) On search results page, show search terms and allow users to perform another search, refine results, and sort results (example)

19. 19

20. 20

21. 21 Catalog Let users directly enter catalog (bad example) Organize catalog into familiar sections Allow user to sort products in a section (Nielsen & Tahir, 2001) (example) Provide link to put product in wish list and to e-mail page Show shipping costs (example) Provide product comparison tool (eMarketer, 2001) (example) Include expert product reviews and allow users to enter reviews (example)

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27 Registration The more streamlined registration process is, the more likely users will register and buy (Agrawal, Arjona, & Lemmens, 2001; Sacharow & Mooradian, 1999) Require only e-mail address, password, permission to e-mail promotions, and permission to leave cookie (Charron, Bass, O’Connor, & Aldort, 1998) Get other user info during checkout and via periodic, optional, one-question, multiple-choice popup surveys (Nielsen, 1999) Allow user to edit and delete registration Suggest registration at end of checkout

28. 28 Checkout Checkout is biggest reason people cannot buy from site (Rehman, 2000) On shopping cart page (example), show: –Entry fields for quantities –Hyperlinked product names –Prices –Dropdown list of shipping choices and costs –Order subtotal, including shipping + taxes if user is registered –Links for removing products and moving products into wish list –Button to refresh the page –Links to return to shopping and checkout

29. 29

30. 30 Checkout (continued) Don’t require users to register to check out (Rehman, 2000 ) Show link or fields for members to sign in (example) For signed-in member, fill in checkout fields Put checkout fields on single, vertically scrollable page (example) Provide obvious links to privacy policy, security policies, delivery guarantees, return policies, and customer service guarantees (Agrawal, Arjona, & Lemmens, 2001) If possible, provide option for user to pick up order at brick-and-mortar store (example) Provide complete, read-only order summary with “Change Order” button Save signed-in members’ abandoned shopping carts

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36 Checkout (continued) Provide order confirmation on site and via e-mail that includes (Ragus, 2000) –Order number –Instructions for canceling order –Link for tracking order and shipment –Customer support info –Benefits of membership and link to join

37. 37 Accessibility 20% of Americans have disability (McNeil, 1997) Accessibility not required for e-commerce sites Provide equivalent alternatives for visual and auditory content Use relative fonts Do not use color, font style, or font size alone to provide info Provide way to skip to main content (skip nav) (example) Allow keyboard-only access Provide access when style sheets turned off Use logical tab order Evaluate accessibility

38. 38...

39. 39 Internationalization Online shoppers 4 times more likely to buy from site in their language (Vickers, 2000) Use local language, formality, colors, symbols, graphics, currency, taxes, date format Use images carefully Allow user to change language via text in that language (e.g., “España,” “Español”) (examples) Create separate sites Perform international usability tests

40. 40

41. 41

42. 42 Conclusion E-commerce usability is important Create an easy-to-use site by using: –Efficient user interface design process –Proven detailed user interface designs

43. 43 References Agrawal, V., Arjona, L. D., & Lemmens, R. (2001). E-performance: The path to rational exuberance. The McKinsey Quarterly [On-line], 1. Available: http://www.mckinsey.com/http://www.mckinsey.com/ Bernard, M. (2001, Winter). Developing schemas for the location of common Web objects. Usability News. Software Usability Research Laboratory, Wichita State University [On-line]. Available: http://wsupsy.psy.wsu.edu/surl/usabilitynews/3W/web_object.htm http://wsupsy.psy.wsu.edu/surl/usabilitynews/3W/web_object.htm BizRate (2000, October 23). 78% of online shoppers abandon shopping carts according to BizRate survey. BizRate press release [On-line]. Available: http://www.bizrate.com/content/press/release.xpml?rel=88http://www.bizrate.com/content/press/release.xpml?rel=88 Charron, C., Bass, B., O’Connor, C., & Aldort, J. (1998, July). Making users pay. Forrester Report [On-line]. Available: http://www.forrester.com/ http://www.forrester.com/ Cohen, J., & Thompson, M. J. (1999, February). Mass appeal. The Standard [On-line]. Available: http://www.thestandard.com/article/display/0,1151,4927,00.html http://www.thestandard.com/article/display/0,1151,4927,00.html

44. 44 References CyberAtlas (1999, February 25). Online stores lacking. E-tailers should follow lead of offline shops [On-line]. Available: http://cyberatlas.internet.com/market/retailing/taylor.html http://cyberatlas.internet.com/market/retailing/taylor.html eMarketer (2001, March 12). Turning shoppers on(line). eMarketer [On- line]. Available: http://www.emarketer.com/estatnews/estats/ecommerce_b2c/20010 312_pwc_search_shop.html http://www.emarketer.com/estatnews/estats/ecommerce_b2c/20010 312_pwc_search_shop.html Fleming, J. (1998). Web navigation: Designing the user experience. Sebastopol, CA: O’Reilly. Lamers (1996, February 27). Personal communication. McNeil, J. M. (1997, August). Current population reports: Americans with disabilities: 1994-95. Census Bureau (P70-61). Nielsen, J. (1994). Response times: The three important limits. In J. Nielsen, Usability Engineering (pp. 115-163). San Francisco: Morgan Kaufmann. Available: http://www.useit.com/papers/responsetime.html http://www.useit.com/papers/responsetime.html

45. 45 References Nielsen, J. (1997). The need for speed [On-line]. Available: http://www.useit.com/alertbox/9703a.html http://www.useit.com/alertbox/9703a.html Nielsen, J. (1999). Web research: Believe the data [On-line]. Available: http://www.useit.com/alertbox/99 0711.html http://www.useit.com/alertbox/99 0711.html Nielsen, J. (2001, July). Tagline blues: What’s the site about? [On-line]. Available: http://www.useit.com/alertbox/20010722.htmlhttp://www.useit.com/alertbox/20010722.html Nielsen, J., & Tahir, M. (2001, February). Building sites with depth. In webtechniques [On-line] 2001(2). Available: http://www.webtechniques.com/ http://www.webtechniques.com/ Ragus, D. (2000). Best practices for designing shopping cart and checkout interfaces [On-line]. Available: http://www.dack.com/web/shopping_cart.html http://www.dack.com/web/shopping_cart.html Rehman, A. (2000, October 16). Effective e-checkout design. ZDNet/Creative Good [On-line]. Available: http://www.zdnet.com/ecommerce/stories/evaluations/0,10524,26388 74-1,00.html http://www.zdnet.com/ecommerce/stories/evaluations/0,10524,26388 74-1,00.html

46. 46 References Reichheld, F. F., & Schefter, P. (2000, July-August). E-loyalty: Your secret weapon on the Web. Harvard Business Review, 105-113. Sacharow, A., & Mooradian, M. (1999, March). Navigation: Toward intuitive movement and improved usability. Jupiter Communications. Tedeschi, B. (1999, August 30). Good Web site design can lead to healthy sales. New York Times e-commerce report [On-line]. Available: http://www.nytimes.com/library/tech/99/08/cyber/commerce/30comm erce.html http://www.nytimes.com/library/tech/99/08/cyber/commerce/30comm erce.html Thompson, M. J. (1999, August 9). How to frustrate Web surfers. Industry Standard [On-line]. Available: http://www.thestandard.com/metrics/display/0,1283,956,00.html http://www.thestandard.com/metrics/display/0,1283,956,00.html Seminerio, M. (1998, September 10). Study: One in three experienced surfers find online shopping difficult. In Inter@ctive Week [On-line]. Available: http://www.zdnet.com/intweek/quickpoll/981007/981007b.html http://www.zdnet.com/intweek/quickpoll/981007/981007b.html

47. 47 References Stanley, J., McCarthy, J. C., & Sharrard, J. (2000, May). The Internet’s privacy migraine [On-line]. Available: http://www.forrester.com/http://www.forrester.com/ Sullivan, T. (1998). The need for speed. Site optimization strategies. All Things Web [On-line]. Available: http://www.pantos.org/atw/35305.html http://www.pantos.org/atw/35305.html Tedeschi, B. (1999, August 30). Good Web site design can lead to healthy sales. The New York Times e-commerce report [On-line]. Available: http://www.nytimes.com/library/tech/99/08/cyber/commerce/30comm erce.html Tracy, B. (2000, August 16). Easy net navigation is mandatory – Viewpoint: Online users happy to skip frills for meat and potatoes. Advertising Age, p. 38. Vickers, B. (2000, November 22). Firms push to get multilingual on the Web. The Wall Street Journal, p. B11A.

48. 48 References Wixon, D., & Jones, S. (1992). Usability for fun and profit: A case study of the design of DEC RALLY version 2. Internal report, Digital Equipment Corporation. Cited in Karat, C., A business case approach to usability cost justification. In Bias, R. G., & Mayhew, D. J. (1994). Cost-justifying usability. San Diego: Academic Press. Wolverton, T. (2002, June 11). Online retailers continue strong growth. CNET News.com [On-line]. Available: http://news.com.com/2100- 1017-935215.html