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
E-Commerce UsabilityBUILDING ON THE BEST ELEMENTS OF A SHOPPING
EXPERIENCE
Navigation & Search(Findable)
• 4 Purchase paths
• Known-item
• Category
• Bargain-hunt
• Inspiration
• [One-time purchase]
Navigation & Search(Findable)
• If the customer can’t find it [information], he can’t buy it
Navigation & Search(Findable)
• Show shoppers where they are: breadcrumbs, headings (get users where want to go; aids search engines)
Navigation & Search(Findable)
• Search: consistency above fold (browse catalog anytime)
Navigation & Search(Findable)
• Allow customization: viewing
• Popularity
• Newest
• Price
• Name
• also items per page
Navigation & Search(Findable)
• When extensive inventory: catalog search within categories/areas (results refinement (qualitative) and clear refinement at anytime)
Browsing(“Window Shop”)
• Provide users with info needed to DECIDE on products and feel comfortable trusting site with money (faceless transaction)
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”
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)
Browsing(“Window Shop”)
• Content samples important: alleviates fear of the vague feeling of purchasing online
• Specific
• Understandable language
• Meaningful excerpts/images
Making Online Products “Tactile”
Making Online Products “Tactile”
• Necessary information
• Accessible cues
“My Cart”Or simulating the feeling of having items you want in-hand
“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)
“My Cart”
“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
“My Cart”
• Keep “Add to cart” easy to see
• Big enough font
• High contrast colors (Reds, blues, yellows, greens)
“My Cart”
• Avoid intimidating wording : “Buy now”; “Order”
• Better: Proceed to Checkout
Cross-Selling & WishlistsLike strolling through virtual aisles
Cross-Selling
• Timing: Show related items both before check-out and after add-to-cart
• Related to category/topic; bundling
Cross-Selling
• BUT Don’t go back to index or make it difficult to edit cart after looking at other items (redirect)
Wishlists
• Option: Allows saving of liked items
Wishlists
• Design treatment: Less obvious than add-to-cart, but still somewhere customers look
Check-Out GuidelinesBE CONVENIENT.
Fulfillment“The site has to work. When you buy it, you get it.”
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
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)
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.”
Convenience
• Clear log-in: Zappos and Amazon’s two-option system
Convenience
• Allow for variety of payment and delivery options
Check-out GuidelinesGIVE A SENSE OF CONTROL.
Control
• Show user where he is in the check-out process
• Headings; breadcrumbs
Control
• Break-up the process into bite-size chunks
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
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
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
Check-out GuidelinesBE CLEAR.
Clarity
• Keep unnecessary items off of check-out pages
• Only purposeful and visually appealing content and images must remain
Clarity
• Keep path clear and simple: Even for product/browsing pages
• Product pages; Add-to-cart area; Landing pages must be clutter-free
Clarity
• Don’t ask for unnecessary information. Explain, if not automatically understandable
Clarity
• Have descriptive form field labels
• Also explain, if possibly unclear (reduced font size; faded color)
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
Clarity
• Highlight required fields
Clarity
• Clear error indications
• Close proximity to field with error
• Design that stands out
• With clear, concise wording
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]
Clarity
• As much as possible, single-column for form fields
• Especially for detail-intensive/complex forms
Clarity
• When applicable, make field data format correspond to source
• e.g. Credit Card expiration date (MM/DD/YY)
Check-out GuidelinesGIVE SENSE OF SECURITY.
Security
• Users won’t fork over money to a site they don’t trust.
Security
• Keep security badges, trust and SSL certificates in one place
Security
• Visible customer service contact information: Always above the fold
Security
• Create order process copy that increases site credibility
Security
• Visually reinforce all sensitive fields (security icons, badges,) - e.g. background color, security icons
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