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

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

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 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 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 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 Use Cases

8 Site Diagram

9

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

12

13

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

16

17

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

20

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 page Show shipping costs (example) Provide product comparison tool (eMarketer, 2001) (example) Include expert product reviews and allow users to enter reviews (example)

22

23

24

25

26

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 address, password, permission to 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 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

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

32

33

34

35

36 Checkout (continued) Provide order confirmation on site and via 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 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...

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

41

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 References Agrawal, V., Arjona, L. D., & Lemmens, R. (2001). E-performance: The path to rational exuberance. The McKinsey Quarterly [On-line], 1. Available: 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: BizRate (2000, October 23). 78% of online shoppers abandon shopping carts according to BizRate survey. BizRate press release [On-line]. Available: Charron, C., Bass, B., O’Connor, C., & Aldort, J. (1998, July). Making users pay. Forrester Report [On-line]. Available: Cohen, J., & Thompson, M. J. (1999, February). Mass appeal. The Standard [On-line]. Available:

44 References CyberAtlas (1999, February 25). Online stores lacking. E-tailers should follow lead of offline shops [On-line]. Available: eMarketer (2001, March 12). Turning shoppers on(line). eMarketer [On- line]. Available: 312_pwc_search_shop.html 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: Census Bureau (P70-61). Nielsen, J. (1994). Response times: The three important limits. In J. Nielsen, Usability Engineering (pp ). San Francisco: Morgan Kaufmann. Available:

45 References Nielsen, J. (1997). The need for speed [On-line]. Available: Nielsen, J. (1999). Web research: Believe the data [On-line]. Available: html html Nielsen, J. (2001, July). Tagline blues: What’s the site about? [On-line]. Available: Nielsen, J., & Tahir, M. (2001, February). Building sites with depth. In webtechniques [On-line] 2001(2). Available: Ragus, D. (2000). Best practices for designing shopping cart and checkout interfaces [On-line]. Available: Rehman, A. (2000, October 16). Effective e-checkout design. ZDNet/Creative Good [On-line]. Available: ,00.html ,00.html

46 References Reichheld, F. F., & Schefter, P. (2000, July-August). E-loyalty: Your secret weapon on the Web. Harvard Business Review, 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: erce.html erce.html Thompson, M. J. (1999, August 9). How to frustrate Web surfers. Industry Standard [On-line]. Available: Seminerio, M. (1998, September 10). Study: One in three experienced surfers find online shopping difficult. In Week [On-line]. Available:

47 References Stanley, J., McCarthy, J. C., & Sharrard, J. (2000, May). The Internet’s privacy migraine [On-line]. Available: Sullivan, T. (1998). The need for speed. Site optimization strategies. All Things Web [On-line]. Available: Tedeschi, B. (1999, August 30). Good Web site design can lead to healthy sales. The New York Times e-commerce report [On-line]. Available: 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 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: html