Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing e-commerce user interfaces


Published on

Describes why e-commerce is important, why we need to worry about e-commerce usability, why we need to improve the usability of e-commerce sites, an e-commerce design process, and detailed examples of good e-commerce user interface design.

Published in: Technology, Business
  • Be the first to comment

Designing e-commerce user interfaces

  1. 1. Designing E-commerce User Interfaces Lawrence Najjar [email_address] 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 <ul><li>Why worry about e-commerce usability? </li></ul><ul><li>Design process </li></ul><ul><li>Design suggestions </li></ul>
  3. 3. Why is E-commerce Important? <ul><li>Online sales in US are 5% of retail sales and increasing (Wolverton, 2002) </li></ul><ul><li>US e-commerce sales increased 40% from last year (eMarketer, 2003a) </li></ul><ul><li>European e-commerce sales may increase as much as 67% this year (Weaver, 2003) </li></ul><ul><li>UN predicts that 18% of all purchases worldwide will be performed online by 2006 (UNCTAD, 2002) </li></ul>
  4. 4. Why Worry about E-commerce Usability? <ul><li>Up to 50% of potential sales lost because shoppers cannot find what they want ( Cohen & Thompson, 1999; Seminerio, 1998) </li></ul><ul><li>83% of shoppers left e-commerce sites due to poor navigation and slow downloads ( Thompson, 1999) </li></ul><ul><li>78% of shoppers abandoned their online shopping carts ( BizRate, 2000) </li></ul>
  5. 5. Why Improve Usability? <ul><li>After improving e-commerce usability: </li></ul><ul><li>IBM increased sales by 400% (Tedeschi, 1999) </li></ul><ul><li>DEC increased revenue by 80% ( Wixon & Jones, 1992) </li></ul><ul><li>Liz Claiborne’s tripled rate at which lookers became buyers (Tedeschi, 2002) </li></ul><ul><li>Dell increased daily online purchases by $33 million (Black, 2002) </li></ul>
  6. 6. E-commerce Design Process <ul><li>Develop business strategy </li></ul><ul><li>Define users </li></ul><ul><li>Define functional requirements </li></ul><ul><li>Write use cases (example) </li></ul><ul><li>Develop site structure diagrams (example) </li></ul><ul><li>Build interactive mockups (example) </li></ul><ul><li>Test usability of interactive mockups </li></ul><ul><li>Write functional design specification </li></ul><ul><li>Perform acceptance tests </li></ul>
  7. 7. Use Cases
  8. 8. Site Diagram
  9. 9.
  10. 10. Page Format <ul><li>Design page to download in less than 10 seconds (40K max) ( Lamers, 1996; Nielsen, 1994, 1997; Sacharow & Mooradian, 1999; Sullivan, 1998 ) </li></ul><ul><li>Avoid scrolling, especially home page </li></ul><ul><li>Put user interface elements in familiar locations (Bernard, 2001; CyberAtlas, 1999 ) (example) </li></ul><ul><li>Put sign-in entry fields on home page (example) </li></ul><ul><li>Show greeting to signed-in members (example) </li></ul><ul><li>Include a tag line (Nielsen, 2001) (example) </li></ul><ul><li>Place shopping cart summary on every page ( CyberAtlas, 1999; Ragus, 2000 ) (example) </li></ul><ul><li>Include links for sign-in, contact us, privacy policy, security info, and referral ( Reichheld & Schefter, 2000; Stanley, McCarthy, & Sharrard, 2000) (example) </li></ul>
  11. 11.
  12. 12.
  13. 13.
  14. 14. Navigation <ul><li>Make nav simple, intuitive, and consistent </li></ul><ul><li>Tell users where they are, how they got there, how to get back, where else to go (Fleming, 1998) </li></ul><ul><li>Provide global and local nav controls (example) </li></ul><ul><li>Use breadcrumbs (example) </li></ul><ul><li>Allow users to get to any product in 5 clicks or less (Tracy, 2000) </li></ul><ul><li>Provide specialized browse functions (example) </li></ul>
  15. 15.
  16. 16.
  17. 17.
  18. 18. Navigation (continued) <ul><li>Put search entry field on every page </li></ul><ul><li>Design search to put users’ searched-for hit on first page of search results </li></ul><ul><li>Allow users to search by product name, product category, brand, item number, and price (example) </li></ul><ul><li>On search results page, show search terms and allow users to perform another search, refine results, and sort results (example) </li></ul>
  19. 19.
  20. 20.
  21. 21. Catalog <ul><li>Let users directly enter catalog (bad example) </li></ul><ul><li>Organize catalog into familiar sections </li></ul><ul><li>Allow user to sort products in a section ( Nielsen & Tahir, 2001) (example) </li></ul><ul><li>Provide link to put product in wish list and to e-mail page </li></ul><ul><li>Show shipping costs (example) </li></ul><ul><li>Provide product comparison tool (eMarketer, 2001) (example) </li></ul><ul><li>Include expert product reviews and allow users to enter reviews (example) </li></ul>
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27. Registration <ul><li>The more streamlined registration process is, the more likely users will register and buy ( Agrawal, Arjona, & Lemmens, 2001; Sacharow & Mooradian, 1999) </li></ul><ul><li>Require only e-mail address, password, permission to e-mail promotions, and permission to leave cookie ( Charron, Bass, O’Connor, & Aldort, 1998) </li></ul><ul><li>Get other user info during checkout and via periodic, optional, one-question, multiple-choice popup surveys (Nielsen, 1999) </li></ul><ul><li>Allow user to edit and delete registration </li></ul><ul><li>Suggest registration at end of checkout </li></ul>
  28. 28. Checkout <ul><li>Checkout is biggest reason people cannot buy from site ( Rehman, 2000) </li></ul><ul><li>On shopping cart page (example), show: </li></ul><ul><ul><li>Entry fields for quantities </li></ul></ul><ul><ul><li>Hyperlinked product names </li></ul></ul><ul><ul><li>Prices </li></ul></ul><ul><ul><li>Dropdown list of shipping choices and costs </li></ul></ul><ul><ul><li>Order subtotal, including shipping + taxes if user is registered </li></ul></ul><ul><ul><li>Links for removing products and moving products into wish list </li></ul></ul><ul><ul><li>Button to refresh the page </li></ul></ul><ul><ul><li>Links to return to shopping and checkout </li></ul></ul>
  29. 29.
  30. 30. Checkout (continued) <ul><li>Don’t require users to register to check out ( Rehman, 2000 ) </li></ul><ul><li>Show link or fields for members to sign in (example) </li></ul><ul><li>For signed-in member, fill in checkout fields </li></ul><ul><li>Put checkout fields on single, vertically scrollable page (example) </li></ul><ul><li>Provide obvious links to privacy policy, security policies, delivery guarantees, return policies, and customer service guarantees ( Agrawal, Arjona, & Lemmens, 2001) </li></ul><ul><li>If possible, provide option for user to pick up order at brick-and-mortar store (example) </li></ul><ul><li>Provide complete, read-only order summary with “Change Order” button </li></ul><ul><li>Save signed-in members’ abandoned shopping carts </li></ul>
  31. 31.
  32. 32.
  33. 33.
  34. 34.
  35. 35.
  36. 36. Checkout (continued) <ul><li>Provide order confirmation on site and via e-mail that includes ( Ragus, 2000 ) </li></ul><ul><ul><li>Order number </li></ul></ul><ul><ul><li>Instructions for canceling order </li></ul></ul><ul><ul><li>Link for tracking order and shipment </li></ul></ul><ul><ul><li>Customer support info </li></ul></ul><ul><ul><li>Benefits of membership and link to join </li></ul></ul>
  37. 37. Accessibility <ul><li>20% of Americans have disability (McNeil, 1997) </li></ul><ul><li>Accessibility not required for e-commerce sites </li></ul><ul><li>Provide equivalent alternatives for visual and auditory content </li></ul><ul><li>Use relative fonts </li></ul><ul><li>Do not use color, font style, or font size alone to provide info </li></ul><ul><li>Provide way to skip to main content (skip nav) (example) </li></ul><ul><li>Allow keyboard-only access </li></ul><ul><li>Provide access when style sheets turned off </li></ul><ul><li>Use logical tab order </li></ul><ul><li>Evaluate accessibility </li></ul>
  38. 38. <a href=&quot;#main&quot;><img alt=&quot;Skip to main content&quot; height=&quot;1&quot; width=&quot;1&quot; border=&quot;0&quot; src=&quot;//;/></a> . . . <a name=&quot;main&quot;><!--Main Content--></a> . . .
  39. 39. Internationalization <ul><li>Online shoppers 4 times more likely to buy from site in their language (Vickers, 2000) </li></ul><ul><li>Use local language, formality, colors, symbols, graphics, currency, taxes, date format </li></ul><ul><li>Use images carefully </li></ul><ul><li>Allow user to change language via text in that language (e.g., “España,” “Español”) (examples) </li></ul><ul><li>Create separate sites </li></ul><ul><li>Perform international usability tests </li></ul>
  40. 40.
  41. 41.
  42. 42. Conclusion <ul><li>E-commerce usability is important </li></ul><ul><li>Create an easy-to-use site by using: </li></ul><ul><ul><li>Efficient user interface design process </li></ul></ul><ul><ul><li>Proven detailed user interface designs </li></ul></ul>
  43. 43. References <ul><li>Agrawal, V., Arjona, L. D., & Lemmens, R. (2001). E-performance: The path to rational exuberance. The McKinsey Quarterly [On-line], 1 . Available: </li></ul><ul><li>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: </li></ul><ul><li>BizRate (2000, October 23). 78% of online shoppers abandon shopping carts according to BizRate survey. BizRate press release [On-line]. Available: </li></ul><ul><li>Charron, C., Bass, B., O’Connor, C., & Aldort, J. (1998, July). Making users pay. Forrester Report [On-line]. Available: </li></ul><ul><li>Cohen, J., & Thompson, M. J. (1999, February). Mass appeal. The Standard [On-line]. Available:,1151,4927,00.html </li></ul>
  44. 44. References <ul><li>CyberAtlas (1999, February 25). Online stores lacking. E-tailers should follow lead of offline shops [On-line]. Available: </li></ul><ul><li>eMarketer (2001, March 12). Turning shoppers on(line). eMarketer [On-line]. Available: </li></ul><ul><li>Fleming, J. (1998). Web navigation: Designing the user experience. Sebastopol, CA: O’Reilly. </li></ul><ul><li>Lamers (1996, February 27). Personal communication. </li></ul><ul><li>McNeil, J. M. (1997, August). Current population reports: Americans with disabilities: 1994-95. Census Bureau (P70-61). </li></ul><ul><li>Nielsen, J. (1994). Response times: The three important limits. In J. Nielsen, Usability Engineering (pp. 115-163). San Francisco: Morgan Kaufmann. Available: </li></ul>
  45. 45. References <ul><li>Nielsen, J. (1997). The need for speed [On-line]. Available: </li></ul><ul><li>Nielsen, J. (1999). Web research: Believe the data [On-line]. Available: 0711.html </li></ul><ul><li>Nielsen, J. (2001, July). Tagline blues: What’s the site about? [On-line]. Available: </li></ul><ul><li>Nielsen, J., & Tahir, M. (2001, February). Building sites with depth. In webtechniques [On-line] 2001 (2). Available: </li></ul><ul><li>Ragus, D. (2000). Best practices for designing shopping cart and checkout interfaces [On-line]. Available: </li></ul><ul><li>Rehman, A. (2000, October 16). Effective e-checkout design. ZDNet/Creative Good [On-line]. Available:,10524,2638874-1,00.html </li></ul>
  46. 46. References <ul><li>Reichheld, F. F., & Schefter, P. (2000, July-August). E-loyalty: Your secret weapon on the Web. Harvard Business Review, 105-113. </li></ul><ul><li>Sacharow, A., & Mooradian, M. (1999, March). Navigation: Toward intuitive movement and improved usability. Jupiter Communications. </li></ul><ul><li>Tedeschi, B. (1999, August 30). Good Web site design can lead to healthy sales. New York Times e-commerce report [On-line]. Available: </li></ul><ul><li>Thompson, M. J. (1999, August 9). How to frustrate Web surfers. Industry Standard [On-line]. Available:,1283,956,00.html </li></ul><ul><li>Seminerio, M. (1998, September 10). Study: One in three experienced surfers find online shopping difficult. In Inter@ctive Week [On-line]. Available: </li></ul>
  47. 47. References <ul><li>Stanley, J., McCarthy, J. C., & Sharrard, J. (2000, May). The Internet’s privacy migraine [On-line]. Available: </li></ul><ul><li>Sullivan, T. (1998). The need for speed. Site optimization strategies. All Things Web [On-line]. Available: </li></ul><ul><li>Tedeschi, B. (1999, August 30). Good Web site design can lead to healthy sales. The New York Times e-commerce report [On-line]. Available: </li></ul><ul><li>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. </li></ul><ul><li>Vickers, B. (2000, November 22). Firms push to get multilingual on the Web. The Wall Street Journal, p. B11A. </li></ul>
  48. 48. References <ul><li>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. </li></ul><ul><li>Wolverton, T. (2002, June 11). Online retailers continue strong growth. CNET [On-line]. Available: </li></ul>