How to Design a Mobile-First User-Experience

September 26, 2017

By: Will King

With the recent news that Google will be moving to a mobile-first index, having a great mobile user-experience is more important than ever. How do you go about providing an amazing website experience for your mobile visitors? This post dives into the fundamental best practices to bare in mind when building your responsive website.

Mobile user-experience in more important than ever. It’s clearly important to Google, their moving to a mobile-first index and focus on new initiatives such as Accelerated Mobile Pages shows that it is key for the future.

So with that in mind your mobile audience needs to be at the forefront of your online strategy. There’s more than one way of delivering a mobile optimised experience, but responsive web design is generally considered the best and most affordable.

So are you wondering if your mobile web experience is up to standard? Let’s discuss some actionable tips and tricks you can use to keep your site a step ahead of the competition when it comes to mobile.

Test the hell out of your site on as many devices as possible

This may seem obvious but it’s all too often overlooked. If you wan’t to test on mobile, don’t rely on mobile emulators or narrowing the width of your browser window. Test on different phones with multiple browsers. You’ll be surprised by the results.

Even better than QA testing is to observe real mobile users on your site. You can conduct usability studies, or as a cheaper alternative invest in CRO software such as SessionCam that records real users navigating and using your website. The insights and lessons you learn through watching these recordings will highlight areas where you can improve your mobile UX.

Try and remember that only a minority of your website visitors will be served your desktop experience. With this in mind you should make it a continual habit to browse your site on a mobile device as often as possible.

Search Engines and Users Like Fast Websites

Speed is a ranking factor, this has been confirmed by Google. Gary Illyes recently confirmed that Google will soon be using your mobile page speed as a ranking signal for mobile search queries. At the moment they use your overall page speed so you can sort of get away with being slower on mobile, but not for long.

With people out and about on unreliable 3G signals in areas with poor coverage, having a fast mobile site is worth the investment.

There are loads of tools out there to help you measure your site speed such as Pingdom and GTmetrix. To see how fast Google think your site is you can use their own Page Speed Insights tool which measures your site speed and makes suggestions on how to speed things up.

It’s easier to build a fast website from scratch than it is to apply speed improvements to an already slow website. That’s why it’s a good idea to consider a performance budget from the start of your project.

Mobile First Design

With Google moving towards a mobile-first index it makes perfect sense to take a mobile-first approach to web design. The term coined by Luke Wroblewski refers to building websites with mobile users as the primary focus, and then progressively enhancing the user-experience as screen widths increase.

For a great post on the subject check out this study on the BBC’s move to a mobile-first philosophy. The key takeaway from this is a concept called “Cut the Mustard” they introduced which helps them deliver the best browsing experience to their visitors.

Central to this is a ‘core experience’ which delivers the basic functionality users need to use and navigate the website.

A simple feature detection test determines the capability of the device and connection the site is being viewed on. If the browser passes the test (or “Cuts the Mustard’) they’re served an enhanced experience with full functionality.

Browsers that fail the feature detection test will get the core browsing experience.

The beauty of this approach is that users running old browsers that don’t support modern CSS and JavaScript should still enjoy a fast, reliable connection.

Make your forms easy to use

Website forms are where mobile users are likely to experience frustration. The key here is to be aware of common mobile-form usability problems and design your site with them in mind

Best practice is to minimise the effort required on the user’s part to complete the form. Do you really need to collect all that information? Cut out any fields that aren’t entirely crucial.

Trust is often an issue when completing an online form, especially for ecommerce sites where users are considering submitting sensitive information. Some users expect to be able to complete their purchase with PayPal, Apple Pay and Android Pay so make this functionality available in your mobile checkout.

People want to know they’ve done the right thing as they progress through the form, and when they mistakes they want to understand why. Studies have shown that providing inline validation to highlight successfully completed fields can have a real impact on form completion. Error validation needs to be clearly communicated as well. Carefully think about how you communicate your validation messaging to your users.

Testing plays a big part in crafting a mobile-friendly form. Run through your forms on different devices and look out for UX elements that cause annoyance. Common culprits are elements overlapping with the primary content (e.g. mobile keyboards, popups etc), automatically being scrolled somewhere else, clickable elements not being big enough, form elements being broken. The list could go on and on.

With HTML5 you have a variety of input types you can use within your forms to make them easier for mobile users to complete. For example if a user is completing a credit card field then use this:

<input pattern=”[0-9]{13,16}” type=”text” />

This will bring up a number keyboard making it easier to enter their details.

If they’re entering a phone number then use something like this:

<input name=”email” type=”email” />

This will adjust the keyboard to make entering an email address easier.

Another consideration is turning off ‘autocorrect’ on your form fields. I think we’ve all experienced how frustrating it is when you’re trying to enter your address and the predictive text repeatedly autocorrects itself to something completely random.

The key here is matching the input type to the data being entered. It’s one of the best ways to make your forms a pleasure to complete.

Set Up Dedicated Mobile Tracking in Google Analytics

Key to improving your mobile user-experience is understanding the state of your current one. You need to be able to see how your mobile visitors behave, where they go on your site and identify friction points.

Google Analytics is a great free package but the basic tracking setup leaves a lot of room for improvement, particularly for websites that generate large volumes of traffic.

The problem is that if you get lots of traffic all the time then once you segment by mobile and apply secondary dimensions your data will begin to sample pretty quickly. Over large time periods this can make the reported numbers pretty unreliable.

You don’t want to be making business decisions based on estimated data.

You’re allowed up to 25 views per Google Analytics property so you may as well use one to segment your mobile traffic. By setting up a view that’s filtered to just your mobile traffic, you can get more accurate, granular mobile visitor data without Analytics sampling issues.

Sampling occurs when there’s too much data being requested (normally because you apply segments and secondary dimensions which query data from multiple tables). With a dedicated mobile view your data is filtered to just mobile when it’s processed by Google Analytics and before it’s sent to your account. So when you look at your reports it’s already just your ‘mobile traffic’ and you’re not requesting any additional data so your reports will not sample.

With clean mobile tracking data you can begin to look for insights such as:

Is my mobile traffic going where I expect it to go

How does my mobile traffic convert compared to desktop

How well do my mobile visitors complete conversion funnels

TL; DR

Mobile is becoming more important and you need to put your focus into ensuring your mobile user-experience cuts the mustard. Don’t let it be a watered down version of your desktop site.

Design mobile-first and progressively enhance the user experience when and where it’s appropriate.

Remember these key points:

Test your site on as many devices and browsers as possible

Invest in user-recording software such as SessionCam to observe your mobile traffic

Make it a habit to frequently browse your site on your phone

Focus on speed and make use of the tools available to you

Make speed a focus from the beginning of a project

Adopt a mobile-first philosophy. Have a core browsing experience and progressively enhance for better browsers