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
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Because it is growing
  • Because bad design costs money
  • Because good design makes money
  • I’m going to tell you about a design process that is very good for e-commerce It is based on a business strategy and is driven by the needs of the users. And includes iterative design. Work from high to low-level design. Business strategy – Define objective for site (generate revenue, drive customers to brick-and-mortar store). Define how your site will be different from competing sites. Users – Who do you want to use the site? Why do they want to use the site? Their objectives? Their computers, display resolutions, browsers, connection speeds. What are the users’ needs? Functional requirements – Identify the functions that users want on the site. Use focus groups, interviews, contextual observations of people buying online, competitive assessments. Since you can’t include in the first phase all the functions that you identify, prioritize the functions using criteria like value to the user, differentiation from competitors, ease of implementation. “Registration” is an example of a functional requirement. Design spec – Since you iterated the design based on feedback from users and clients, programmers should be able to do their work right the first time. Very efficient. Great for morale.
  • To refine the design and get feedback, build an interactive mockup. Show how the site works, not how it looks. Don’t show graphics because they distract reviewers and take too long to create and change. Figure out how the site works, then use the visual design to support the interaction design. Show fake data. Don’t connect to real databases. Do not reuse the code. The purpose is to change the design quickly, easily, and cheaply.
  • 73% of Americans use modem (Harris Interactive, 2003)
  • 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>