E commerce user interface design HCI International
E-commerce User Interface
Design
Lawrence Najjar
Information Architect
Viant
lnajjar@viant.com
Outline
•
•
•
•
•
•
•
Why worry about e-commerce usability?
Why improve e-commerce usability?
Page format
Navigation
Catalog
Registration
Checkout
2
Why Worry about Ecommerce Usability?
•
•
•
Up to 50% of potential sales lost because shoppers
cannot find what they want1, 2
83% of shoppers left e-commerce sites due to poor
navigation and slow downloads3
78% of shoppers abandoned their online shopping
carts4
3
Why Improve Usability?
•
•
After improving e-commerce usability:
– IBM got 400% increase in sales5
– DEC got 80% increase in revenue6
Improving usability estimated to:
– Increase number of buyers by 40%7
– Increase order size by 10% 7
4
Page Format
•
•
•
•
•
•
Design page size for AOL users8, 9, 10
Design page to download in less than 10 seconds
(40K)11, 12, 13, 14, 15, 16
Put user interface elements in familiar locations17, 18
Put shopping cart summary on every page18, 19
Put sign-in entry fields on home page
Include links for contact us, privacy policy, security
info, and referral20, 21
5
Example Home Page
6
Example Interior Page
7
Navigation
•
•
•
•
•
•
Make nav simple, intuitive, and consistent
Tell user where user is, how user got there, how to
get back, where else to go22
Provide global and local nav controls
Use breadcrumbs
Allow user to get to any product in 5 clicks or less23
Provide specialized browse functions
8
Navigation (continued)
•
•
•
•
Put search entry field on every page
Design search to put user’s searched-for hit on first
page of search results
Allow user to search by product name, product
category, brand, model/item number, and price
On search results page, allow user to perform
another search, refine results, and sort results
9
Catalog
•
•
•
•
•
•
•
Let user directly enter the catalog
Organize catalog into familiar sections
Allow user to sort products in a section24
Provide link to put product in wish list and to e-mail
page
Show shipping cost
Include product comparison tool25
Include expert product reviews and allow users to
enter reviews
10
Registration
•
•
•
•
•
The more streamlined registration process is, the
more likely users will register and buy26, 15
Require only e-mail address, password, permission
to e-mail promotions, and permission to leave
cookie27
Get other user info during checkout and via
periodic, optional, one-question, multiple-choice
popup surveys28
Allow user to edit and delete registration
Don’t show full credit card number
11
Checkout
•
Checkout is biggest reason people cannot buy from
site29
On shopping cart page, show:
•
–
–
–
–
–
–
–
–
–
Hyperlinked product names
Entry fields for quantities
Prices
Dropdown list of shipping choices and costs
Order subtotal, including shipping + taxes if user is registered
Check boxes for removing products
Check boxes for moving products into wish list
Button to refresh the page
Links to return to shopping and to checkout
12
Checkout (continued)
•
•
•
•
•
•
Don’t require user to register to check out29
Put checkout fields on single, vertically scrollable
page
Provide obvious links to privacy policy, security
policies, delivery guarantees, and customer service
guarantees26
For signed-in member, fill in checkout fields
For errors, put notice at top of page, explain at each
field what was wrong and how to fix it
Provide complete, editable order summary
13
Checkout (continued)
•
Provide order confirmation that includes19:
–
–
–
–
–
•
Order number
Instructions for canceling order
Directions for tracking order and shipment
Customer support info
Promotion (optional)
Require password when changing shipping address
14
Conclusion
•
•
E-commerce usability is important
User interface design best practices improve
usability of e-commerce sites
15
References
Cohen, J., & Thompson, M. J. (1999, February). Mass appeal. The Standard [Online]. Available: http://www.thestandard
.com/article/display/0,1151,4927,00.html
2 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
3 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
4 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
5 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
1
16
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.
7 Creative Good (2000, June 12). The dotcom survival guide. Creative Good [Online]. Available: http://www.creativegood.com/survival/
8 America Online (2001, 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
9 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 [Online], 1(1) [On-line]. Available: http://www.forrester.com/
10 America Online (2001, 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
6
17
References
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.
12 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
13 Nielsen, J. (1997). The need for speed [On-line]. Available:
http://www.useit.com/alertbox/9703a.html
14 Lamers (1996, February 27). Personal communication.
15 Sacharow, A., & Mooradian, M. (1999, March). Navigation: Toward intuitive
movement and improved usability. Jupiter Communications.
16 Sullivan, T. (1998). The need for speed. Site optimization strategies. All Things Web
[On-line]. Available: http://www.pantos.org/atw/35305.html
17 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
11
18
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
19 Ragus, D. (2000). Best practices for designing shopping cart and checkout
interfaces [On-line]. Available: http://www.dack.com/web/shopping_cart.html
20 Reichheld, F. F., & Schefter, P. (2000, July-August). E-loyalty: Your secret weapon
on the Web. Harvard Business Review, 105-113.
21 Stanley, J., McCarthy, J. C., & Sharrard, J. (2000, May). The Internet’s privacy
migraine [On-line]. Available: http://www.forrester.com/
22 Fleming, J. (1998). Web navigation: Designing the user experience. Sebastopol,
CA: O’Reilly.
23 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.
24 Nielsen, J., & Tahir, M. (2001, February). Building sites with depth. In
webtechniques [On-line] 2001(2). Available: http://www.webtechniques.com/
18
19
References
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
26 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/
27 Charron, C., Bass, B., O’Connor, C., & Aldort, J. (1998, July). Making users pay.
Forrester Report [On-line]. Available: http://www.forrester.com/
28 Nielsen, J. (1999). Web research: Believe the data [On-line]. Available:
http://www.useit.com/alertbox/99 0711.html
29 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
25
20
Design
Lawrence Najjar
Information Architect
Viant
lnajjar@viant.com
Outline
•
•
•
•
•
•
•
Why worry about e-commerce usability?
Why improve e-commerce usability?
Page format
Navigation
Catalog
Registration
Checkout
2
Why Worry about Ecommerce Usability?
•
•
•
Up to 50% of potential sales lost because shoppers
cannot find what they want1, 2
83% of shoppers left e-commerce sites due to poor
navigation and slow downloads3
78% of shoppers abandoned their online shopping
carts4
3
Why Improve Usability?
•
•
After improving e-commerce usability:
– IBM got 400% increase in sales5
– DEC got 80% increase in revenue6
Improving usability estimated to:
– Increase number of buyers by 40%7
– Increase order size by 10% 7
4
Page Format
•
•
•
•
•
•
Design page size for AOL users8, 9, 10
Design page to download in less than 10 seconds
(40K)11, 12, 13, 14, 15, 16
Put user interface elements in familiar locations17, 18
Put shopping cart summary on every page18, 19
Put sign-in entry fields on home page
Include links for contact us, privacy policy, security
info, and referral20, 21
5
Example Home Page
6
Example Interior Page
7
Navigation
•
•
•
•
•
•
Make nav simple, intuitive, and consistent
Tell user where user is, how user got there, how to
get back, where else to go22
Provide global and local nav controls
Use breadcrumbs
Allow user to get to any product in 5 clicks or less23
Provide specialized browse functions
8
Navigation (continued)
•
•
•
•
Put search entry field on every page
Design search to put user’s searched-for hit on first
page of search results
Allow user to search by product name, product
category, brand, model/item number, and price
On search results page, allow user to perform
another search, refine results, and sort results
9
Catalog
•
•
•
•
•
•
•
Let user directly enter the catalog
Organize catalog into familiar sections
Allow user to sort products in a section24
Provide link to put product in wish list and to e-mail
page
Show shipping cost
Include product comparison tool25
Include expert product reviews and allow users to
enter reviews
10
Registration
•
•
•
•
•
The more streamlined registration process is, the
more likely users will register and buy26, 15
Require only e-mail address, password, permission
to e-mail promotions, and permission to leave
cookie27
Get other user info during checkout and via
periodic, optional, one-question, multiple-choice
popup surveys28
Allow user to edit and delete registration
Don’t show full credit card number
11
Checkout
•
Checkout is biggest reason people cannot buy from
site29
On shopping cart page, show:
•
–
–
–
–
–
–
–
–
–
Hyperlinked product names
Entry fields for quantities
Prices
Dropdown list of shipping choices and costs
Order subtotal, including shipping + taxes if user is registered
Check boxes for removing products
Check boxes for moving products into wish list
Button to refresh the page
Links to return to shopping and to checkout
12
Checkout (continued)
•
•
•
•
•
•
Don’t require user to register to check out29
Put checkout fields on single, vertically scrollable
page
Provide obvious links to privacy policy, security
policies, delivery guarantees, and customer service
guarantees26
For signed-in member, fill in checkout fields
For errors, put notice at top of page, explain at each
field what was wrong and how to fix it
Provide complete, editable order summary
13
Checkout (continued)
•
Provide order confirmation that includes19:
–
–
–
–
–
•
Order number
Instructions for canceling order
Directions for tracking order and shipment
Customer support info
Promotion (optional)
Require password when changing shipping address
14
Conclusion
•
•
E-commerce usability is important
User interface design best practices improve
usability of e-commerce sites
15
References
Cohen, J., & Thompson, M. J. (1999, February). Mass appeal. The Standard [Online]. Available: http://www.thestandard
.com/article/display/0,1151,4927,00.html
2 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
3 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
4 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
5 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
1
16
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.
7 Creative Good (2000, June 12). The dotcom survival guide. Creative Good [Online]. Available: http://www.creativegood.com/survival/
8 America Online (2001, 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
9 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 [Online], 1(1) [On-line]. Available: http://www.forrester.com/
10 America Online (2001, 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
6
17
References
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.
12 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
13 Nielsen, J. (1997). The need for speed [On-line]. Available:
http://www.useit.com/alertbox/9703a.html
14 Lamers (1996, February 27). Personal communication.
15 Sacharow, A., & Mooradian, M. (1999, March). Navigation: Toward intuitive
movement and improved usability. Jupiter Communications.
16 Sullivan, T. (1998). The need for speed. Site optimization strategies. All Things Web
[On-line]. Available: http://www.pantos.org/atw/35305.html
17 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
11
18
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
19 Ragus, D. (2000). Best practices for designing shopping cart and checkout
interfaces [On-line]. Available: http://www.dack.com/web/shopping_cart.html
20 Reichheld, F. F., & Schefter, P. (2000, July-August). E-loyalty: Your secret weapon
on the Web. Harvard Business Review, 105-113.
21 Stanley, J., McCarthy, J. C., & Sharrard, J. (2000, May). The Internet’s privacy
migraine [On-line]. Available: http://www.forrester.com/
22 Fleming, J. (1998). Web navigation: Designing the user experience. Sebastopol,
CA: O’Reilly.
23 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.
24 Nielsen, J., & Tahir, M. (2001, February). Building sites with depth. In
webtechniques [On-line] 2001(2). Available: http://www.webtechniques.com/
18
19
References
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
26 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/
27 Charron, C., Bass, B., O’Connor, C., & Aldort, J. (1998, July). Making users pay.
Forrester Report [On-line]. Available: http://www.forrester.com/
28 Nielsen, J. (1999). Web research: Believe the data [On-line]. Available:
http://www.useit.com/alertbox/99 0711.html
29 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
25
20