e-commerce checkout design: principles, guidelines & case studies
DESCRIPTION
Author:Long Nguyen Hai & Thang Nguyen Viet Event: Vietnam UX Group meeting on 18th AugustTRANSCRIPT
![Page 1: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/1.jpg)
E-commerce Checkout Design:
Principles, Guidelines & Case
StudiesLong Nguyen Hai & Thang Nguyen Viet
![Page 2: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/2.jpg)
Table Of Content
•Important Rules & Principles
•Fundamental Guidelines
•Conversion Rate Optimization
![Page 3: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/3.jpg)
Numbers
65.23%Abandonment Rate
2.13%Conversion Rate
Why?44% High Shipping Cost25% High Product Price22% No Shipping Cost Info14% No Guest Checkout Option 12% Need Too Much Info11% Complex Checkout Process
Infographic by Website Optimization Company Invesp
![Page 4: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/4.jpg)
Important Rules & Principles
![Page 5: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/5.jpg)
7 ± 2 principle
According to George A. Miller’s studies humans’ short term memory can retain only about five to nine things at one time.
![Page 6: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/6.jpg)
2-Second-Rule
A loose principle that a user shouldn’t need to wait more than 2 seconds for certain types of system response, such as application-switching and application launch time.
Reliable principle: the less users have to wait, the better is the user experience.
![Page 7: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/7.jpg)
3-Click-Rule
According to this rule users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks. In other words, the rule emphasizes the importance of clear navigation, logical structure and easy-to-follow site hierarchy
![Page 8: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/8.jpg)
80/20 Rule
This 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 your clients”), but can also be applied to design and usability.
![Page 9: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/9.jpg)
Fitts’ Law
Fitts’ Law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target. The law is usually applied to the movement of the mouse visitors have to perform to get from point A to point B.
![Page 10: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/10.jpg)
Fundamental Guidelines
![Page 11: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/11.jpg)
Process Should Be Linear
• Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout
![Page 14: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/14.jpg)
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 ...)
![Page 15: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/15.jpg)
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.
![Page 16: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/16.jpg)
Case studies
• http://muachung.vn
• http://www.zalora.vn
• http://pub.vn/
![Page 17: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/17.jpg)
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.
![Page 18: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/18.jpg)
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
![Page 23: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/23.jpg)
Avoid Contextual Words Like “Continue”
• Issue: Contextual words such as “Continue” are ambiguous and tend to confuse customers.
![Page 26: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/26.jpg)
Coupon in Checkout process
TEST: (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-abandonment
![Page 27: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/27.jpg)
Conversion Rate Optimization
![Page 28: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/28.jpg)
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?
![Page 29: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/29.jpg)
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.
![Page 30: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/30.jpg)
What sell?
iPod nano: 16 gigabytes vs. 1,000 songs, which is better?
![Page 31: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/31.jpg)
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.
![Page 32: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/32.jpg)
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.
![Page 33: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/33.jpg)
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.
![Page 34: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/34.jpg)
AIDA: Awareness6ix give customers first impression by using a very high quality product images.
![Page 35: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/35.jpg)
AIDA: AwarenessBad: MuaChung shows an annoying modal box
![Page 36: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/36.jpg)
AIDA: Awareness
Bad: SohaPhim’s banners look like Ads
![Page 37: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/37.jpg)
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
![Page 38: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/38.jpg)
AIDA: Interest & Desire
DesireDesireDesireDesire
InterestInterestInterestInterest
InterestInterestInterestInterest
ActionActionActionAction
![Page 39: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/39.jpg)
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.
![Page 40: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/40.jpg)
Best Practices
![Page 41: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/41.jpg)
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
![Page 42: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/42.jpg)
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.
![Page 43: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/43.jpg)
Case StudyJoomlart lets users previewing themes before downloading.
![Page 44: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/44.jpg)
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.
![Page 45: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/45.jpg)
Social ProofTiki.vn has a strong community
![Page 46: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/46.jpg)
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
![Page 47: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/47.jpg)
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
![Page 48: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/48.jpg)
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.
![Page 49: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/49.jpg)
Testing
![Page 50: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/50.jpg)
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
![Page 51: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/51.jpg)
Appendix
![Page 52: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/52.jpg)
Top 10 Conversion Optimization Problems In Checkout Process
![Page 53: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/53.jpg)
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.comhttp://uxdesign.smashingmagazine.comhttp://ux.stackexchange.comhttp://52weeksofux.comhttp://www.uxbooth.com
![Page 54: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/54.jpg)
Contact
• Long Nguyen Hai:[email protected] @webvampire
• Thang Nguyen Viet:[email protected] @thangnv77
![Page 55: E-commerce Checkout Design: Principles, Guidelines & Case Studies](https://reader034.vdocument.in/reader034/viewer/2022051513/5479d5e6b4795968098b4855/html5/thumbnails/55.jpg)
Thank You!