E-commerce Checkout Design: Principles, Guidelines & Case Studies


Published on

Author:Long Nguyen Hai & Thang Nguyen Viet
Event: Vietnam UX Group meeting on 18th August

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

E-commerce Checkout Design: Principles, Guidelines & Case Studies

  1. 1. E-commerce Checkout Design: Principles, Guidelines & Case Studies Long Nguyen Hai & Thang Nguyen Viet
  2. 2. Table Of Content• Important Rules & Principles• Fundamental Guidelines• Conversion Rate Optimization
  3. 3. Numbers65.23%Abandonment Rate Why? 44% High Shipping Cost 25% High Product Price 22% No Shipping Cost Info2.13% 14% No Guest Checkout Option 12% Need Too Much InfoConversion Rate 11% Complex Checkout Process Infographic by Website Optimization Company Invesp
  4. 4. Important Rules & Principles
  5. 5. 7 ± 2 principleAccording to George A. Miller’s studies humans’short term memory can retain only about fiveto nine things at one time.
  6. 6. 2-Second-RuleA loose principle that a user shouldn’t need towait more than 2 seconds for certain types ofsystem response, such as application-switchingand application launch time.Reliable principle: the less users have to wait,the better is the user experience.
  7. 7. 3-Click-RuleAccording to this rule users stop using the siteif they aren’t able to find the information oraccess the site feature within 3 mouse clicks. Inother words, the rule emphasizes theimportance of clear navigation, logical structureand easy-to-follow site hierarchy
  8. 8. 80/20 RuleThis rule (the Pareto principle) states that 80%of the effects comes from 20% of the causes.This is the basic rule of thumb in business(“80% of your sales comes from 20% of yourclients”), but can also be applied to design andusability.
  9. 9. Fitts’ LawFitts’ Law is a model of human movementwhich predicts the time required to rapidlymove to a target area, as a function of thedistance to the target and the size of the target.The law is usually applied to the movement ofthe mouse visitors have to perform to get frompoint A to point B.
  10. 10. Fundamental Guidelines
  11. 11. Process Should Be Linear• Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout
  12. 12. Case studies• https://www.walmart.com
  13. 13. Case studies• http://muachung.vn/
  14. 14. Guideline• Never redirect to a previous step, but instead to the next step.• Be sure you have a progress indicator.• Keep “back” button work. (data, views ...)
  15. 15. Registration Should Be Optional• User don’t want to remember new username/password & create new account just to buy one or two products.• Customers have a mental model in which Account = Spam.• Signing up for an account also takes time.• Many customers just don’t understand why they need an account to buy a product.
  16. 16. Case studies• http://muachung.vn• http://www.zalora.vn• http://pub.vn/
  17. 17. Form should be clear• Without descriptions, many form field labels can be ambiguous or hard to understand(billing address vs shipping address ...)• Customers overlook error messages, making them less likely to resolve the errors.• Customers feel that their privacy is being invaded when they are required to submit seemingly unnecessary personal information.• Customers don’t want to wait.
  18. 18. Guideline• Add Descriptions To Form Field Labels• Use Clear Error IndicationsDon’t Require Seemingly Unnecessary Information. If the information is necessary, at least explain why.Instant Field Validation and ConfirmationUnsaturated Button Color for Secondary ActionsFast Spinning Loading IconHighlighting the Order Summary Box• Use Only One Column For Form Fields
  19. 19. Case studies• http://tiki.vn
  20. 20. Case studies• http://www.nhommua.com
  21. 21. Case studies• http://123.vn
  22. 22. Case studies• http://zalora.vn
  23. 23. Avoid Contextual Words Like “Continue”• Issue: Contextual words such as “Continue” are ambiguous and tend to confuse customers.
  24. 24. Case studies• http://zalora.vn
  25. 25. Case studies• http://tiki.vn
  26. 26. Coupon in Checkout processTEST: (Straight A/B test for an online retailer in the women’s clothing market)Control: Coupon code on the first page of the checkout process.Variation 1: Coupon code removed.Results:Control: 3.8% conversion rate. (967 sales / 25,489 unique visitors)Variation 1: 5.1% conversion rate. (1,276 sales / 24,991 unique visitors)Source:http://www.conversiondoctor.com/conversion-blog/coupon-codes-increase-checkout-abandonm
  27. 27. Conversion Rate Optimization
  28. 28. Conversion?• “Conversion” is an online marketing term that describes an instance of a visitor to your website performing an action that you deem to be desirable. For example, if you run an online store, one likely conversion would be the sale of a product.• Conversions are tracked using a conversion rate: the ratio of all visitors to the number of visitors who perform the desired action.• Most website owners want a high conversion rate. The question is, how do you turn a new visitor into a loyal customer?
  29. 29. What sell?• To sell effectively, you have to sell solutions, not products.You also have to sell benefits, not features.Your customers aren’t looking for products, services or features: they’re looking for solutions to their specific problems.• Features are just the things that make up your product or service, but benefits are what people get from using your product; they are the reason for choosing your product.
  30. 30. What sell?iPod nano: 16 gigabytes vs. 1,000 songs,which is better?
  31. 31. What sell?• Once you know what you’re selling, you need to break down the barriers that customers will put up when evaluating how valuable your product is to them. These barriers are their reasons why they shouldn’t buy your product.
  32. 32. AIDA• One very popular approach to sales is call AIDA, which stands for “Awareness, Interest, Desire, Action”. It can be used in a conversion funnel on the Web, where the website, instead of the salespersion, plays the key role in selling.
  33. 33. AIDA: Awareness• This is especially important for websites because of the speed with which potential customers could navigate away from your website.You have just a brief moment to grab their attention, and you should have to keep it long enough to close the sale.
  34. 34. AIDA: Awareness6ix give customers first impression by using a very highquality product images.
  35. 35. AIDA: AwarenessBad: MuaChung shows an annoying modal box
  36. 36. AIDA: AwarenessBad: SohaPhim’s banners look like Ads
  37. 37. AIDA: Interest & Desire• These stages are the part that sells the product. Clearly & concisely what you’re product does and how it will give your visitor real value. Create desire by talking about the benefits your product will bring to customers
  38. 38. AIDA: Interest & Desire Interest Interest Action Desire
  39. 39. AIDA: Action• The final step is a call to “Action”. At this stage, you have to close the sale, so the call to action is absolutely vital.This is why checkout process plays a very important role in increasing conversion rate.• Recently, the letter “S”, which stands for “Satisfaction”, was added to AIDA, forming AIDAS. Getting customers is great, but getting those customers to return or thell their friends about your product is even better.
  40. 40. Best Practices
  41. 41. Show The Product• Seeing an actual product before buying it gives you a lot more information about it.You get a good feel for what you’re purchasing.• If you sell digital goods, such as applications or website templates, showing screenshot - or, even better, videos - is essential
  42. 42. Let People Try It• One of the best way to sell your product is to get people to try it out. When people try a product, they are doing more than just looking at it or considering it: they are actually using it, which means they are getting involved.
  43. 43. Case StudyJoomlart lets users previewing themes beforedownloading.
  44. 44. Social Proof• Social proof is a psychological phenomenon that occurs when people aren’t sure about the course of action they should take and so do what every one else does.• We can use social proof to help boost conversions for popular products by advertising that they’re popular or that others have approved of them.
  45. 45. Social ProofTiki.vn has a strong community
  46. 46. Shipping Costs• Don’t push customers away with shipping costs. Study by Invesp discovered that 44% of users abandon shopping cart because of high shipping cost.• A study by ForeSee Results discovered that the deciding factor that closed the deal for 34% of users was that the stores didn’t charge shipping costs• Offering free delivery may not be a viable option for every store. If you do charge a shipping cost, be transparent about it and offer clear and simple shipping options
  47. 47. Money-Back Guarantee to Eliminate Risk• Risk is one of the biggest barriers to conversions. Can people trust your company? What if your product doesn’t do what they want? What if they discover something better?• The best way to tackle risk is to offer money-back guarantee
  48. 48. Make It Easy To Sign Up• Sign-up forms are barriers. Nobody likes filling them out because they take time and effort. The sign-up form is probably the last stage in your conversion funnel, so make sure you lose as few people as possible by making the form short and simple.• Don’t ask for personal information, it can always be filled in later.
  49. 49. Testing
  50. 50. The Importance of Testing• Every website is different and serves a unique audience, so it’s always best to fine-tune your strategy and tactics. Techniques that work well for one website may not work for another. How do you figure what works best for you? TEST!• According to Steve Krug (author of Don’t Make Me Think), testing one user is 100% better than testing none, and testing one user early in the project is better than testing 50 near the end
  51. 51. Appendix
  52. 52. Top 10 Conversion Optimization Problems In Checkout Process
  53. 53. Recommendation• Books: Don’t Make Me Think (Steve Krug), Getting Real (37Signals), The Smashing Book (Smashing Magazine), Designing Web Interface (Bill Scott)• Website/ Magazine: http://uxmag.com http://uxdesign.smashingmagazine.com http://ux.stackexchange.com http://52weeksofux.comhttp://www.uxbooth.com
  54. 54. Contact• Long Nguyen Hai: hailong@dynabyte.vn @webvampire• Thang Nguyen Viet: vietthang@dynabyte.vn @thangnv77
  55. 55. Thank You!