How to Design a Mobile-First User-Experience

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 probably one of the most valuable ways to spend your time. Don’t rely on mobile emulators or narrowing the width of your browser window when to mimic a phone. 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 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 need to improve your site.

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 Quick Loading 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 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 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 field 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

The first step towards 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 can be improved, 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 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 is 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
  • Make your forms short
  • Provide easy payment options such as PayPal, Apple Pay and Android Pay
  • Make your form fields easier to complete with HTML5 input types
  • Set up a Google Analytics view filtered by just mobile traffic
  • Thank you for sharing your article. This is very informative article to mobile friendly web designing tips and tricks.
    Keep it up.