Designing E-commerce User Interfaces

Lawrence NajjarLawrence_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

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

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

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

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

<a href="#main"><img alt="Skip to main content" height="1" width="1" border="0" src="//www.ibm.com/i/c.gif"/></a>. . .<a name="main"><!--Main Content--></a> . . .

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: 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

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=88

Charron, C., Bass, B., O’Connor, C., & Aldort, J. (1998, July). Making users pay. Forrester Report [On-line]. Available: 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

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

eMarketer (2001, March 12). Turning shoppers on(line). eMarketer [On-line]. Available: http://www.emarketer.com/estatnews/estats/ecommerce_b2c/20010312_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

45

References

Nielsen, J. (1997). The need for speed [On-line]. Available: 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

Nielsen, J. (2001, July). Tagline blues: What’s the site about? [On-line]. Available: http://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/

Ragus, D. (2000). Best practices for designing shopping cart and checkout interfaces [On-line]. Available: 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,2638874-1,00.html

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/30commerce.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

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

47

References

Stanley, J., McCarthy, J. C., & Sharrard, J. (2000, May). The Internet’s privacy migraine [On-line]. Available: 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

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/30commerce.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: http://news.com.com/2100-1017-935215.html