Mobile UX requires more than having a responsive website.
It’s been a few years since mobile users passed desktop users online, but many designs have yet to catch up. Most sites these days do at least have a responsive website—often because they purchased a template that also just happens to be responsive. However, just because your site reshapes itself to conform to the dimensions of a tablet or smartphone doesn’t mean it has an optimized user experience.
In fact, while there are more searches on mobile than on desktop, the latter still outperform mobile users in time spent on page. Now, it’s easy to interpret this to mean that users use their desktop for more intense activity (such as reading an article), but their phones for short, frequent, “in the moment” actions (like looking up a restaurant, or googling the answer to a question).
However, there’s another side to that story: if websites aren’t designed for mobile users, it’s unlikely they’ll stay on those pages. So discounting mobile could easily be a self-fulfilling prophesy.
But regardless, enough users are coming to your website via mobile to make a functional, mobile-friendly design crucial for your business and your brand. And that means looking beyond responsive design toward something that looks truly beautiful on any device. Here’s how to make that happen.
1. Test your design on mobile to make sure it looks good.
There are many ways a design can look bad on a responsive website even if it’s been tested on mobile along the way. For instance, an image choice may look good on desktop but take up too much space on mobile, or text that was legible on desktop may be too thin or too small to read on mobile.
Don’t just assume that your design elements will look the way you intended in a different screen size. The easiest way to know if your site looks good on mobile is simply to look.
2. Make it easy for users to tap and swipe their way through your site.
Once you get past the appearances, it’s time to test functionality. Unlike on desktop, where users can control their experience using a mouse or touchpad, mobile users navigate using finger gestures. They need to be able to tap, swipe, and scroll, all without accidentally clicking things they didn’t mean to.
Clickable elements on your pages need extra padding around them so that users don’t accidentally select the wrong thing. It may seem counterintuitive, but the smaller screen size means you have to give each element extra space to breathe. The more you cram in, the worse the user experience will be.
3. Avoid clutter by removing non-essential elements.
Because space is such a premium on mobile websites, you may be better served by saving some elements for desktop only. This doesn’t mean cutting off access to certain parts of your site, but it does mean removing certain functions if they get in the way of your site content.
For instance, desktop readers of this blog will notice a “read next” content suggestion slider that appears in the right margin of their screen as they read an article. However, that prompt disappears in our mobile version, because it would interfere with the user’s natural scrolling action.
Other design elements that classically cause mobile users problems are pop-up ads, large banner ads, and moving elements such as homepage sliders.
4. Pay attention to your mobile load times.
Do you know another way fancy animations, splash video backgrounds, and complicated designs can kill your mobile UX? Load times. Mobile users often rely on their phone’s data plan to access websites. If your website has a heavy load time, then not only does it eat up your user’s data, it also adds frustration to the user.
Remember, mobile users aren’t just on their phones—they’re also usually in public spaces where their attention could be interrupted at any moment by their bus stop or their coffee order. They can’t wait very long for your page to load before they move on to more pressing concerns.
5. Allow auto-complete options and avoid the need for typing as much as possible.
This is especially important for ecommerce websites. No one wants to spend any time typing their credit card information into their phone keyboard, and they especially won’t want to do this if it means pulling out their credit card while they’re in a busy space.
Instead, allow them to auto-complete their web forms using data stored in their browser. Doing so will save them time, and help them get through the checkout process faster.
In other parts of your site, find ways to cut down on typing by using radio buttons if possible, or reducing the number of required fields if they’re truly unnecessary.
Don’t leave mobile UX as an afterthought.
Mobile UX deserves to be a priority for your website. If you put it off till the end, you may miss important UX errors until it is too late in the process to fix them without delaying the launch of your site considerably. And to be clear: a website that doesn’t work on mobile is a website that doesn’t work. It’s too important to be ignored.
Instead, you should be testing your mobile UX throughout the design process. This means any usability errors can be addressed at the start of your process, instead of waiting till the end. Even better, you may find new opportunities to use mobile more effectively. Either way, your users will be well-served.