There’s no shortage of online resources that will help you improve your conversion rate. However, most of them offer generic advice that applies to websites in general. It’s important that you specifically optimize your site for mobile traffic as well. Fortunately, there are plenty of best-practices for mobile user experience (UX) development that aren’t complicated to implement and will boost your conversion rate.
In this article, we’ll first examine the reason that you should pay particular attention to your mobile conversion rate and then we’ll go over some of the best design tips to that will turn your visitors into customers, members, or email list subscribers.
The Importance of UX Design for Conversion Rate Optimization
You might think that, as long as you offer a website that’s easy to navigate and responsive in design, then you’re all set for mobile traffic and your conversion rate will remain competitive. Unfortunately, it’s not that simple.
As of this writing, we’re at a turning point. Mobile media traffic has just surpassed desktop and other media traffic. Mobile digital media time stands at 51 percent of all media time while desktop time stands at just 42 percent.
While it was once considered perfectly acceptable to design a website for a desktop monitor and then “fit it” to work within a portfolio of mobile devices, it’s quite likely that the future of website design is about to change completely. Developers will likely soon start by designing a site for a mobile device and then “fit it” back to work with a desktop monitor.
Further, a 2015 report by Criteo states plainly that “[r]etailers who optimize their mobile sites generate many more mobile transactions than those who don’t.” Specifically the report divides sites into three categories: non-optimized, usable on mobile, and optimized. The report states that non-optimized sites have a conversion rate of just 1.6 percent while usable sites have a conversion rate of 2.9 percent and the optimized sites have a conversion rate of 3.4 percent. In other words, there is a direct, noticeable correlation between the optimization effort and the conversion rate.
The same report states that non-optimized sites have 22 percent of their sales from mobile devices while optimized sites see 31 percent of their sales from mobile devices. That differential means that there’s a potential for non-optimized sites to increase their sales by as much as 41 percent with mobile optimization.
In short, your conversion rate will grow in direct proportion to how much you optimize your site for mobile traffic. Now, let’s look at some mobile UX design tips to improve that conversion rate.
1. Not Focusing On Speed. 42 percent of mobile users cited slow load times as the most frustrating aspect of their mobile shopping experience
If you’ve been researching search engine optimization (SEO), UX, or CRO for any length of time, then you’ve almost certainly come across the advice that you should ensure that your site loads as quickly as possible. That advice is even more applicable for mobile traffic.
Why? Because mobile users are frequently “on the go.” There’s no doubt that some mobile users are people who are laying down on the couch and browsing online for Christmas gifts or a new pair of blue jeans. However, many mobile users are using their mobile device not by choice, but out of necessity. They’re looking for something that they can purchase while they’re eating lunch during a busy work day. Others are waiting for a bus. Still others are literally walking somewhere while shopping online. That’s the reality of the mobile user base.
That’s also why your site, to be optimized for mobile traffic, must be lightning fast. Otherwise, your visitors are going to bail and go visit the site of one of your competitors.
In fact, a 2014 survey conducted by Mobiquity showed that the highest plurality (42 percent) of mobile users cited slow load times as the most frustrating aspect of their mobile shopping experience. So, if you want to address a consumer need with your mobile site right off the bat, ensure that it loads quickly. People will thank you with a better conversion rate.
Laurent Meynier is the vice president of strategic operations at Moovweb. He says that retailers can improve their conversion rate with more a judicious selection about what to load and when.
“A lot of the speed implication that slows down a mobile site happens after times of first byte,” he says. “[Retailers can] build the site so that the perceived speed is there, because you’re not waiting for the whole payload to load before the user can have an interaction with the mobile device. That has huge implications on conversion rate.”
For starters, use images that are lean, if you must use them at all. If your lean images don’t provide sufficient detail because of their size, allow the user to click on the image to view the larger, more detailed version. That’s more user-friendly that forcing the user to wait for a larger image to load.
Also, code pages to load so that the text is readable even while the images are still loading. You’ll have to specify that as a requirement to your design team. The advantage is that users can start reading about product details even if the image hasn’t fully loaded yet. That will prevent users from getting frustrated because they can’t see anything while waiting for an image to load.
Finally, eliminate what you don’t absolutely need for the mobile user. Remember the “on the go” principle. People are often looking for quick answers on their mobile devices. Design your site accordingly.
2. A Busy Design: Only include those design elements that are absolutely necessary and crop everything else
The next UX design principle for mobile visitors dovetails nicely with the previous one. Simply put: ensure that your site is as lean as possible for mobile traffic.
You might have come across the word “minimalist” when you were shopping around for a theme for your website. That’s a word that should apply to your mobile UX design as well.
The idea is that you only include those design elements that are absolutely necessary and crop everything else. Again, mobile users are frequently looking for a quick fix. They won’t have time to digest a front page with multiple sliders, ads, links, images, and text blocks. Make it easy on them with a quick focus on whatever it is you’re offering.
While it may be true that your website, when displayed on a desktop, has a top bar, a footer, and one or two sidebars that are loaded with various items of interest, you simply don’t have that much visual real estate on small mobile devices. Design accordingly.
This is a good time to also mention a word that is your best friend when it comes to mobile development: whitespace. It’s almost impossible to have too much whitespace on your mobile site. Design your layout with plenty of room between important elements so that your busy mobile visitors can give your site a quick scan and navigate easily to where they want to go. For example, Target’s mobile app relies on three main colors.
3. Navigation Elements that are Too Small: As a rule of thumb, consider a button that’s 30-40 pixels wide to be the minimum size.
It’s 2015 and it’s still not too uncommon to visit a mobile site that offers buttons and links that are so tiny, they’re difficult to click. It wouldn’t be surprising if some users literally fetch a pin to press some of the buttons that we’ve seen on more than a few websites.
Again, it’s tough to go wrong here to the other extreme. In other words, it’s difficult to create a button that’s too big. That’s a much better alternative than a button that frustrates a user when he or she goes to press it and can’t seem to “touch” it because it’s so small. As a rule of thumb, consider a button that’s 30-40 pixels wide to be the minimum size.
Also, remember the whitespace principle. If you have multiple buttons next to each other or stacked vertically, then be sure to include plenty of whitespace between the buttons so visitors don’t accidentally fat-finger the button and click the wrong one.
4. Clunky Checkout Processes: Use as few screens as possible in the checkout process
If you’re conversion process includes a checkout process, then that needs to be optimized for mobile users as well. There are several principles to apply to that effort.
For starters, your forms should be absolutely minimalist. Avoid asking for any information that you don’t absolutely need to complete the sale. Remember, it’s more cumbersome to “type” on a mobile device than it is with a keyboard – even for the most experienced typists. The simple fact is that mobile data entry is fraught with errors for the reasons that we just identified above: the virtual keyboard keys are so close together that it’s easy to fat-finger a button and even misspell your own name.
Anything you can do to make the form completion process easier, do it. For example, use drop-downs for state selection instead of asking the user to type in a two-character state code. Even better, provide a field that allows the user to type in a zip code. Your back end code should use that zip code to look up the city and state of the visitor’s address. More checkout forms should be doing that.
Also, give the visitor a chance to save form data so that he or she doesn’t need to go through the process of filling out that form again. That’s frustrating enough for desktop visitors. How do you think mobile visitors will feel about it?
Along those lines, for returning visitors, allow them to check a box so that they can display their passwords. There’s not much that angers mobile users more than entering the wrong password repeatedly because they can’t see what they’re typing. You can hide the password by default, but definitely give them the option to show it so they can see if they’re accidentally hitting the wrong key when they enter it.
Also, use as few screens as possible in the checkout process. Again, mobile users often want to “just get it done.” They’re not going to be keen on scrolling through multiple screens while always wondering if/when the end is in sight. Streamline the checkout process with just a few screens.
5. Not Supporting Multiple Mobile Devices: Consider testing with a “cross section” of mobile devices that represent various screen sizes, pixel densities, operating system versions, and vendors.
Alas, not all mobile devices are created equal. There are smartphones with small screens, medium screens, and large screens. There are tablets. There are phablets. There are different vendors. You’ll need to do plenty of testing to ensure that your site is optimized for all types of mobile devices.
It’s quite possible that the extensive testing that’s required to ensure that your site is optimized for the countless mobile devices that are on the market is the most time-consuming part of mobile optimization. It can also be expensive if you need to buy a variety of devices for testing purposes. Sadly, that purchase will become a perpetuity as new mobile devices are always produced.
If you’re on a budget, consider testing with a “cross section” of mobile devices that represent various screen sizes, pixel densities, operating system versions, and vendors. You won’t have to test with everything, just with a good sample.
6. Not Focusing on Design Elements Users Already Know: Never be afraid to stand on the shoulders of giants.
Imitate websites that have a successful mobile design. Visit several of them and notice the way that the pages are designed, the menu navigation, and the overall aesthetics.
Then, go and do likewise. Never be afraid to stand on the shoulders of giants. If some particular aspect of mobile UX design is working well for a company that’s a household name (e.g., Amazon), then the odds are pretty good that it will work well for you as well.
Remember, people are also drawn to familiarity. If they’re accustomed to navigating on mobile sites with a particular menu structure, don’t fight it. Just go ahead and implement your own menu navigation with a similar layout. That way, your visitors won’t be looking around wondering what to press next.
7. Not Focusing on on What Works: Find what is working and double-down.
Use your analytics to determine what parts of your site are most popular with mobile users. Then, provide easy-to-find menu navigation to those pages so that users can quickly get to those pages.
That’s a great way to capitalize on what’s already successful. A quick navigation to what’s popular might also be exactly what many of your visitors are looking for when they visit your site. After all, your most popular pages might be the very reason that people are visiting your site.
Wrapping It Up
We’ve covered a variety of great mobile UX design tips and tricks to improve your conversion rate. Remember, though, mobile design is evolving at almost the speed of light. It’s best if you keep up with prevailing best-practices when it comes to website design. You’ll never be done learning about ways to improve your website.