E-commerce Checkout Design: Principles, Guidelines & Case Studies
E-commerce Checkout Design: Principles, Guidelines & Case Studies Long Nguyen Hai & Thang Nguyen Viet
Table Of Content• Important Rules & Principles• Fundamental Guidelines• Conversion Rate Optimization
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
7 ± 2 principleAccording to George A. Miller’s studies humans’short term memory can retain only about fiveto nine things at one time.
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.
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
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.
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.
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
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
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 highquality product images.
AIDA: AwarenessBad: MuaChung shows an annoying modal box
AIDA: AwarenessBad: 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: 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.
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 beforedownloading.
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.
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.
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
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.com http://uxdesign.smashingmagazine.com http://ux.stackexchange.com http://52weeksofux.comhttp://www.uxbooth.com