Since ‘mobilegeddeon‘ – the latest algorithm update from Google that means websites are now penalised for failing to be mobile friendly – businesses have been searching for ways to improve their mobile site, increase traffic and conversions, and deliver a better mobile experience to their users.
Here are top five tips on improving UX for a mobile site.
Understand your audience and don’t forget accessibility
The most crucial part of UX is understanding your audience. You need to put yourself in the mind of a user and understand what they need and expect from your mobile site. So if the target audience of your website is young children, how you optimise your UX will be different to that of a website with a target market of adults aged 25+, for example. However, when it comes to UX, there are a number of elements that all businesses should be considering for their mobile site, regardless of its target audience.
2.7 million people in the UK alone are colour blind, which is 4.5% of the population, and although you might not realise it, there are probably quite a few users of your site that are, in some way, visually impaired. So it’s really important that you consider accessibility. In the UK there are nearly two million people living with sight loss, so optimising your website with this in mind can’t hurt. The following changes can be undertaken to make your mobile site more accessible:
Break content down into small, easy to read sections – ensure you use titles, subheadings etc.
- Use descriptive labels and navigation.
- Simplify complex processes, and signpost the user’s current location. This is particularly useful when filling in forms.
- Provide auto-complete in drop down bars and search menus to help reduce user error.
- Design for readability – leave enough space between lines, make text big enough, and have between 10-15 words per line.
- Generally it is best practice to write as if you’re talking to an 11-12 year old. And using tools like read-able.com can also help you decipher whether your language is correct for most users.
Consider different design approaches
The whole point of drilling down into the UX of your website is to better your user’s journey – basically, you want to make it as smooth as possible. There are two main designs that you can use for the layout of your website so that it is optimised for mobile: adaptive and responsive.
In theory, responsive is usually the best approach when it comes to any website’s layout, whether it’s for mobile or desktop. However, there are times when an adaptive layout could be a more suitable fit. Either way, both are well-optimised for mobile, thus making Google, and your users, happy. There are pros and cons for both layouts:
Adaptive layout
An adaptive layout is rendered based on the browsing device. When the site is first loaded, it detects the device and screen size and then optimises the design and functionality to enhance the overall experience. Generally, there are six common screen widths that you would design for, so there are just a handful of states to consider, whereas with a responsive layout you can quite easily have hundreds. Adaptive sites are the better option when you want your site to work differently for different situations or uses. Amazon is a brilliant example of a business that uses the adaptive design really well. It knows that the majority of its customers use the mobile site for comparing prices, so the site has been designed to make browsing products as efficient as possible. Whereas with their desktop site, the focus is mainly on upselling – where you see ‘You might like this’, or ‘Have you seen this’, – so the adaptive design adjusts really well to the different uses across devices.
Responsive layout
The majority of websites are now designed with a responsive layout – since it’s been made a lot easier to implement for those that aren’t necessarily web developers, by the introduction of themes accessible through CMS systems like Umbraco and WordPress. Responsive designs use a fluid layout, and have a natural feel when scaling – with a responsive design you won’t get that jump as a window is resized. If you have the resource, a responsive design is the way to go for a flexible and adjustable design that runs seamlessly, and it’s also a cheaper option if you have a restricted budget.
Consider targets and touch zone sizing
Content on any mobile site should never be smaller than the average fingers – the recommended range of touch targets is 7-10mm. It can be incredibly frustrating for a user when the touch areas are too small and they can’t use the website properly, especially if, like mentioned earlier, the user is visually impaired. Not only do incorrect targets and touch zones have a growing impact on SEO, but the improvement of usability by making these bigger will reduce user error.
Keep pinch and zoom enabled
Although your mobile website should be optimised well enough for most visitors not to need the pinch and zoom function to read your content, for some users disabling it altogether could make it unusable. Sometimes a web developer might want to disable it to simplify their development process. However, if zoom isn’t available on your mobile site and visitors abandon their journey early because it’s not easy to use, Google could penalise you for having a site that isn’t correctly optimised for mobile.
Always test with users
So you’ve optimised your website and taken our points about accessibility and layout design into consideration – but how do you know if it’s worked?
Getting a group of people to use your website is the only way to get honest feedback on the UX of your site. Try to talk to your target users whenever possible – testing the website on the right demographic will provide you with deep insights that will enable you to craft a more holistic user journey – but if you can’t, get a bunch of people from your office to have a go, or some of your friends. It’s really important that you test your hard work with people that haven’t been involved in the development of the site. Maybe you know someone that’s colour blind, and they find some of the colours you’ve used clashing. Red and green, for example, are the two colours most people that have colour blindness have difficulty with. So if you have two buttons and one is red and one is green and they’re right next to each other, it could be tricky for someone that is colour-blind to decipher. This kind of feedback and what you do about it could make a huge difference to your conversions, and the overall success of your mobile site.
It’s more important than ever for businesses to really consider optimising the UX on their mobile sites. The brilliant thing about UX is that it can be constantly adapted in-line with customer feedback, or any other updates that might pop up from Google, so getting your head around it soon can only be beneficial to your business.
