The document provides guidelines for improving the usability of e-commerce sites. It discusses navigation and search features that help users find products, such as breadcrumbs and filtering options. It also recommends allowing users to browse products to gain trust in the site by including detailed product information. Additionally, the document outlines check-out guidelines such as making the process convenient with minimal required fields, giving users a sense of control over the process, providing clarity by removing unnecessary elements, and instilling a sense of security through trust badges and security measures.

1. E-Commerce Usability
BUILDING ON THE BEST ELEMENTS OF A SHOPPING
EXPERIENCE

2. Navigation & Search
(Findable)
• 4 Purchase paths
• Known-item
• Category
• Bargain-hunt
• Inspiration
• [One-time purchase]

3. Navigation & Search
(Findable)
• If the customer can’t find it [information], he can’t buy it

4. Navigation & Search
(Findable)
• Show shoppers where they are: breadcrumbs, headings
(get users where want to go; aids search engines)

5. Navigation & Search
(Findable)
• Search: consistency above fold (browse catalog anytime)

6. Navigation & Search
(Findable)
• Allow customization: viewing
• Popularity
• Newest
• Price
• Name
• also items per page

7. Navigation & Search
(Findable)
• When extensive inventory: catalog search within
categories/areas (results refinement (qualitative) and
clear refinement at anytime)

8. Browsing
(“Window Shop”)
• Provide users with info needed to DECIDE on products
and feel comfortable trusting site with money (faceless
transaction)

9. 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”

10. 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)

11. Browsing
(“Window Shop”)
• Content samples important: alleviates fear of the vague
feeling of purchasing online
• Specific
• Understandable language
• Meaningful excerpts/images

12. Making Online Products
“Tactile”

13. Making Online Products
“Tactile”
• Necessary information
• Accessible cues

14. “My Cart”
Or simulating the feeling of having items you want in-hand

15. “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)

16. “My Cart”

17. “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

18. “My Cart”
• Keep “Add to cart” easy to see
• Big enough font
• High contrast colors (Reds, blues, yellows, greens)

19. “My Cart”
• Avoid intimidating wording :“Buy now”;“Order”
• Better: Proceed to Checkout

20. Cross-Selling & Wishlists
Like strolling through virtual aisles

21. Cross-Selling
• Timing: Show related items both before check-out and
after add-to-cart
• Related to category/topic; bundling

22. Cross-Selling
• BUT Don’t go back to index or make it difficult to edit
cart after looking at other items (redirect)

23. Wishlists
• Option:Allows saving of liked items

24. Wishlists
• Design treatment: Less obvious than add-to-cart, but
still somewhere customers look

25. Check-Out Guidelines
BE CONVENIENT.

26. Fulfillment
“The site has to work. When you buy it, you get it.”

27. 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

28. 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)

29. 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.”

30. Convenience
• Clear log-in: Zappos and Amazon’s two-option system

31. Convenience
• Allow for variety of payment and delivery options

32. Check-out Guidelines
GIVE A SENSE OF CONTROL.

33. Control
• Show user where he is in the check-out process
• Headings; breadcrumbs

34. Control
• Break-up the process into bite-size chunks

35. 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

36. 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

37. 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

38. Check-out Guidelines
BE CLEAR.

39. Clarity
• Keep unnecessary items off of check-out pages
• Only purposeful and visually appealing content
and images must remain

40. Clarity
• Keep path clear and simple: Even for product/browsing
pages
• Product pages;Add-to-cart area; Landing pages
must be clutter-free

41. Clarity
• Don’t ask for unnecessary information. Explain, if not
automatically understandable

42. Clarity
• Have descriptive form field labels
• Also explain, if possibly unclear (reduced font size; faded
color)

43. 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

44. Clarity
• Highlight required fields

45. Clarity
• Clear error indications
• Close proximity to field with error
• Design that stands out
• With clear, concise wording

46. 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]

47. Clarity
• As much as possible, single-column for form fields
• Especially for detail-intensive/complex forms

48. Clarity
• When applicable, make field data format correspond to
source
• e.g. Credit Card expiration date (MM/DD/YY)

49. Check-out Guidelines
GIVE SENSE OF SECURITY.

50. Security
• Users won’t fork over money to a site they don’t trust.

51. Security
• Keep security badges, trust and SSL certificates in one place

52. Security
• Visible customer service contact information: Always above
the fold

53. Security
• Create order process copy that increases site credibility

54. Security
• Visually reinforce all sensitive fields (security icons, badges,) -
e.g. background color, security icons

55. 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