A record number of shoppers are turning to their smartphones to research potential purchases1. Meanwhile, the bigger question — are those same users willing to complete the purchases on their mobile device? — is quickly being answered. The US, for example, saw an 81% spike2 in mobile e-commerce (m-commerce) sales in 2012, comprising a $25 billion market.
And it’s not just apps. By a landslide, users prefer mobile websites to apps for shopping. For every shopping activity, including researching products and prices, reviewing products, participating in promotions, and purchasing, most respondents3 (61 to 81%) preferred using a browser to a native app.
Further Reading on SmashingMag: Link
- Fundamental Guidelines Of E-Commerce Checkout Design4
- The Thumb Zone: Designing For Mobile Users5
- Exploring Ten Fundamental Aspects Of M-Commerce Usability6
- Boost Your Mobile E-Commerce Sales With Mobile Design Patterns7
In the days and months to come, it will become increasingly important for retailers to fuel this growth by creating seamless, user-friendly checkout processes that inspire trust and that make full use of all of the advantages the medium has to offer.
Let’s dive into some examples of mobile checkout processes and see what we can learn.
1. Include Only Vital Fields Link
We’ve all answered those dreaded questions, such as “How did you hear about us?” While they may serve the vendor, they do nothing for the buyer, who is offering up their hard-earned cash and deserves to call the shots here.
While these questions are annoying on a desktop, they can be fatal in mobile. Take these two examples:
On the right,shows how a simple experience can quickly become extraordinarily cumbersome. Three pages in total display unnecessary fields such as “Evening phone” and “Mobile phone,” while breaking fields apart — the “Address” field is given three imposing lines (instead of just one for a ZIP code), and the user is required to retype their email address.
2. Allow Checkout As A Guest Link
Providing an option to check out as a guest should be standard practice across media (although 24% of e-commerce websites11 don’t), and especially on mobile. A user is much less likely to complete an order if they have to go through the process of creating an account and confirming it. The statistics back this up, sometimes shockingly so. One major retailer reportedly saw a $300 million leap12 in sales by removing the “Register” button!
3. Leverage Mobile UI Elements Link
Fandango has a fluid mobile checkout experience. One big reason why is that it leverages the advantages of the medium, often relying on touch controls, which a user is much more likely to use than typing.
In Fandango17’s desktop UI (left), a user is prompted to select quantities using a typical drop-down menu. In the mobile UI (right), they are prompted to update quantities using increment selectors (with an option to type as well), which is speedier in that medium.
4. Remove Distractions, Not Content Link
Once a user is in the checkout process, they have obviously expressed a willingness to buy. Put another way, the website has switched from being a salesperson to being an order fulfillment center. With that in mind, remove anything that draws their attention anywhere other than the task at hand.
Conversions can rise in enclosed checkouts18, a tactic you may have noticed when purchasing from Amazon. With this technique, the vendor removes the standard header, including the menu links and search bar, which could drive the user elsewhere. A checkout page can be made especially simple on mobile.
A content-rich checkout page might seem like a good idea, but it will distract the user from their purchasing decision.
This doesn’t mean we should remove all content. Mobile engagements typically last 80% as long as desktop ones, and that number is rising. Users might still have questions about shipping guidelines, delivery, terms and conditions and more. A good experience should give them the option to find answers.
5. Show Progress Link
A user wants to know where they are, where they are going and how much longer until they’re done. Progress bars alleviate anxiety here.
6. Build Lightweight Link
Above all, time is precious. 74% of mobile visitors will leave a website if it takes longer than five seconds to load. Users have come to complete an action, and they are already convinced that it’s the right thing to do, so it’s best to get out of their way.
Adhere to the “Seven Guidelines for Designing High-Performance Mobile User Experiences29.” And use a testing tool to optimize loading times; Mobitest by Akamai is my choice.
7. Provide Security Reassurances Link
One of the biggest reservations32 users have left about mobile e-commerce is security. To get over this hurdle, designers needn’t be subtle: provide as many reassurances as possible that the experience is secure, and drive the point home. This means using iconography, SSL certificates and dedicated callouts in copy.
8. Google Wallet, PayPal And Amazon Are Your Friends Link
Instead of forcing users to fumble through checkout forms and type their address, use a trusted service such as Google Wallet, PayPal and Amazon to get users two taps away from completing their payment. Their information will be automatically populated, and the process will be nearly complete.
No-frills mobile e-commerce experiences on Shopify.
Mobile e-commerce experiences on Shopify, like this one for DODOcase36, aren’t visually exciting, but that’s not the point. They hush any noise, while allowing users to quickly check out using trusted third-party applications.
9. Take Advantage Of Geolocation And One-Touch Calling Link
Use GPS information to easily point a user to a physical location, as an alternative to a Web conversion. By using a URL string like
http://maps.google.com/maps?daddr=BEST+BUY&saddr=Current+Location39 on mobile, Google will automatically retrieve the nearest location and provide directions. Best Buy observed that 28% of users40 visiting its mobile platforms were using it to make an in-store purchase, making it a successful value proposition.
10. As Always, Test Across Systems And Setups Link
Mobile testing can be difficult and time-intensive, but with the market split between an array of operating systems, prioritizing by market share44 and testing at multiple resolutions is important. Getting your hands on a phone for each OS is always best, but if that’s not possible, you can use a browser plugin named User Agent Switcher for Firefox45 and Chrome46. It can be an invaluable time-saver for testing, allowing you to bounce between different OS experiences on your desktop.
The other factor in the OS conversation is design. Many designers of mobile Web experiences make the mistake of borrowing interface elements from their OS of choice. For instance, a designer who uses an iOS device might adopt Apple’s button styles. While this would make sense in a native app, a mobile website is a cross-browser experience, and a native aesthetic will likely turn off users of other OS’ — or, even worse, might just plain look bad.
At long last, the promise of m-commerce is starting to be fulfilled. Never before has the gap between a good and bad mobile checkout experience affected revenue so much.
If retailers give the user a clear, focused, streamlined and lightweight path to making their purchase — while recognizing the advantages and limitations of a mobile experience outlined above — all parties will benefit.
- 1 http://www.internetretailer.com/2013/01/08/nearly-half-smartphone-owners-research-products-mobile
- 2 http://www.emarketer.com/Article/Record-Retail-Sales-on-Smartphones-Tablets-Take-Greater-Ecommerce-Share/1009595
- 3 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/d
- 4 https://www.smashingmagazine.com/2011/04/fundamental-guidelines-of-e-commerce-checkout-design/
- 5 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
- 6 https://www.smashingmagazine.com/2013/05/recommendations-mobile-commerce-websites/
- 7 https://www.smashingmagazine.com/2012/12/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/
- 8 https://www.smashingmagazine.com/wp-content/uploads/2013/03/under-armour-500.jpg
- 9 https://www.smashingmagazine.com/wp-content/uploads/2013/03/good-vs-bad-22-500.jpg
- 10 http://builtbymoby.com/
- 11 https://www.smashingmagazine.com/2012/09/04/the-state-of-e-commerce-checkout-design-2012/
- 12 http://www.uie.com/articles/three_hund_million_button
- 13 https://www.smashingmagazine.com/wp-content/uploads/2013/03/burton-500.jpg
- 14 https://www.smashingmagazine.com/wp-content/uploads/2013/03/burton-500.jpg
- 15 https://www.smashingmagazine.com/wp-content/uploads/2013/03/fandango1-500.jpg
- 16 https://www.smashingmagazine.com/wp-content/uploads/2013/03/fandango1-500.jpg
- 17 http://mobile.fandango.com/
- 18 http://econsultancy.com/us/blog/6623-why-you-should-enclose-the-checkout-process
- 19 https://www.smashingmagazine.com/wp-content/uploads/2013/03/dillards.jpg
- 20 http://m.dillards.com/search
- 21 https://www.smashingmagazine.com/wp-content/uploads/2013/03/gnc-500.jpg
- 22 http://m.gnc.com/cart/index.jsp?an_action=viewCart
- 23 https://www.smashingmagazine.com/wp-content/uploads/2013/03/gnc-500.jpg
- 24 https://www.smashingmagazine.com/wp-content/uploads/2013/03/crate-and-barrel.jpg
- 25 http://m.crateandbarrel.com/
- 26 http://www.pitstopmedia.com/sem/checkout-progress-bar-survey
- 27 https://www.smashingmagazine.com/wp-content/uploads/2013/03/under-armour-screen.jpg
- 28 http://www.underarmour.com/shop/us/en/
- 29 https://www.smashingmagazine.com/2011/07/18/seven-guidelines-for-designing-high-performance-mobile-user-experiences/
- 30 https://www.smashingmagazine.com/wp-content/uploads/2013/03/toms1.jpg
- 31 http://www.toms.com/
- 32 http://www.webcredible.co.uk/user-friendly-resources/white-papers/mCommerce-user-behaviour-report-2012.pdf
- 33 https://www.smashingmagazine.com/wp-content/uploads/2013/03/1800flowers-2.jpg
- 34 http://www.1800flowers.com
- 35 https://www.smashingmagazine.com/wp-content/uploads/2013/03/dodocase.jpg
- 36 http://www.dodocase.com/
- 37 https://www.smashingmagazine.com/wp-content/uploads/2013/03/homedepot.jpg
- 38 http://www.homedepot.com/
- 39 http://maps.google.com/maps?daddr=american+mattress&saddr=Current+Location
- 40 http://www.mobilemarketer.com/cms/news/commerce/5548.html
- 41 http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers
- 42 https://www.smashingmagazine.com/wp-content/uploads/2013/03/useragentswitcher-500.jpg
- 43 https://www.smashingmagazine.com/wp-content/uploads/2013/03/useragentswitcher-500.jpg
- 44 http://stats.areppim.com/stats/stats_mobiosxtime.htm
- 45 https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
- 46 https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US