Why responsive is not always mobile optimised

30.08.2016

I’ll start by saying that as much as I like to think otherwise, I am not a designer. I sometimes adopt the role of unwanted Creative Director but in reality, I couldn’t design my way out of a wet paper bag. What does qualify me to write about this is that I do spend a lot of time with my mobile in hand. About 60% of that time is spent on a mobile browser. I was prompted to write this by the amount of time I find myself frustrated by my experience with a brand's mobile website.

As a creative agency, we focus on making our products frictionless. Ensuring that users have a smooth online journey is our bread and butter. With the majority of website traffic coming through mobile devices, it seems crazy that some brands still maintain sites that lead to a frustrating experience for visitors.

The Google-led imperative, which penalised non-optimised sites, caused a lot of brands to quickly make the shift to ‘mobile-friendly’ design. Many brands appeared to add in a hamburger nav and not really consider the wider implications for users accessing their site on a mobile. The result is kind of a Frankenstein's monster.

In this article we discuss some of the common mistakes and offer tips on how to improve the experience for users.

You’ll no doubt notice that some of these examples aren't exclusive to mobile. In actual fact, they are mostly best practice, no matter what device users are accessing your site from.

 

For starters...

 

At the very least you need a framework to consider how and when your users are accessing your site from a mobile device. Luke Wroblewski, author of ‘Mobile First’, suggests that mobile user needs can be broken down into the following categories:

Lookup/Find: I need an answer to something now - related to my current location in the world.

Explore/Play: I have some time to kill and just want a few idle distractions.

Check in/Status: Something important to me keeps changing and I want to stay on top of it.

Edit/Create: I need to get something done now that I can't recreate.

Is your site built to address one or more of these needs? If so, which one? And how can you address this need better on a mobile website? If you start to use this thought process as the basis for strategic considerations around your mobile site, then the following suggestions will only enhance your user’s experience.

 

  1. Keep the navigation simple

People are more precious about their clicks on mobile, with page load often taking longer than on a desktop device. As such, you need to ensure the navigation is clear and focused.

Try to keep the number of navigation elements down and align them with what your users want to achieve.

Remove ambiguous titles from your navigation. Don’t label your pages pretentiously as this opposes what a user will naturally look for on your site. Match the language that they might use as part of their internal dialogue. Conventional page naming is conventional for a reason.

With content on mobile extending vertically, the pages can end up being very long. Including a ‘scroll to top’ button will enable a user to quickly snap back to the top of your site without tiring out their thumbs.

Once a user has scrolled down to the bottom of your page (the majority of users on a mobile scroll beyond 75%) it makes sense to utilise this space as a secondary menu. Consider what action your users may want to make at this stage so that the user journey doesn’t end just because you haven’t given them anything to do.

 

  1. Keep your content relevant

Mobile users have different objectives to desktop users and typically want information in easily digestible bites.

Marry the audiences’ needs to your goals and objectives for the business so that you can prioritise the order that content appears on your site based on what you both want.

Once you’ve aligned the content around what both groups need, remove the clutter. Mobile use tends to be around specific, action oriented needs. Overloading your site will hamper your user experience as they try to sift through the elements they don’t need. User-first design is key here.

On average dwell time is at least a minute less on websites when accessing through a mobile device. You need to ensure your calls to action are prominent on the page to encourage users to engage and convert.

 

  1. Include a solid site search

Modern site search offers a quick way to deep dive into the content and an alternative method of navigation. If your users know exactly what they are looking for, then don’t slow their journey by adding in unnecessary steps. Adding in site search will help speed up their search process and keep users on task to conversion.

Search functionality should be high up the page and easy to see. There is no point in having it if it is near invisible.

You can smooth the search experience by adding in suggested search terms (autocomplete), filters and presenting the results broken out by sensible categories. A user is likely to be put off if shown an extensive results list they cannot quickly sort.

In the end, the most important thing is to make sure that what the user is looking for is at the top of page 1 of the results. Check the content on your site to make sure that you show what users are looking for and that your search functionality is pointing users in the right direction.

 

  1. Remove tiny buttons

The worst experience when visiting a mobile site is to be greeted with buttons you need a stylus (or Donald Trump's hands) to engage with. Make sure that every button is large enough and has its own whitespace to avoid button clash. Windows recommend making buttons at least 7x7 millimetres wide with a 2.5 millimetre gap between each item. This may seem excessive, but nothing tends to aggravate a user more than being misdirected to the wrong page (or being made to feel they have fat fingers).

 

  1. Simplify data entry

Forms are often a main point of conversion across many websites, but can also be the main point of frustration. There are a few simple steps you can take to ensure that this frustration is minimised.

Try to keep the number of form fields to a minimum. Longer forms correlate with a steeper drop off rate. Only ask for the data that is relevant to the task at hand - you can always ask for more later! Features like social sign-in also help to minimise the number of fields a user needs to complete by allowing them to login with popular social credentials like Google, Facebook or Twitter.

Golden Krishna & Eric Campbell in a Keynote for SXSW assassinate the use of drop downs in modern web design. They argue that drop downs are; used unnecessarily, can require a long time to find the information you need and take up a huge amount of space in their active state.

I’m not sure drop downs can be convincingly killed off but at least they can be used sparingly and cleverly. Features like auto complete and format-specific keyboards for example (e.g. bringing up the number pad when the user is entering a credit card numbers), ensure the exact data requirements of each field are met whilst negating a clunky user experience.

 

  1. Load time

Load time plays a huge part in the success of your site on a mobile device because up to 40% of mobile users will abandon a website if it takes longer than 3 seconds to load. (https://blog.kissmetrics.com/loading-time/)

Tools like pingdom help to evaluate the load time of your website and tend to make suggestions around what you can do to speed up your site.

 

  1. Unwanted interactions

There’s no point in running through all the above and then failing to extend this to your ads, the majority of which seem to be designed to be clicked on accidentally. They add bloat to your site and can also make it as slow to load. In the end they do nothing other than frustrate the user and direct traffic away. If possible, just ditch them.

If you have to serve ads on your site, ensure they are mobile optimised and aren’t geared up to misdirect your visitors.

Another consideration is around Maps, typically via the Google API. Make sure you allow space either side of the map so that a user can scroll down the page and not lose themselves in an infinite scroll of geography.

 

  1. Test test test

An old colleague used to say that no plan survives first contact with the enemy. I think what he was trying to say was that any plan needed to be flexible in order to cope with unanticipated demands of the audience. You need to provision enough time and resource to test and optimise before and after your mobile site has gone live.

Employ a third party tester to see exactly how people will interact with your site. Your review of your website will always be biased based on your knowledge of the company. User acceptance testing (U.A.T.) can help you spot any shortfalls and highlight areas for improvement that you may not have picked up.

A big part of optimisation will be around ensuring you have the correct analytics package in place; this will help to measure and track interactions which are important to you and your team. If using Google Analytics for example, consider how Events can help you measure your website's effectiveness across mobile.

 

Finally…

As mentioned earlier, the digital landscape is constantly evolving and you need to be flexible enough to cater for whatever the future holds. I haven’t even touched on some of the more future-facing elements of mobile; touch gestures, location detection, mobile specific capabilities, responsive vs adaptive vs mobile sites… For that, I’d suggest getting in contact with our Technical Director and Mobile UX team. They’re the experts.

What I hope I have done is highlight some of the main bugbears for users and made some helpful suggestions for improving your mobile experience.

 


Related News