Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)

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]


• If the customer can’t find it [information], he can’t buy it


• Show shoppers where they are: breadcrumbs, headings (get users where want to go; aids search engines)


• Search: consistency above fold (browse catalog anytime)


• Allow customization: viewing

• Popularity

• Newest

• Price

• Name

• also items per page


• 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)


• 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”


• 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)


• 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

Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)

Design

Transcript of Usability Basics - For E-commerce sites (Feb 2012 Internal Presentation)