e-commerce checkout design: principles, guidelines & case studies
DESCRIPTION
Author:Long Nguyen Hai & Thang Nguyen Viet Event: Vietnam UX Group meeting on 18th AugustTRANSCRIPT
E-commerce Checkout Design:
Principles, Guidelines & Case
StudiesLong Nguyen Hai & Thang Nguyen Viet
Table Of Content
•Important Rules & Principles
•Fundamental Guidelines
•Conversion Rate Optimization
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
Important Rules & Principles
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.
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.
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
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.
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.
Fundamental Guidelines
Process Should Be Linear
• Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout
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 ...)
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.
Case studies
• http://muachung.vn
• http://www.zalora.vn
• http://pub.vn/
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.
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
Avoid Contextual Words Like “Continue”
• Issue: Contextual words such as “Continue” are ambiguous and tend to confuse customers.
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
Conversion Rate Optimization
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?
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.
What sell?
iPod nano: 16 gigabytes vs. 1,000 songs, which is better?
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.
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.
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.
AIDA: Awareness6ix give customers first impression by using a very high quality product images.
AIDA: AwarenessBad: MuaChung shows an annoying modal box
AIDA: Awareness
Bad: SohaPhim’s banners look like Ads
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
AIDA: Interest & Desire
DesireDesireDesireDesire
InterestInterestInterestInterest
InterestInterestInterestInterest
ActionActionActionAction
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.
Best Practices
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
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.
Case StudyJoomlart lets users previewing themes before downloading.
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.
Social ProofTiki.vn has a strong community
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
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
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.
Testing
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
Appendix
Top 10 Conversion Optimization Problems In Checkout Process
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
Contact
• Long Nguyen Hai:[email protected] @webvampire
• Thang Nguyen Viet:[email protected] @thangnv77
Thank You!