In 2018, just over 52% of all web traffic was generated through mobile phones.
This is in stark contrast to just five years earlier, in 2013, when an estimated 16% of web traffic passed through mobile devices.
Because of this drastic shift in the way users interact with the internet, there needs to be a similar shift in the way developers design their web pages.
Five years ago, mobile optimization was a proverbial feather in the cap of a company and website that were on the cutting edge of technological advancement. But nowadays, being successful in e-commerce means having an easy-to-use mobile site. And while most developers have caught up to the trend, for the most part, there are still many areas where mobile users are often left high-and-dry.
The most crucial of these areas is, of course, the checkout page. For any online retailer, this is the most important page; not only because it is necessary to sell things, but also because the checkout page is the one page that every single user will see – hopefully.
This means that it must be a clean, functional, and well-optimized web page that keeps mobile users from getting frustrated or confused and backing out of a potential purchase. With that in mind, we wanted to offer a list of three things to consider when designing a simple mobile checkout page.
And while this isn’t a definitive list, these suggestions will help you avoid many of the common problems that plague most mobile checkout designs.
Consider the Keyboard Size
This might sound obvious, but it’s something that gets overlooked quite often: remember to account for the smaller keyboard. What that means is that unlike desktop web pages, when filling out a form on a mobile device, the keyboard takes up roughly half the screen – cutting the effective size of your page in half.
Additionally, assuring that all of the field descriptors are able to be understood out of context is a simple, yet necessary precaution. For example, when labeling an address field that’s under the “Shipping” section, rather than just labeling the field “Address,” you would still want to label “Shipping Address.”
This is because of the fact mobile users often treat each field as an isolated task, so even if they’re in the “Shipping” section, they may have lost track of that fact. So reminding them that this is the “shipping address” and not the “billing address” is crucial toward providing a smooth experience. Something as simple as this could be the difference between a sale and another bounced user.
By taking steps like these, you can counteract the sometimes disorienting effects of filling out forms on a mobile browser.
Show Total Cost
Again, this should be a pretty obvious statement. But time and time again, e-commerce sites fail to allow potential customers to see the final cost of their purchase until the last possible second, often to the agitation of the user. Most online shoppers are acutely aware of the fact that the product’s listed price is rarely the same as the final order cost once taxes, shipping, and any other fees are tacked on.
Because of this, users will want to know how much the final total will be as soon as possible to avoid filling out a laundry list of forms to find out how much their order will cost. In fact, according to an assessment of the top 50 mobile retail sites, 33% of sites failed to display the final total at any point before asking for credit card information.
Meaning many users are being asked to fill out payment information and other forms without knowing exactly how much they’ll be charged – which makes a lot of shoppers uneasy and directly leads to cart abandonment. That means taking a page from sites like Amazon that estimate shipping and taxes as soon as you enter the checkout screen and well before you’re asked to enter any of your credit card information. This gives users peace of mind when completing the checkout process.
Utilize Autofill When Possible
Autofill makes everyone’s life easier. It saves time on typing and keeps users in a good mood. And although most autofill data is stored by the browser, that doesn’t mean there aren’t ways you can utilize autofill yourself. The most common way to use this technology would be to make entering addresses much easier.
Rather than asking for the full address – including zip code, state, and country – simply have them type their street address and zip code and have the site populate the city and country based on the zip code. Alternatively, IP geo-targeting is a quick solution to help customers move quickly through their checkout forms, leading to an increase in both consumer satisfaction and sales.
Final Thoughts
Optimizing mobile checkout pages is critical to online and mobile success, but it isn’t enough to take the minor optimization steps that were cutting edge in 2013. Instead, developers must listen to their users and think critically in order to create a page that makes online shopping as quick and painless as possible.
Despite the rapid advancements in mobile tech and the fact that more than half of all web traffic is mobile-based, filling out forms and dealing with complicated checkout pages is as annoying to users as it ever was. And in some ways, users are even less patient now considering how far mobile phones have come.
Because of this, developers need to work hard to stay ahead of the curve and allow mobile users to have an easy, seamless checkout experience. Doing this will not only keep end users happy, but it will also make your employer very happy when their newly optimized checkout page sees more sales and less cart abandonment.
Tayler is a content writer for the cbdMD blog. Before joining the cbdMD content team, he spent time in Atlanta as the editor-in-chief of a music publication, covering everyone from Future to Katy Perry to up-and-coming local rock acts. In his free time, Tayler enjoys sour beer, Thai food, and watching Arrested Development for the 18th time.