Najjar, L. J. (2001). E-commerce user interface design for the Web. In M. J. Smith,
G. Salvendy, D. Harris, & R. J. Koubek (Eds.), Usability evaluation and interface
design (Volume 1 of the Proceedings of HCI International 2001) (pp. 843-847). Mahwah, NJ:
Lawrence Erlbaum.
Lawrence J. Najjar, Ph.D.*
Viant
One Georgia Center
600 West Peachtree Street, Suite 2300
Atlanta, GA 30308 USA
lnajjar@viant.com
Due to competition and user demands, e-commerce sites must be designed to be very easy to use. This paper provides helpful user interface design suggestions for page format, navigation, catalog, registration, and checkout.
According to Forrester Research (Manning, McCarthy, & Souza, 1998), “The rallying cry of the Web will be ‘usability, usability, usability.’ In a world of dynamic trade -- where information is commoditizing products -- ease-of-use will be the differentiator that drives market share and brand perception.” There is strong support for this assertion. Seventy-nine percent of users named easy navigation as the most important characteristic of an e-commerce site (Lake, 2000), and e-commerce sites lose up to 50% of potential online sales because users cannot find what they want (Cohen & Thompson, 1999; Seminerio, 1998). Poor navigation and slow downloads helped cause 83% of shoppers to leave a site (Thompson, 1999) and 78% of shoppers to abandon their online shopping carts (BizRate, 2000).
On the positive side, when we improve the usability of sites, sales can improve. For example, after improving usability, IBM found a 400% increase in sales (Tedeschi, 1999) and Digital Equipment Corporation reported an 80% increase in revenue (Wixon & James, 1992). One study (Creative Good, 2000) estimated that improving the customer experience increases the number of buyers by 40% and increases order size by 10%.
Designing the user interface for an e-commerce site is very challenging. E-commerce sites must accommodate nearly all users, include a significant amount of user interactivity, and still be easy to use. To have a significant impact on usability, take special care when designing the overall page format, navigation, catalog, registration, personalization, and checkout.
Design the page size to accommodate America Online (AOL) members. There are over 28 million AOL members (America Online, 2001b), and they buy at three times the rate of other users (Kadison, Weisman, Modahl, Lieu, & Levin, 1998. It is estimated that 70% of the 2000 online holiday spending was by AOL members (America Online, 2001a). AOL members open their Web site windows inside the AOL browser. Without resizing their browser windows, this window-in-window technique restricts the size of AOL members’ Web windows to 625 pixels wide by 270 pixels high (America Online). So, to avoid forcing this group of users to scroll their pages horizontally or vertically, design your page to fit within that area.
Since download time is the biggest problem with the Web (Graphics, Visualization, and Usability Center, 1998), design your pages to download quickly. Limit your use of graphics and optimize them for the Web. Do not use plug-ins like Flash (Ragus, 2000b, 2000c; Nielsen, 2000). Do not use Java. Design your pages to download in less than 10 seconds (Miller, 1968; Nielsen, 1994, 1997) over a 56K modem. To do this, limit the size of each page to 40K or less (Lamers, personal communication, February 27, 1996; Sacharow & Mooradian, 1999; Sullivan, 1998).
Except for the product comparison tool, never require the user to scroll horizontally. Avoid forcing the user to scroll vertically on the home page. It is acceptable, however, to put closely related information (e.g., product details, checkout fields) on a vertically scrollable page (Sacharow & Mooradian, 1999). Put important information “above the fold” (above the vertical scroll line).
Format the pages so that user interface elements are in locations that are familiar to users (Bernard, 2001). Put the return-to-Home hyperlink in the top, left corner. To make it serve double-duty as a branding element, use the company’s logo as the hyperlink. Put global navigation controls for the major sections of the site across the top of the page (CyberAtlas, 1999). Place along the left side of the page local navigation controls that work inside each major section. Put on the right side or the bottom, left side of each page controls that take the user off the site (e.g., ads). Locate the search entry field near the top of the page, possibly on the left side, below the global navigation controls. Finally, put banner advertisements at the top of the page.
Except for the shopping cart page and checkout pages, put a shopping cart summary (hyperlinked name of each product, quantity, price, subtotal) on each page (e.g., DVDExpress.com) (CyberAtlas, 1999; Ragus, 2000a). Consider putting the shopping cart summary on the left side of each page, below the search entry field and the local navigation controls. Within the shopping cart summary, include links to the shopping cart and checkout.
To easily accommodate registered members, include sign-in entry fields on the home page and a sign-in hyperlink on every page. Provide a welcome notice (e.g., “Welcome back, johndoe@aol.com”) inconspicuously near the top of the home page. Be sure to put a “Contact Us” hyperlink on every page, perhaps at the bottom. A great way to get new, loyal users is to provide at the bottom of each page a link to a simple referral form (e.g., ImageExchange.com “Tell a Friend”) (Reichheld & Schefter, 2000). Also, provide links to the privacy and security policies at the bottom of every page (Stanley, McCarthy, & Sharrard, 2000).
Design navigation that is simple, intuitive, and obvious. Put the navigation controls in the same locations on each page. Use navigation to tell the user where the user is, how the user got there, and where else the user can go (Fleming, 1998). This is especially helpful to users who arrive at the page not from the home page, but via a search engine or hyperlink. Provide “breadcrumb” navigation on the site. Breadcrumbs are small, hyperlinked page titles at the top of each page, usually above the title of the current page. These hyperlinks show the page titles that the user came through to get to the current page. Like the breadcrumbs dropped by Hansel and Gretel (Grimm & Grimm, 1999), the purpose of breadcrumb navigation controls is to allow the user to easily retrace the user’s path.
Limit the number of major sections in the site to about seven. Provide an intuitive name for each major section. Familiar names will make it easy for the user to quickly browse through the site to a desired product. Use these names as the labels on the global navigation controls. Design the navigation so that the user can browse to any product in five clicks or less (Tracy, 2000). It may be better to provide more category names at each level (a broad design) than to provide more levels to click through (a deep design) (Selingo, 2000). Also provide some specialized browse functions to meet specific user needs. These specialized browse functions can include product ensembles (e.g., Guess.com “Styles”), gifts, holiday specials (e.g., Hallmark.com “Gifts”), and discounted products.
Search is an extremely important navigation technique. In one study (Nua, 2001), 77% of the users said they use search to find products. Forty-three percent of the users said that search was the most important online shopping feature. Unfortunately, many e-commerce sites do not design, maintain, or even evaluate their search functions (Hagen, Manning, & Paul, 2000). One evaluation (Hagen et al., 2000) found that on 30 sites the search function failed to meet minimal standards of usefulness or usability. Another study (Nielsen & Tahir, 2001) found that 36% of the time users could not find what they were looking for when they used the search function. To improve search, use meta tag tools (such as Dynabase and Spectra), thesauruses, alternate spellings, and database search engines (such as EasyAsk, Fact City, iPhrase, Mercado, and Requisite Technology) (Guernsey, 2001). For example, the search function on TowerRecords.com allows users to misspell search words (e.g., enter “phl colins” and get “Phil Collins”) and to enter hints (e.g., enter “cannibal” and get “Silence of the Lambs”). After adding this powerful search engine, Tower Records doubled the rate at which users made purchases (Guernsey, 2001). Allow users to search by product name, product category, brand, model/item number, and price (Consumer Reports) (e.g., BarnesandNoble.com Bookstore advanced search). Try to get the most relevant hits to appear on the first page of search results. On the search results page, show the search term(s) and allow the user to perform another search, refine the search results, and sort the search results via helpful product attributes such as price or size (e.g., NetGrocer.com).
Never require users to register to see the product catalog. Avoid requiring users to select a city or enter a ZIP/postal code to see a product catalog. Instead, try to let users get directly into the product catalog without performing extra steps. Organize the product catalog the way users expect the products to be organized (e.g., organize clothing by gender). Since users only look at the first two or three pages of a list of products, allow users to shorten a long list of products by using sorting tools (e.g., Webvan.com) (Nielsen & Tahir, 2001). For example, since a user will only be interested in one shoe size, allow the user to shorten a list of shoes by sorting by size.
On each product page, show a small image of the product and provide a link to a larger, close-up image. This technique reduces download times for product pages and increases the chance that a user will buy (eMarketer, 2001). Show only products that are in stock. If you cannot do this, identify the colors, sizes, or models that are out of stock. If the system cannot check a product’s inventory status until the user tries to put the product into the shopping cart, tell the user the product is out of stock, when it will be in stock, suggest an alternate product (e.g., same size shirt in a different color), and offer to e-mail the user when the product is available. Never allow the user to put an out-of-stock product into the shopping cart. On the product page, provide links to move the product into a wish list and to allow the user to e-mail the page to someone else. If possible, show a shipping cost for the product (e.g., Costco.com).
Since 34% of users say a product comparison tool increases the chances that they will buy from a site (eMarketer, 2001), allow users to select and compare products side-by-side on important, differentiating features (e.g., eBags.com “My Comparison”). Do not limit the number of products that can be compared. Provide links back to each product’s detail page. Make it easy for users to remove products from the comparison.
To make the site more helpful, interesting, and “sticky,” consider providing expert and customer reviews. Allow users to enter product reviews on the site.
The more streamlined the registration process, the more likely users will register and buy (Agrawal, Arjona, & Lemmens, 2001). Even when they are on the registration page, most users will not read or enter information into the registration fields and half the users will leave on each succeeding registration page (Sacharow & Mooradian, 1999). To reduce the number of entries and to make it easier for users to remember their sign-in names, require a user to enter only an e-mail address and a password. Get permission to e-mail notifications (e.g., sales, new products) (Charron, Bass, O’Connor, & Aldort, 1998) and to leave a cookie (e.g., “Remember me when I return. Yes/No”). Provide in the content area obvious links to the privacy and security policies. Also, since users often have trouble entering their e-mail addresses correctly (Rehman, 2000), provide a sample, correct e-mail address (“e.g., johndoe@aol.com”).
Gather other user information several ways. Instead of requiring users to register before checking out, let a new user enter shipping and billing information during checkout (e.g., Amazon.com). At the end of checkout, tell the user the benefits of registering (e.g., quicker future checkouts, personalization, order history), ask the user to register, retain the checkout information for registration, and ask the user to provide a password (Nielsen, 1999). To get additional registration information later, present optional, quick, one-question, multiple-choice surveys (e.g., gender, preferred products) when the registered user signs in or revisits the site. Spread out the surveys by several weeks or months.
Allow users to edit the registration and to un-register. Never show the entire credit card number; show only asterisks and the last four digits.
On the shopping cart page, show hyperlinked product names, entry fields with quantities, prices, a drop-down list of shipping choices and costs, an order subtotal (include shipping costs, plus taxes if the user is registered), check boxes to remove products, check boxes to move products into the user’s wish list, a button to refresh the cart page, and links to return to the prior shopping page and to check out. Since 56% of users stopped checkout when they saw high shipping costs at the end of checkout (Hill, 2001), it is important to show shipping costs in the shopping cart. Show a subtotal in the shopping cart so users can see this cost estimate before entering their credit card numbers. If a registered user leaves the site without saving the shopping cart or checking out, save the shopping cart contents for up to 90 days (e.g., Amazon.com).
In one study (Rehman, 2000), checkout problems were the primary reason users could not buy from an e-commerce site. Since 27% of users abandoned an order because the site required them to complete cumbersome forms (Sacharow & Mooradian, 1999), do not require the user to register before checking out (Rehman, 2000). Try to put the checkout fields on a single, vertically scrollable page. This will reduce user confusion and will make it easier for the user to change the order. During checkout, provide an unobtrusive link to allow a member to sign in (e.g., “Returning customer? Sign in.”) (e.g., BarnesandNoble.com). If the user is a signed-in member, fill in the checkout fields. If the billing address is the same as the shipping address, do not require a new user to enter the same information again in the billing address fields. Instead, allow the user to click a button near the billing address for “Same as shipping address.” Refresh the page and show the shipping information in the billing address fields.
When the user makes an error or leaves empty a required field, show the checkout fields page and put an obvious error message at the top (e.g., “We had a problem processing this page. Will you please try to fix the fields that are marked in red?”). Then, adjacent to each field that had an error, use red text to briefly explain what the trouble was and how to fix it.
Make it easy, safe, and reliable to pay. Design checkout to accept several payment methods (e.g., credit cards, checks, debit cards, gift certificates, phone call with credit card number). Twenty percent of users said they stopped an online purchase because they felt the site was not secure (Hill, 2001). So, certify your site’s privacy and security through consumer groups such as TRUSTEe or BBBOnLine and display their logos on the checkout page. Provide obvious links that promote consumer protection features such as privacy policy, security protection, a no-questions-asked return policy, delivery guarantees, and customer support e-mail response time guarantees (Agrawal et al., 2001).
After the user enters the checkout information, provide a complete, editable order summary. For example, provide a “Change Order” button that takes the user back to the single, vertically scrollable, editable, checkout information page. After the system accepts the order, provide an order confirmation that includes the order number, instructions for canceling the order, directions for tracking the order and shipment, customer support information (e.g., e-mail, telephone), and, possibly, a promotion (e.g., sale, special deal) (Ragus, 2000a).
For improved security during checkout, if the user is signed in and wants to change the default shipping address, require the user to enter the user’s password. This requirement will prevent someone other than the user from making purchases and sending the purchases to a different address.
To be successful, e-commerce user interfaces must be easy to use. The design suggestions described here should make it easier for users to browse, search, register, and check out of an e-commerce site.
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/
America Online. Webmaster style guide. Recommended page size [On-line]. Available: http://webmaster.info.aol.com/webstyle/webpages.html
America Online (2001a, January 2). AOL holiday season shopping reaches $4.6 billion. America Online press release [On-line]. Available: http://media.aoltimewarner.com/media/cb_press_view.cfm?release_num=50252085
America Online (2001b, March 8). AOL membership surpasses 28 million milestone. America Online press release [On-line]. Available: http://media.aoltimewarner.com/media/cb_press_view.cfm?release_num=50252317
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.twsu.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
Consumer Reports. E-ratings: Online shopping guide [On-line]. Available: http://www.consumerreports.org/Special/Samples/Reports/lookfor.htm
Creative Good (2000, June 12). The dotcom survival guide. Creative Good [On-line]. Available: http://www.creativegood.com/survival/
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.
Graphics, Visualization, and Usability Center (1998). GVU’s 9th WWW User Survey. Atlanta: Georgia Institute of Technology, College of Computing, Graphics Visualization, and Usability Center [On-line]. Available: http://www.gvu.gatech.edu/user_surveys/survey-1998-04
Grimm, J., & Grimm, W. (1999). Complete fairy tales of the brothers Grimm. Minneapolis: Econo-Clad.
Guernsey, L. (2001, February 28). Revving up the search engines to keep the e-aisles clear. The New York Times, p. 10.
Hagen, P. R., Manning, H., & Paul, Y. (2000, June). Must search stink? Forrester Report [On-line]. Available: http://www.forrester.com/ER/Research/Report/0,1338,9412,00.html
Hill, A. (2001, February 12). Top 5 reasons your customers abandon their shopping carts (and what you can do about it). ZDNet [On-line]. Available: http://www.zdnet.com/ecommerce/stories/main/0,10475,2677306,00.html
Kadison, M. L., Weisman, D. E., Modahl, M., Lieu, K. C., & Levin, K. (1998, April). On-line research strategies: The look to buy imperative. Forrester Report [On-line], 1(1) [On-line]. Available: http://www.forrester.com/
Lake, D. (2000, April 17). Navigation: An e-commerce must. The Standard [On-line]. Available: http://www.thestandard.com/research/metrics/display/0,2799,14110,00.html
Manning, H., McCarthy, J. C., & Souza, R. K. (1998, September). Interactive technology strategies: Why most Web sites fail. Forrester Report [On-line], 3(7). Available: http://www.forrester.com/
Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of American Federation of Information Processing Societies Fall Joint Computer Conference, 33, 267-277.
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
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/990711.html
Nielsen, J. (2000). Flash: 99% bad [On-line]. Available: http://www.useit.com/alertbox/20001029.html
Nielsen, J., & Tahir, M. (2001, February). Building sites with depth. In webtechniques [On-line] 2001(2). Available: http://www.webtechniques.com/
Nua (2001, March 13). eMarketer: Web shoppers know what they want. Nua Internet Surveys [On-line]. Available: http://www.nua.ie/surveys/?f=VS&art_id=905356549&rel=true
Ragus, D. (2000a). Best practices for designing shopping cart and checkout interfaces [On-line]. Available: http://www.dack.com/web/shopping_cart.html
Ragus, D. (2000b). Flash is evil [On-line]. Available: http://www.dack.com/web/flash_evil.html
Ragus, D. (2000c). Flash vs. HTML: A usability test [On-line]. Available: http://www.dack.com/web/flashVhtml/
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
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.
Selingo, J. (2000, August 3). A message to Web designers: If it ain’t broke, don’t fix it. New York Times, p. D11.
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
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. 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
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.
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.
* Lawrence Najjar is an information architect at Viant. He designs digital businesses that are simple and easy to use. Lawrence has 18 years of user interface design experience and holds a Ph.D. in engineering psychology from the Georgia Institute of Technology.
I give special thanks to Laurie Najjar for her helpful editorial assistance.