{"id":20106,"date":"2015-11-19T10:15:21","date_gmt":"2015-11-19T16:15:21","guid":{"rendered":"https:\/\/crazyeggblog.wpengine.com\/?p=20106"},"modified":"2026-01-06T15:15:15","modified_gmt":"2026-01-06T23:15:15","slug":"perfect-mobile-ecommerce-checkout","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/","title":{"rendered":"The Anatomy of The Perfect Mobile Ecommerce Checkout Page"},"content":{"rendered":"<p>A significant amount of <a href=\"https:\/\/baymard.com\/checkout-usability\">testing<\/a>, <a href=\"https:\/\/www.sitepoint.com\/ecommerce-checkout-design-fundamentals\/\">articles<\/a> and <a href=\"https:\/\/conversionxl.com\/how-to-design-an-ecommerce-checkout-flow-that-converts\/\">research<\/a> has been poured into the subject of the optimal ecommerce checkout flow in the UX and CRO community.<!--more--><\/p>\n<p>Extensive tests have gone on to prove that both one-page and multi-step checkout pages work in different circumstances. Guest checkouts are generally expected to be the norm to help \u2018reduce friction\u2019 for first time shoppers. Additionally:<\/p>\n<ul>\n<li>A security badge at checkout can help reduce shopper anxiety at first contact with an online store.<\/li>\n<li>The voucher\/coupon code entries should be displayed as expandable links or buttons rather than text boxes (to keep shoppers from wandering to coupon sites).<\/li>\n<li>The general rule of thumb is to keep fields to an absolute minimum at checkout.<\/li>\n<\/ul>\n<p>Although this is all great advice, the problem with the above is that they are all the best checkout practices for desktops. There is currently quite limited coverage on the optimal mobile checkout. With mobile devices now accounting for <a href=\"https:\/\/www.shopify.co.uk\/blog\/15206517-mobile-now-accounts-for-50-3-of-all-ecommerce-traffic\">over 50 percent of ecommerce traffic<\/a>, this post will break down the mobile checkout flow of some of the most mobile savvy ecommerce brands.<\/p>\n<p><b>Note: The great tips presented in this post are simply best practices. There is no guarantee they will improve your mobile commerce conversion rates. Use them to form hypotheses and then commence testing!<\/b><\/p>\n<h2>1. Designing For Touch (the thumb) And Not The Mouse<\/h2>\n<p>According to <a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2013\/02\/how-do-users-really-hold-mobile-devices.php\" target=\"_blank\" rel=\"noopener\">research undertaken by UX Matters<\/a>, when users interact and touch their screens, they hold their phones in three basic ways:<\/p>\n<ul>\n<li>One handed \u2013 49%<\/li>\n<li>Cradled \u2013 39%<\/li>\n<li>Two-handed \u2013 15%<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/how-people-hold-and-interact-with-mobile-phones.png\"><img decoding=\"async\" width=\"660\" height=\"409\" class=\"aligncenter size-full wp-image-20107\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/how-people-hold-and-interact-with-mobile-phones.png\" alt=\"Holding phones\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/how-people-hold-and-interact-with-mobile-phones.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/how-people-hold-and-interact-with-mobile-phones-300x186.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><b>Figure 1: How people hold and interact with mobile phones [credits: <a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2013\/02\/how-do-users-really-hold-mobile-devices.php\">UX Matters<\/a>, February 2013]<\/b><\/p>\n<p>In all occurrences, the thumb plays a very active role in the screen touch interaction experience. Here is what the \u2018Thumb Zone\u2019 heat map <a href=\"https:\/\/scotthurff.com\/posts\/how-to-design-for-thumbs-in-the-era-of-huge-screens\" target=\"_blank\" rel=\"noopener\">as coined by Scott Hurf<\/a> looks like:<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thumb-zones-lineup.png\"><img decoding=\"async\" width=\"660\" height=\"335\" class=\"aligncenter size-full wp-image-20124\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thumb-zones-lineup.png\" alt=\"Thumb zone\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thumb-zones-lineup.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thumb-zones-lineup-300x152.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Here is another illustration that shows easy, ok and hard to reach areas of a large phone screen for a thumb.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/large_smartphones1.png\"><img decoding=\"async\" width=\"660\" height=\"463\" class=\"aligncenter size-full wp-image-20111\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/large_smartphones1.png\" alt=\"large smartphones\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/large_smartphones1.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/large_smartphones1-300x210.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>In the context of an ecommerce checkout, it will be prudent to place the most important elements in the easy and ok areas of the screen so that they are within reach of the thumb.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/amazon-basket.png\"><img decoding=\"async\" width=\"660\" height=\"581\" class=\"aligncenter size-full wp-image-20131\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/amazon-basket.png\" alt=\"Amazon Basket\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/amazon-basket.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/amazon-basket-300x264.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Here is what Amazon\u2019s shopping basket page looks like; notice that the logo, subtotal and message box are in the \u2018hard\u2019 to reach area and that the \u2018proceed to checkout\u2019 button, and individual products are all within reach of a one-handed thumb.<\/p>\n<p>Another point worth noting is that the use of scrollability brings difficult to reach areas to the \u2018easy\u2019 and \u2018ok\u2019 area.<\/p>\n<h2>2. Avoid Long One-Page Mobile Checkout Pages \u2013 Break up Checkout Into Multiple Pages<\/h2>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-checkout-next-buttons.png\"><img decoding=\"async\" width=\"660\" height=\"501\" class=\"aligncenter size-full wp-image-20136\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-checkout-next-buttons.png\" alt=\"Boden checkout\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-checkout-next-buttons.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-checkout-next-buttons-300x228.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Typing and text input on mobile devices are a UX challenge; typing typically tends to be slower on mobile touch screens as compared to desktops where typing is carried out via keyboards.<\/p>\n<p>Touch screens also necessitate the need for on-screen keyboards taking up half of the viewable screen area when in use. This is why you want to keep text input to the minimum for shoppers on your checkout page. Remember that prior to getting to the checkout page, shoppers would have only been browsing, selecting options and pressing buttons such as the \u2018add to cart\u2019 button. The checkout is probably the only page in the funnel that will require keyboard input entry.<\/p>\n<p>Breaking up forms such as the checkout page into multiple pages that only takes up half of the screen, with a clear \u201c<b>next<\/b>\u201d button and progress indicator ensures that visitors are not intimidated to by the keyboard input entry requirements of an intimidatingly long form.<\/p>\n<h2>3. How To Break Down Your Checkout (progress indicators)<\/h2>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/nasty-gal.png\"><img decoding=\"async\" width=\"660\" height=\"432\" class=\"aligncenter size-full wp-image-20114\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/nasty-gal.png\" alt=\"Nasty gal\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/nasty-gal.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/nasty-gal-300x196.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>By placing the minimum number of required fields at each step of your checkout (ideally 3 steps), the best way to manage the expectations of shoppers is to display a progress indicator. A progress indicator reassures and provides a time estimate for the length of time their mobile checkout is going to take.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/topman-progress-indicators.png\"><img decoding=\"async\" width=\"660\" height=\"396\" class=\"aligncenter size-full wp-image-20125\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/topman-progress-indicators.png\" alt=\"Topman progress indicator\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/topman-progress-indicators.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/topman-progress-indicators-300x180.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Also, use color in your progress indicator to indicate active and inactive steps. Just grey out the yet to be completed steps and color either active or completed steps.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/accordion-apple-checkout.jpg\"><img decoding=\"async\" width=\"660\" height=\"495\" class=\"aligncenter size-full wp-image-20130\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/accordion-apple-checkout.jpg\" alt=\"accordion apple checkout\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/accordion-apple-checkout.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/accordion-apple-checkout-300x225.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>As an alternative to progress indicators, <a href=\"https:\/\/www.nngroup.com\/articles\/mobile-accordions\/\" target=\"_blank\" rel=\"noopener\">consider using accordions<\/a> to not only conserve space in your checkout page by collapsing each step but to also indicate progress at checkout to shoppers.<\/p>\n<p>Accordions are an excellent tool in your mobile design arsenal, as they condense otherwise long forms and enable users to have a birds\u2019 eye view of the entire form.<\/p>\n<h2>4. Speed and Smooth Transition Through Each Checkout Step<\/h2>\n<p>A fundamental principle of increasing and optimizing conversions at a mobile checkout is getting shoppers through your checkout <i>as easily and quickly as possible<\/i>. In order to make this happen, <b>speed<\/b> and <b>shopper transition<\/b> through each element at each of step should be optimal.<\/p>\n<h3>Check-Out Speed<\/h3>\n<p>From a speed standpoint, 85% of mobile users expect pages to load as fast or faster than they load on the desktop (which is about 2 seconds). This is, of course, factoring in latency issues on both 3G and 4G cellular internet access connections.<\/p>\n<p>At a mobile checkout, it is even more essential to nail page load times to under 3 seconds or 57% of visitors will <a href=\"https:\/\/www.akamai.com\/html\/about\/press\/releases\/2010\/press_061410.html\" target=\"_blank\" rel=\"noopener\">potentially abandon their carts<\/a>.<\/p>\n<p>In regards speeding up the mobile checkout:<\/p>\n<ul>\n<li>Ditch any graphic intense objects such as carousels,<\/li>\n<li>Remove social media scripts or any other third party scripts not necessarily needed on the checkout page,<\/li>\n<li>Compulsory graphics such as your logo or icons should be CDN (Content Delivery Network) hosted,<\/li>\n<li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/module\/\" target=\"_blank\" rel=\"noopener\">Install Google page speed<\/a> on your server to improve latency and<\/li>\n<li>Stress test your checkout page in a way that simulates high peak periods from mobile traffic<\/li>\n<\/ul>\n<h3>Shopper Transition<\/h3>\n<p>From a shopper transition standpoint, ensure your mobile checkout page includes the following:<\/p>\n<h4>TabIndex: Next\/Previous<\/h4>\n<p><a href=\"https:\/\/www.wufoo.com\/html5\/attributes\/27-tabindex.html\" target=\"_blank\" rel=\"noopener\">Place a HTML tabindex attribute<\/a> to accurately specify the form fields\u2019 order sequentially, from the top to bottom of your checkout page. This will enable shoppers to move swiftly between input fields.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/tabindex-keyboard.png\"><img decoding=\"async\" width=\"660\" height=\"279\" class=\"aligncenter size-full wp-image-20122\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/tabindex-keyboard.png\" alt=\"tabindex keyboard\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/tabindex-keyboard.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/tabindex-keyboard-300x127.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h4>Take On A Stacked Design Approach: Place Each Text Input Field On An Individual Row<\/h4>\n<p>Vertically stack up each text input field on individual rows with labels above each input field. Avoid placing two or more fields in a single row. This ensures a smooth sequential transition through the checkout form.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/One-row-per-Text-input.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-20115\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/One-row-per-Text-input.png\" alt=\"one row per text input\" width=\"660\" height=\"486\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/One-row-per-Text-input.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/One-row-per-Text-input-300x221.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h4>Other Important Elements Of Shopper Transition<\/h4>\n<p>Other means of easing mobile checkout transition (which will be discussed in more detail below) include:<\/p>\n<ul>\n<li>Auto-detect \/ auto-fill support,<\/li>\n<li>Reducing input fields to the minimum required i.e. not asking shoppers registering new accounts to enter their email addresses and passwords twice for confirmation<\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/reveal-hidden-passwords-in-browsers\/\" target=\"_blank\" rel=\"noopener\">Revealing passwords<\/a> in browsers to users at the point of entry or auto generate password and email passwords for new registrations<\/li>\n<li>Address finders,<\/li>\n<li>Bigger end-to-end buttons,<\/li>\n<li>Triggering numeric keyboards for phone number and credit card entries and<\/li>\n<li>Offering guest checkout<\/li>\n<\/ul>\n<h2>5. Buttons With Light Gradients \u2013 Not Links<\/h2>\n<p>Buttons are a hugely important Call to Action (CTA) at checkout.<\/p>\n<p>As a rule of the thumb, ensure that there is only one colored button for the most important action on the specific page at checkout. A grey or lighter color can be used on other lower priority buttons such as the \u2018back\u2019 or \u2018continue shopping\u2019 buttons.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/johnlewis-checkout-buttons.png\"><img decoding=\"async\" width=\"660\" height=\"381\" class=\"aligncenter size-full wp-image-20108\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/johnlewis-checkout-buttons.png\" alt=\"john lewis\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/johnlewis-checkout-buttons.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/johnlewis-checkout-buttons-300x173.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blue-gradient-button-apple.jpg\"><img decoding=\"async\" width=\"660\" height=\"495\" class=\"aligncenter size-full wp-image-20135\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blue-gradient-button-apple.jpg\" alt=\"apple button\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blue-gradient-button-apple.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blue-gradient-button-apple-300x225.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Adding some subtle gradient to CTA buttons makes them enticing to tap or press. Also <a href=\"https:\/\/stackoverflow.com\/questions\/12902449\/changing-look-when-tapping-button-with-layer-gradient\" target=\"_blank\" rel=\"noopener\">applying a change in gradient color<\/a> to a \u2018Tap\u2019 event on buttons makes the user experience a bit more realistic.<\/p>\n<h2>6. Wide End to End Buttons &#8211; Thumbs Aren\u2019t As Precise As Mice<\/h2>\n<p>A fundamental mobile interface design principle is making your targets big and easy for users to tap with their fingers and thumbs (which runs contrary to desktop mouse \u2018click\u2019 conventions).<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/Designing-for-Touch-the-thumb-and-not-the-mouse.png\"><img decoding=\"async\" width=\"660\" height=\"330\" class=\"aligncenter size-full wp-image-20141\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/Designing-for-Touch-the-thumb-and-not-the-mouse.png\" alt=\"design for touch\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/Designing-for-Touch-the-thumb-and-not-the-mouse.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/Designing-for-Touch-the-thumb-and-not-the-mouse-300x150.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>According to <a href=\"https:\/\/touchlab.mit.edu\/publications\/2003_009.pdf\" target=\"_blank\" rel=\"noopener\">a study on the Mechanics of Tactile Sense by Human Fingerprints<\/a> carried out by MIT Touch Lab, the average width of an adult thumb is 1 inch (2.5 cm); which converts to <b>72 pixels<\/b> and that of the index finger is 1.6 to 2 cm (16 &#8211; 20 mm); which converts to <b>45 &#8211; 57 pixels<\/b>.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-buttons.jpg\"><img decoding=\"async\" width=\"660\" height=\"495\" class=\"aligncenter size-full wp-image-20127\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-buttons.jpg\" alt=\"end to end buttons\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-buttons.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-buttons-300x225.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Given that the <b>checkout, guest checkout<\/b> or <b>next buttons<\/b> at checkout are the primary Call To Action (CTA) elements at specific steps in the checkout process, ensure that these buttons are full width (covering and entire row) and at least 44 pixels.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/casper-end-to-end-buttons.jpg\"><img decoding=\"async\" width=\"660\" height=\"316\" class=\"aligncenter size-full wp-image-20140\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/casper-end-to-end-buttons.jpg\" alt=\"casper end to end button\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/casper-end-to-end-buttons.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/casper-end-to-end-buttons-300x144.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-made_com.jpg\"><img decoding=\"async\" width=\"660\" height=\"472\" class=\"aligncenter size-full wp-image-20128\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-made_com.jpg\" alt=\"wide end to end buttons\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-made_com.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/wide-end-to-end-made_com-300x215.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h2>7. Text Fields And Labels: The Bigger Is Better<\/h2>\n<p>Prevent input Zoom by ensuring <a href=\"https:\/\/uxcellence.com\/2014\/01\/15\/quick-fix-increase-font-size-to-16px-to-fix-input-zoom\/\" target=\"_blank\" rel=\"noopener\">text entered by users in input fields is readable<\/a> (set font size to 16px).<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/readable-input-fields.gif\"><img decoding=\"async\" width=\"635\" height=\"472\" class=\"aligncenter size-full wp-image-20120\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/readable-input-fields.gif\" alt=\"input fields\" \/><\/a><\/p>\n<h2>8. Click To Call<\/h2>\n<p>A significant number of online retailers have their phone numbers at the checkout pages in a bid to ease shopper anxiety, answer any last minute questions and to take orders from shoppers that do not want to necessarily checkout online.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/phone-call-CTA-john-lewis.jpg\"><img decoding=\"async\" width=\"660\" height=\"456\" class=\"aligncenter size-full wp-image-20116\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/phone-call-CTA-john-lewis.jpg\" alt=\"cta john lewis\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/phone-call-CTA-john-lewis.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/phone-call-CTA-john-lewis-300x207.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Ensuring that your phone numbers are legibly displayed along with an iconized call-to-action will help divert mobile shoppers keen to speak to your customer services and sales team on your mobile checkout page(s).<\/p>\n<h2>9. Guest Checkout<\/h2>\n<p>A major shopper frustration at checkout is a mandatory registration to create an account before they can purchase. This is because forcing new shoppers to register an account before making their purchase can be a huge barrier to selling.<\/p>\n<p>On mobile checkouts, here are a few guest checkout options worth testing:<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/guest-checkout-made-first-option.jpg\"><img decoding=\"async\" width=\"660\" height=\"510\" class=\"aligncenter size-full wp-image-20145\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/guest-checkout-made-first-option.jpg\" alt=\"guest checkout\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/guest-checkout-made-first-option.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/guest-checkout-made-first-option-300x232.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-guest-checkout.jpg\"><img decoding=\"async\" width=\"660\" height=\"615\" class=\"aligncenter size-full wp-image-20137\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-guest-checkout.jpg\" alt=\"boden guest checkout\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-guest-checkout.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-guest-checkout-300x280.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Place your Guest Checkout button as the first option (before\/or above the sign in button for existing customers).<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/walis-checkout-input-fields.jpg\"><img decoding=\"async\" width=\"660\" height=\"518\" class=\"aligncenter size-full wp-image-20126\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/walis-checkout-input-fields.jpg\" alt=\"wails checkout\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/walis-checkout-input-fields.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/walis-checkout-input-fields-300x235.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Try reducing input fields on guest checkout forms to the absolute minimum required. Avoid asking guests to confirm their email addresses by entering it twice. Also, use features such as an address finder to cut down input entry for addresses.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-step-2.jpg\"><img decoding=\"async\" width=\"660\" height=\"495\" class=\"aligncenter size-full wp-image-20138\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-step-2.jpg\" alt=\"boden step 2\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-step-2.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/boden-step-2-300x225.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h2>10. Session Aware &#8211; Persistent Checkouts<\/h2>\n<p>Online shoppers are device agnostic &#8211; they could browse on their desktops at work and finally commit to purchasing on either their mobiles or tablets on their commute back home or at home. It will, in essence, take most shoppers two or more visits from different devices before finalizing a purchase. Persistent checkouts address this problem especially for existing customers.<\/p>\n<p>Magento offers a persistent cart option that if used in combination with well timed triggered messaging can significantly reduce cart abandonment.<\/p>\n<p>Also making guests\u2019 mobile shopping carts persist for 30 days or more might be a good idea to help shoppers return to their purchase.<\/p>\n<h2>11. Extended Validation SSL Certificates \u2013 Green Bar Assurance<\/h2>\n<p>Basic SSL is not as convincing enough as Extended Validation Certificate (EV) in driving a sense of security to shoppers. This is because Extended Validation Certificate (EV) not only requires a more extensive entity identity verification, but also displays the green assurance bar with your organization&#8217;s name (rather than just your URL).<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/evc-jackwills.jpg\"><img decoding=\"async\" width=\"660\" height=\"288\" class=\"aligncenter size-full wp-image-20142\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/evc-jackwills.jpg\" alt=\"jack wills\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/evc-jackwills.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/evc-jackwills-300x131.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h2>12. Use Expandable Menus For Shipping And FAQs \u2013 Not Links (keep shoppers in checkout, not out)<\/h2>\n<p>Minimizing the use of links at checkout can potentially help reduce distractions. Important pieces of information such as shipping, FAQs and your return policy can be placed in <a href=\"https:\/\/ux.stackexchange.com\/questions\/83205\/responsive-design-checkout-single-page-and-accordion\" target=\"_blank\" rel=\"noopener\">expandable accordion dropdowns<\/a>.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-apple-checkout.jpg\"><img decoding=\"async\" width=\"660\" height=\"372\" class=\"aligncenter size-full wp-image-20143\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-apple-checkout.jpg\" alt=\"expandable apple checkout\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-apple-checkout.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-apple-checkout-300x169.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Accordions condense such information on your checkout page, thereby eliminating the need to link to dedicated information pages.<\/p>\n<p><center><iframe src=\"https:\/\/www.youtube.com\/embed\/xGKhzZkwv1w\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-faq-made.jpg\"><img decoding=\"async\" width=\"660\" height=\"545\" class=\"aligncenter size-full wp-image-20144\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-faq-made.jpg\" alt=\"expandable faq made\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-faq-made.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/expandable-faq-made-300x248.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h2>13. Triggering Numeric Keyboards (HTML5) For Credit Card And Phone Number Entries<\/h2>\n<p>It is quite important to ensure that the <a href=\"https:\/\/ionicframework.com\/html5-input-types\/\" target=\"_blank\" rel=\"noopener\">right keyboard is triggered<\/a> to match the input type required. Input type should not always be set as \u201ctext\u201d because fields at checkout vary from numeric to email, to dates and phone numbers.<\/p>\n<p>As typing on mobiles can be challenging, triggering the right keyboard will help ease shoppers\u2019 transition through checkout.<\/p>\n<h3>Text Input and Email Address Fields<\/h3>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-text-email.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-20110\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-text-email.jpg\" alt=\"keyboard inputs\" width=\"631\" height=\"536\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-text-email.jpg 631w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-text-email-300x255.jpg 300w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/a><\/p>\n<p>While text input keyboards should be used for fields such as first name, last name and address, email addresses should use the email input keyboard in order to display the \u2018@\u2019 and \u2018.\u2019 characters.<\/p>\n<h3>Phone Numbers Number Fields<\/h3>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-number-phone-month.jpg\"><img decoding=\"async\" width=\"660\" height=\"394\" class=\"aligncenter size-full wp-image-20109\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-number-phone-month.jpg\" alt=\"keyboard inputs numbers\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-number-phone-month.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/keyboard-inputs-number-phone-month-300x179.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Setting the input time to \u201cnumber\u201d when shoppers are entering their credit card, CVV numbers or address numbers will ensure that they save time without having to switch from the default text keyboard to the numeric one.<\/p>\n<p>Also setting the input type to \u201ctel\u201d gives shoppers the telephone keypad that mimics the user interface shoppers are familiar with when making phone calls.<\/p>\n<p>The month input field helps when entering expiry and start dates.<\/p>\n<h2>14. Auto-Detect And Auto-Complete<\/h2>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/autofill-1.gif\"><img decoding=\"async\" width=\"540\" height=\"961\" class=\"aligncenter size-full wp-image-20133\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/autofill-1.gif\" alt=\"auto fill\" \/><\/a><\/p>\n<p>Autofill or the auto completion of contact information on forms such as first name, last name, address, phone numbers and credit card is supported by the two major mobile web browsers: Safari Mobile and <a href=\"https:\/\/developers.google.com\/web\/updates\/2015\/06\/checkout-faster-with-autofill?hl=en\" target=\"_blank\" rel=\"noopener\">Chrome<\/a>.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/autocomplete.png\"><img decoding=\"async\" width=\"660\" height=\"559\" class=\"aligncenter size-full wp-image-20132\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/autocomplete.png\" alt=\"auto complete\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/autocomplete.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/autocomplete-300x254.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Chrome uses the <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#autofill\" target=\"_blank\" rel=\"noopener\">\u201cautocomplete\u201d HTML attribute<\/a> on form fields that labels input element fields with common data types such as \u2018name\u2019 or \u2018phone number\u2019.<\/p>\n<p>Here is what marking up an email address field on a form to allow auto-completion looks like:<\/p>\n<p style=\"text-align: center;\">&lt;input type=&#8221;email&#8221; name=&#8221;customerEmail&#8221; autocomplete=&#8221;email&#8221;\/&gt;<\/p>\n<p>It is important to note that Safari mobile will not autocomplete by default unless Autofill is enabled in the user\u2019s iPhone Safari settings.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/safari-autofill.png\"><img decoding=\"async\" width=\"660\" height=\"856\" class=\"aligncenter size-full wp-image-20121\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/safari-autofill.png\" alt=\"safari autofill\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/safari-autofill.png 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/safari-autofill-231x300.png 231w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h2>15. Address Finders<\/h2>\n<p>Adding an address finder on a mobile checkout page cuts down a significant amount of time required to enter a full address that could potentially span over 3 or 4 input fields. It is also less error prone.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/made-address-typing.jpg\"><img decoding=\"async\" width=\"660\" height=\"540\" class=\"aligncenter size-full wp-image-20112\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/made-address-typing.jpg\" alt=\"made address typing\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/made-address-typing.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/made-address-typing-300x245.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Made.com execute their address finder on their mobile guest checkout page quite neatly: the \u2018Start typing\u2026\u2019 caption in the address input field nudges shoppers to enter their address from a single input field or as postcode entry \u2013 Capture+ autocompletes the rest of their address.<\/p>\n<h2>16. Offering Single Click Express Checkout Payment Options<\/h2>\n<p>A segment of shoppers are hesitant to provide their credit card details to ecommerce stores on their first purchase. They would rather use the \u2018buyer protection\u2019 security provided by a PayPal checkout than entering their payment details directly.<\/p>\n<p>Others just use the convenience of entering their PayPal username and password to short circuit the checkout process.<\/p>\n<p>ThinkGeek offer both PayPal and Bill Me Later express checkout buttons on their shopping cart page.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thinkgeek-paypal-checkout.jpg\"><img decoding=\"async\" width=\"660\" height=\"476\" class=\"aligncenter size-full wp-image-20123\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thinkgeek-paypal-checkout.jpg\" alt=\"thinkgeek paypal\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thinkgeek-paypal-checkout.jpg 660w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/thinkgeek-paypal-checkout-300x216.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Offering other express checkout payment options such as Google Wallet and Amazon Pay will essentially cut down the time required to enter payment details.<\/p>\n<p><a href=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blinds-checkout-multipay-options.jpg\"><img decoding=\"async\" width=\"403\" height=\"601\" class=\"aligncenter size-full wp-image-20134\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blinds-checkout-multipay-options.jpg\" alt=\"blinds checkout multipay\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blinds-checkout-multipay-options.jpg 403w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/11\/blinds-checkout-multipay-options-201x300.jpg 201w\" sizes=\"(max-width: 403px) 100vw, 403px\" \/><\/a><\/p>\n<h2>The Holy Grail Of Checkout Is Speed And Ease<\/h2>\n<p>I will summarize by saying that all the tests and improvements that drive the implementation of your mobile checkout should hinge on two principles:<\/p>\n<ol>\n<li>How quickly can we move shoppers through our mobile checkout<\/li>\n<li>How easy can we make their experience<\/li>\n<\/ol>\n<p>In regards the first option of speed: load times, input fields and auto completion each play a significant role.<\/p>\n<p>The second option on ease of the mobile checkout experience: shoppers\u2019 perception of the checkout process is key. So use guest checkouts, progress indicators and accordions all aim to communicate clarity on the length of time their mobile checkout will take. Giving shoppers a sense of security is also an important layer in easing their experience.<\/p>\n<p>I\u2019ll end by saying that every single point about the mobile checkout process in this article should be tested because design is usually driven by our biases. Testing offers an objective means of negating those biases and going with actual user shopper data.<\/p>\n<h3>Bonus<\/h3>\n<p>I\u2019ll review three mobile checkouts to the first three e-tailers that ask in the comments area. Also, if you are interested in a checkout audit for the online store you manage, do get in touch.<\/p>\n<p><b>About the Author:<\/b> <a href=\"https:\/\/twitter.com\/KunleTCampbell\" target=\"_blank\" rel=\"noopener\">Kunle Campbell<\/a> &#8211; With a 10 year background in SEO and ecommerce, Kunle is an Ecommerce growth consultant and advisor that coaches online retail teams on driving profitable revenue growth through customer acquisition, user experience, conversion optimization, optimizing their go-to market strategy, scaling word of mouth marketing, retention and advice on vendor\/platform selection. He blogs on <a href=\"https:\/\/2xecommerce.com\/\" target=\"_blank\" rel=\"noopener\">2X eCommerce<\/a> and hosts the <a href=\"https:\/\/2xecommerce.com\/podcast\/\" target=\"_blank\" rel=\"noopener\">2X E-Commerce Podcast<\/a>; a show dedicated to growing and scaling ecommerce businesses.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A significant amount of testing, articles and research has been poured into the subject of the optimal ecommerce checkout flow in the UX and CRO&#8230;<\/p>\n","protected":false},"author":279,"featured_media":20437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[55],"tags":[],"class_list":["post-20106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Anatomy of The Perfect Mobile Ecommerce Checkout Page<\/title>\n<meta name=\"description\" content=\"With mobile devices now accounting for over 50 percent of ecommerce traffic, this post will break down the mobile checkout flow of some of the most mobile savvy ecommerce brands.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Anatomy of The Perfect Mobile Ecommerce Checkout Page\" \/>\n<meta property=\"og:description\" content=\"With mobile devices now accounting for over 50 percent of ecommerce traffic, this post will break down the mobile checkout flow of some of the most mobile savvy ecommerce brands.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-19T16:15:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-06T23:15:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/12\/anatomy-perfect-mobile-checkout-page.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hiten Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hnshah\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hiten Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/\"},\"author\":{\"name\":\"Hiten Shah\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\"},\"headline\":\"The Anatomy of The Perfect Mobile Ecommerce Checkout Page\",\"datePublished\":\"2015-11-19T16:15:21+00:00\",\"dateModified\":\"2026-01-06T23:15:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/\"},\"wordCount\":2572,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/anatomy-perfect-mobile-checkout-page.jpg\",\"articleSection\":[\"Ecommerce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/\",\"name\":\"The Anatomy of The Perfect Mobile Ecommerce Checkout Page\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/anatomy-perfect-mobile-checkout-page.jpg\",\"datePublished\":\"2015-11-19T16:15:21+00:00\",\"dateModified\":\"2026-01-06T23:15:15+00:00\",\"description\":\"With mobile devices now accounting for over 50 percent of ecommerce traffic, this post will break down the mobile checkout flow of some of the most mobile savvy ecommerce brands.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/anatomy-perfect-mobile-checkout-page.jpg\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/anatomy-perfect-mobile-checkout-page.jpg\",\"width\":1280,\"height\":720,\"caption\":\"anatomy perfect mobile checkout page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/perfect-mobile-ecommerce-checkout\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ecommerce\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/ecommerce\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Anatomy of The Perfect Mobile Ecommerce Checkout Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Daily Egg\",\"description\":\"Conversion Rate Optimization Made Easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\",\"name\":\"Hiten Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"caption\":\"Hiten Shah\"},\"description\":\"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\\\/Twitter.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/hnshah\\\/\",\"https:\\\/\\\/x.com\\\/hnshah\"],\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/hiten\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Anatomy of The Perfect Mobile Ecommerce Checkout Page","description":"With mobile devices now accounting for over 50 percent of ecommerce traffic, this post will break down the mobile checkout flow of some of the most mobile savvy ecommerce brands.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/","og_locale":"en_US","og_type":"article","og_title":"The Anatomy of The Perfect Mobile Ecommerce Checkout Page","og_description":"With mobile devices now accounting for over 50 percent of ecommerce traffic, this post will break down the mobile checkout flow of some of the most mobile savvy ecommerce brands.","og_url":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_published_time":"2015-11-19T16:15:21+00:00","article_modified_time":"2026-01-06T23:15:15+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/12\/anatomy-perfect-mobile-checkout-page.jpg","type":"image\/jpeg"}],"author":"Hiten Shah","twitter_card":"summary_large_image","twitter_creator":"@hnshah","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Hiten Shah","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/"},"author":{"name":"Hiten Shah","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6"},"headline":"The Anatomy of The Perfect Mobile Ecommerce Checkout Page","datePublished":"2015-11-19T16:15:21+00:00","dateModified":"2026-01-06T23:15:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/"},"wordCount":2572,"commentCount":2,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/12\/anatomy-perfect-mobile-checkout-page.jpg","articleSection":["Ecommerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/","url":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/","name":"The Anatomy of The Perfect Mobile Ecommerce Checkout Page","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/12\/anatomy-perfect-mobile-checkout-page.jpg","datePublished":"2015-11-19T16:15:21+00:00","dateModified":"2026-01-06T23:15:15+00:00","description":"With mobile devices now accounting for over 50 percent of ecommerce traffic, this post will break down the mobile checkout flow of some of the most mobile savvy ecommerce brands.","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/12\/anatomy-perfect-mobile-checkout-page.jpg","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/12\/anatomy-perfect-mobile-checkout-page.jpg","width":1280,"height":720,"caption":"anatomy perfect mobile checkout page"},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/perfect-mobile-ecommerce-checkout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ecommerce","item":"https:\/\/www.crazyegg.com\/blog\/category\/ecommerce\/"},{"@type":"ListItem","position":3,"name":"The Anatomy of The Perfect Mobile Ecommerce Checkout Page"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Daily Egg","description":"Conversion Rate Optimization Made Easy","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6","name":"Hiten Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","caption":"Hiten Shah"},"description":"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\/Twitter.","sameAs":["https:\/\/www.linkedin.com\/in\/hnshah\/","https:\/\/x.com\/hnshah"],"url":"https:\/\/www.crazyegg.com\/blog\/author\/hiten\/"}]}},"modified_by":"Lars Lofgren","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/20106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/279"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=20106"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/20106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/20437"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=20106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=20106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=20106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}