Improving UX checkout
•Download as PPTX, PDF•
1 like•537 views
This document discusses ways to improve the checkout process and reduce shopping cart abandonment rates. It notes that the average abandonment rate is over 68% and that the top reason for abandonment is the checkout process. Better UX design could potentially recover 63% of the $4 trillion in abandoned cart sales annually. The document provides tips for each part of the checkout process, including making registration optional, reducing forms to only required fields, validating fields with smart errors, improving credit card forms, and optimizing the mobile checkout experience.
Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
Similar to Improving UX checkout
Similar to Improving UX checkout (20)
Recently uploaded
Recently uploaded (16)
Improving UX checkout
- 1. MAKING PAYMENTS BETTER LIGHTNING TALK INSERT YOUR CREDIT CARD NUMBER HERE
- 2. The average shopping cart abandonment rate is over 68%. The number one reason? The checkout process. 2
- 3. The value of the abandoned carts? 4 trillion dollars. 3
- 4. According to BI projections 63% of that amount is potentially recoverable. 4
- 5. Why oh why? 5 NOT READY TO BUY UNEXPECTED SHIPPING COSTS PAYMENT SECURITY CONCERNS HAVING TO CREATE AN ACCOUNT HORRIBLE UX NO COUPON CODE
- 7. Anatomy of the checkout process 7 Login/guest checkout Cart Page Billing and Shipping Summary and confirmation Page Payment
- 8. LOGIN & GUEST CHECKOUT: MAKE REGISTRATION LOOK OPTIONAL 8
- 9. Save your users time and effort Ask for the information you absolutely need to process the sale FORMS 9
- 10. Keep it simple (for the user) • Prefill when logical • Visually indicate missing fields or errors • Make it clear which field is required FORMS 10
- 11. Tell the user where he/she f@!#ed up. It reduce frustration and makes things easier to fix. IN FIELD VALIDATION AND SMART ERROR NOTIFICATIONS 11
- 12. • Display cart details • Modify the quantity or remove items. • Final price • Product photos • Save for later or wishlist Cart Page 12
- 14. PAYMENT 14
- 15. SUMMARY AND CONFIRMATION PAGE 15
- 16. CREDIT CARDS
- 17. • Ask for essentials only • Use smart error notification • Use input masks • Offer card scanning options 4 tips to improve credit card forms 17
- 18. Offer card scanning options 18
- 19. HOW TO VALIDATE A CREDIT CARD NUMBER WITH YOUR MIND http://www.rosettacode.org/wiki/Luhn_test_of_credit_card_numbers http://digitalboutique.co.za/credit-card-security-ecommerce-shops/
- 20. Limiting the number of characters 20
- 21. new Card({ form: 'form', container: '.card'}) • Animations for 4 different card types • Intuitive experience • It shows the security code on the card • Pure CSS, HTML, and Javascript (no images) • 100% free and open source Making better credit card forms 21 http://jessepollak.github.io/card/ http://jquerycreditcardvalidator.com/
- 22. http://kenkeiter.com/skeuocard/ Progressively enhance credit card input 22
- 24. MOBILE
- 25. Avoid long scrolling lists Show appropriate keyboard layouts: • Use calendar view with dates • Use input email type • Use numerical for credit card info Disable auto-correct when it is logical MOBILE http://mobileinputtypes.com/
- 26. @myriamjessier
Editor's Notes
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- Vwo EcOMMERCE SURVEY https://static.cleverbridge.com/corporatecdn/www/uploads/2015/09/VWO_anatomy_perfect_checkout_page.png Unexpected shipping costs 28% Having to create a new user account 23% Not ready to buy yet 16% Payment security concerns 13% Poor user experience 12% Failed to find a coupon code 8%
- https://static.cleverbridge.com/corporatecdn/www/uploads/2015/09/VWO_anatomy_perfect_checkout_page.png
- https://static.cleverbridge.com/corporatecdn/www/uploads/2015/09/VWO_anatomy_perfect_checkout_page.png
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- City and state: remove those fields in favor of zipcode to populate info.
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- Display cart details: let us review our stuff like in stores. Le me change my minde and modify the quantity or remove items. Include the final price. No surprise taxes or shipping or other types of fees should pop up after this. Include a photo of the products I am buying. Allow items to be saved for later to retarget window shoppers for discouts. 54% of shoppers say they would purchase products left in their carts if offered again at a discounted price.
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/ a fantastic solution for credit card forms. Input masks help limit what can be input into a field, based on the information you’re trying to acquire. It will automatically notify you of an error if the input doesn’t match the requirements, and will require correction before the user can proceed. Additionally, it allows you to consolidate several pieces of information into a single field, which is especially helpful on mobile. Take a look at a demo of Square Wallet’s credit card input, created by Zachary Forrest:
- https://www.usertesting.com/blog/2015/09/16/credit-card-ux/ https://www.card.io/
- The "mod 10" algorithm, is a simple checksum formula. It is used by some credit card companies to distinguish valid credit card numbers from what could be a random selection of digits. Those companies using credit card numbers that can be validated by the Luhn test have numbers that pass the following test:
- Credit card type: the first 4 digits help identify the type of card. Have the form detect the card type automatically. No need to change your form Card works as a drop in addition to your current credit card form. No need edit input names or HTML — you can leave everything as is. All pure CSS, HTML, and Javascript There are no images used. The credit cards and logos are all hand-coded with HTML and CSS. 100% free and open source Feel free to use, modify, and distribute this library as much as you'd like under the MIT license. How do I use this? Visit the Github page and follow the instructions to get started. Can I just use the CSS to style cards? Yes! Right now, card ships with pure-CSS cards for Mastercard, Visa, Discover, and American Express. You can see a demo usage here.
- Input types are fast easy and effective <input type = “email” > <input type="text" autocorrect="off" /> <input type="search"> <input type="month"> <input type="datetime"> <input type="date"> <input type="password"> <input type="number"> <input type="tel"> <input type="text"> <input type="password">