Three Steps for Improving Mobile UX

With mobile Internet usage accounting for one third of website visits, we no longer have the luxury of only improving and testing for user experience on a single device class. It’s imperative that you expand your UX testing to measure results on desktop, tablet, and mobile separately and respond to the needs of each medium. Here are three steps you can take to help keep your mobile visitors happy.

1. Code for Faster Page-Loading

Sixty-four percent of smartphone users expect websites to load in 4 seconds or less, so get your code tuned up for faster loading by reducing page sizes, keeping JavaScript to a minimum, avoiding widgets, and using font icons and image sprites.

The average real-world download speed for a 3G user is 244 KB/s and 756 KB/s for a 4G user. Both are relatively slow and that’s a concern, but surprisingly, download speed isn’t the main bottleneck on mobile: it’s primarily network latency (the time it takes to complete a round-trip from the phone to your server and back) and the web page’s processing time. In fact, 80% of the time it take to display a web page on a typical mobile device is spent processing HTTP requests, style sheets, and scripts.

Today, the single biggest improvement you can make to improve your mobile web page performance is to remove JavaScript libraries such as JQuery, JQuery UI, JQuery Mobile, Prototype, etc. Not only are these libraries large in size, they tax a mobile device’s CPU, particularly if you’re changing visuals on the page. Your best bet is to replace these libraries with some custom JavaScript that does the required work. An analysis of Amazon.com demonstrates this, as their mobile pages have no external JavaScript, and the HTML and all inline JavaScript take less than half a second to load.

The next biggest improvement you can make is to eliminate redirects to your mobile site. Many platforms host mobile versions of a site on a separate URL (like yourdomain.com?m=1). Each additional redirect adds another half a second to page load time.

2. Test Your Layouts

Making a site load more quickly is all well and good, but what do users do when they land on the page? Measuring success in user experience is all about trial and error. This usually involves multivariate testing exactly the same content—trying new page layouts for different screen sizes and measuring user response. Did the time on site, page views per-visitor, and bounce rates change? If so, was that positive or negative?

It’s imperative that you expand your UX testing to measure results on desktop, tablet, and mobile

Learning how to test is essential to mobile UX success. You can either do this using automated, mult-variant-testing (MVT) tools (like Ezoic), or you can construct your own experiments using tracking codes from do-it-yourself tools like Adobe Target or Optimizely. While the automated MVT tools will construct and test improvements for you, with the DIY approaches, you’ll need to construct all the tests yourself.

Based on our experience, the two most important design items to test are:

1. Readability: The default for most mobile devices is to “shrink” content to fit onto the screen. This requires the end-user to zoom in and scan across the page to read text or click a link. It leads to a frustrating user experience and makes navigation very difficult.
2. Graphics & Rich Media: You should limit and test your use of images on mobile devices. Often, that big beautiful image you have at the top of your web page will take ages to load and take up the entire first screen on a mobile device. While it may be aesthetically pleasing to you, this gets in the way of your users, who are often on-the-go and looking for specific information.

3. Improve Mobile and Responsive Navigation

Re-sizing your content to fit the screen size of each visitor is now the norm, but what about your mobile and tablet menus? Link-based navigation—unless properly sized for mobile—is difficult on most devices, as it requires zooming and sniper-like finger click accuracy. Your best bet is to create a single cohesive menu that goes deep into your site. Keep in mind that hover effects do NOT work on mobile devices, and your users will need to be able to easily close the navigation and scroll over it without accidental clicks.

Conclusion

The mobile-age is upon us and improving UX on mobile devices is as important as improving it for desktop users. It requires a lot of work, but the end benefits of happier users, improved search rankings, and increased revenue make it all worthwhile.

Image of happy mobile user courtesy Shutterstock