usability basics - for e-commerce sites (feb 2012 internal presentation)
DESCRIPTION
Collation of Jakob Nielsen pointers, for ABS-CBN's Digital Brand Management team - February 2012 This is a summary of e-commerce usability pointers from Jakob Nielsen, which I compiled for teammates during planning of an e-commerce project.TRANSCRIPT
![Page 1: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/1.jpg)
E-Commerce UsabilityBUILDING ON THE BEST ELEMENTS OF A SHOPPING
EXPERIENCE
![Page 2: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/2.jpg)
Navigation & Search(Findable)
• 4 Purchase paths
• Known-item
• Category
• Bargain-hunt
• Inspiration
• [One-time purchase]
![Page 3: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/3.jpg)
Navigation & Search(Findable)
• If the customer can’t find it [information], he can’t buy it
![Page 4: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/4.jpg)
Navigation & Search(Findable)
• Show shoppers where they are: breadcrumbs, headings (get users where want to go; aids search engines)
![Page 5: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/5.jpg)
Navigation & Search(Findable)
• Search: consistency above fold (browse catalog anytime)
![Page 6: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/6.jpg)
Navigation & Search(Findable)
• Allow customization: viewing
• Popularity
• Newest
• Price
• Name
• also items per page
![Page 7: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/7.jpg)
Navigation & Search(Findable)
• When extensive inventory: catalog search within categories/areas (results refinement (qualitative) and clear refinement at anytime)
![Page 8: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/8.jpg)
Browsing(“Window Shop”)
• Provide users with info needed to DECIDE on products and feel comfortable trusting site with money (faceless transaction)
![Page 9: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/9.jpg)
Browsing(“Window Shop”)
• Credibility: Challenge of having abstract medium for typically tactile experience
• Users can’t interact face-to-face with person selling/taking their money or “have products in hand”
![Page 10: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/10.jpg)
Browsing(“Window Shop”)
• Copy (for product page) - must answer typical user questions about the product (i.e. “Magkano?”) and make them interested in buying
• Clear and persuasive
• Informative (product specs)
![Page 11: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/11.jpg)
Browsing(“Window Shop”)
• Content samples important: alleviates fear of the vague feeling of purchasing online
• Specific
• Understandable language
• Meaningful excerpts/images
![Page 12: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/12.jpg)
Making Online Products “Tactile”
![Page 13: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/13.jpg)
Making Online Products “Tactile”
• Necessary information
• Accessible cues
![Page 14: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/14.jpg)
“My Cart”Or simulating the feeling of having items you want in-hand
![Page 15: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/15.jpg)
“My Cart”
• Ideal: Cart contents always accessible (typically sidebar, or drop-down from Nav Bar)
• Having it on another page: like doing groceries with a garbage bag (concealed items)
![Page 16: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/16.jpg)
“My Cart”
![Page 17: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/17.jpg)
“My Cart”
• Keeping cart items visible enables:
• Editing item list before checkout, and at each checkout phase
• Change mind/Replace while delving deeper into site
![Page 18: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/18.jpg)
“My Cart”
• Keep “Add to cart” easy to see
• Big enough font
• High contrast colors (Reds, blues, yellows, greens)
![Page 19: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/19.jpg)
“My Cart”
• Avoid intimidating wording : “Buy now”; “Order”
• Better: Proceed to Checkout
![Page 20: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/20.jpg)
Cross-Selling & WishlistsLike strolling through virtual aisles
![Page 21: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/21.jpg)
Cross-Selling
• Timing: Show related items both before check-out and after add-to-cart
• Related to category/topic; bundling
![Page 22: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/22.jpg)
Cross-Selling
• BUT Don’t go back to index or make it difficult to edit cart after looking at other items (redirect)
![Page 23: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/23.jpg)
Wishlists
• Option: Allows saving of liked items
![Page 24: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/24.jpg)
Wishlists
• Design treatment: Less obvious than add-to-cart, but still somewhere customers look
![Page 25: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/25.jpg)
Check-Out GuidelinesBE CONVENIENT.
![Page 26: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/26.jpg)
Fulfillment“The site has to work. When you buy it, you get it.”
![Page 27: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/27.jpg)
Convenience
• Ideal: Ask for information when needed (checking out)
• When is registration necessary?
• Allow add-to-cart before registering (You’ll need to give the same information once you actually place the order; not while browsing)Good UI
![Page 28: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/28.jpg)
Convenience
• Why would you register for yet another account?
• Especially when buying only one or two products from a store (Expect spam [newsletters] and extra time)
![Page 29: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/29.jpg)
Convenience
• To alleviate hassle: Ask for e-mail address, before demanding username (less hassle memory)
• e.g. After asking for e-mail address (during checkout): “Would you like an account? Just enter your password in the field below.”
![Page 30: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/30.jpg)
Convenience
• Clear log-in: Zappos and Amazon’s two-option system
![Page 31: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/31.jpg)
Convenience
• Allow for variety of payment and delivery options
![Page 32: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/32.jpg)
Check-out GuidelinesGIVE A SENSE OF CONTROL.
![Page 33: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/33.jpg)
Control
• Show user where he is in the check-out process
• Headings; breadcrumbs
![Page 34: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/34.jpg)
Control
• Break-up the process into bite-size chunks
![Page 35: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/35.jpg)
Control“What am I getting charged for?”
• For concrete merchandise: We’d also like to know early on, whether it’s on-hand
• Show: stock and availability as early as possible
![Page 36: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/36.jpg)
Control
• Have users confirm their order (upon seeing summary, allow to place or cancel), then provide them with a confirmation page and confirmation e-mail
![Page 37: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/37.jpg)
Control
• Show as many important details as possible on confirmation page and confirmation e-mail
• Tracking number or Expected receipt date
• How receive (address, etc.)
• Payment type
• Delivery method
• Item details
• Price and Itemized Tax/Discounts
![Page 38: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/38.jpg)
Check-out GuidelinesBE CLEAR.
![Page 39: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/39.jpg)
Clarity
• Keep unnecessary items off of check-out pages
• Only purposeful and visually appealing content and images must remain
![Page 40: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/40.jpg)
Clarity
• Keep path clear and simple: Even for product/browsing pages
• Product pages; Add-to-cart area; Landing pages must be clutter-free
![Page 41: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/41.jpg)
Clarity
• Don’t ask for unnecessary information. Explain, if not automatically understandable
![Page 42: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/42.jpg)
Clarity
• Have descriptive form field labels
• Also explain, if possibly unclear (reduced font size; faded color)
![Page 43: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/43.jpg)
Clarity
• Reduce steps by automating particular elements
• If products will be shipped, use shipping address as billing address by default
• Then allow user to specify whether modify billing address
![Page 44: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/44.jpg)
Clarity
• Highlight required fields
![Page 45: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/45.jpg)
Clarity
• Clear error indications
• Close proximity to field with error
• Design that stands out
• With clear, concise wording
![Page 46: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/46.jpg)
Clarity
• Avoid out-of-context words
• Continue: Shopping? To Check out? [Better: “Shop More”]
• Back: To Search Results? To Previous?
• Proceed: To Check-out?
• Apply: Confusing, as a step [Better to auto-update]
![Page 47: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/47.jpg)
Clarity
• As much as possible, single-column for form fields
• Especially for detail-intensive/complex forms
![Page 48: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/48.jpg)
Clarity
• When applicable, make field data format correspond to source
• e.g. Credit Card expiration date (MM/DD/YY)
![Page 49: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/49.jpg)
Check-out GuidelinesGIVE SENSE OF SECURITY.
![Page 50: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/50.jpg)
Security
• Users won’t fork over money to a site they don’t trust.
![Page 51: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/51.jpg)
Security
• Keep security badges, trust and SSL certificates in one place
![Page 52: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/52.jpg)
Security
• Visible customer service contact information: Always above the fold
![Page 53: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/53.jpg)
Security
• Create order process copy that increases site credibility
![Page 54: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/54.jpg)
Security
• Visually reinforce all sensitive fields (security icons, badges,) - e.g. background color, security icons
![Page 55: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/55.jpg)
Overall
Following elements must be easy to spot, or near the header:
• Cart contents
• Contact information
• Add to Cart
• Update cart
• Display options
• Cross-selling
• Wishlist, if any
![Page 56: Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)](https://reader034.vdocuments.net/reader034/viewer/2022042815/5584e4a1d8b42a84408b52d3/html5/thumbnails/56.jpg)