Transcript User Interface Design for the Web - lawrence

Designing E-commerce User
Interfaces
Lawrence Najjar
[email protected]
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”
Outline
• Why worry about e-commerce usability?
• Design process
• Design suggestions
2
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)
3
Why Worry about Ecommerce 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)
4
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)
5
E-commerce Design Process
1.
2.
3.
4.
5.
6.
7.
8.
9.
Develop business strategy
Define users
Define functional requirements
Write use cases (example)
Develop site structure diagrams (example)
Build interactive mockups (example)
Test usability of interactive mockups
Write functional design specification
Perform acceptance tests
6
Use Cases
7
Site Diagram
8
9
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)
10
(example)
11
12
13
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)
14
15
16
17
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)
18
19
20
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)
21
22
23
24
25
26
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
27
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
28
29
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
30
31
32
33
34
35
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
36
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
37
<a href="#main"><img alt="Skip to main content" height="1" width="1"
border="0" src="//www.ibm.com/i/c.gif"/></a>
...
38
<a name="main"><!--Main Content--></a> . . .
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
39
40
41
Conclusion
•
•
E-commerce usability is important
Create an easy-to-use site by using:
–
–
Efficient user interface design process
Proven detailed user interface designs
42
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
43
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 [Online]. Available:
http://www.emarketer.com/estatnews/estats/ecommerce_b2c/200103
12_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
44
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,263887
4-1,00.html
45
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/30comm
erce.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
46
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/30comm
erce.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.
47
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/21001017-935215.html
48