ARTICLES

VIDEOS

PODCASTS
BACK TO
FRONT PAGE

Jon Maskrey is a user experience designer and front-end developer. He specialises in website performance and usability. Jon works in Zengenti's Professional Services department delivering end-to-end web projects for clients. Ryan Bromley is Zengenti's marketing content coordinator.

@Zengenti

How easy is your website to use on a mobile device?

SHARE

Image:
© Zengenti 2018

The Better Connected Mobile survey will be published towards the end of April. In all probability half of the users that visit a council site are using a phone or a tablet. Jon Maskrey and Ryan Bromley of Zengenti offer a few tips on how to design a mobile friendly site.

The chances are that over half of your users are visiting your site from a smartphone or tablet. Over the last few years Socitm have taken the growth in mobile use into account with a dedicated Better Connected Mobile Survey. With this year’s survey taking place soon, it’s a good time to look at some of the ways you can improve your mobile experience.

Interaction cost

Good user experience design is all about reducing interaction cost. That is, taking away any unnecessary steps between a user arriving on your site and carrying out the task they’ve set out to complete. Removing these unnecessary steps becomes even more important when designing an experience for mobile users. Despite the fact that there’s no evidence our attention spans are actually getting shorter, we often use our mobile devices when we’re doing something else. That might include watching TV, commuting by train, or waiting to pick the up kids from school.
 
These other activities compete for our attention by presenting any number of distractions. Each of these distractions use up some of our working memory – a bit like the way running lots of applications uses up the RAM in your computer. The problem is that this is the same working memory we use to carry out other tasks, such as navigating websites. This means that trying to pay your council tax on your mobile phone while you stand in a noisy tube train is a lot harder than carrying out the same task sat at a desktop computer in a quiet room.
 
So, how can you make it easier for people to use your website in the face of these distractions?            

Mobile-first design

Mobile-first design involves designing websites to suit the requirements of mobile devices ahead of desktop computers. While mobile users will struggle to use a desktop site, most desktop users will be able to use a mobile site. Mobile-first design is becoming even more important as Google introduces mobile-first indexing – meaning not having a mobile-friendly site could make it hard for people to find your content.  
 
Mobile-first designs will usually be stripped back to include only content and functionality that is absolutely essential to the needs of users. Features will then be added to the desktop site in a technique known as progressive enhancement.    
 
Here are some other design principles that help to create a pain-free mobile experience:
  • Keep menus simple and to the point – limit them to 2 sublevels and don’t include too many items.
  • Ensure buttons and links are easy to press on a touch screen – make them at least 7mm (48 pixels) wide and at least 5mm (32 pixels) away from other buttons.  
  • Make sure text is easily readable – use a font size of at least 15 pixels and use a colour that creates an acceptable degree of contrast in bright daylight.
  • Consider putting important items at the bottom of the screen – as mobile phones grow in size the top of the screen is becoming harder to reach.
  • Break content into chunks using white space to make pages easier to navigate.

 

Homepage of Portsmouth City Council website as viewed on a mobile device
The Portsmouth City Council homepage is designed around users' needs and highlights the services that residents use the most.
 
For instance, designing your homepage around your customers’ top tasks makes it easy for mobile users to access your most frequently used services immediately without having to look through menus or search your site. It also makes your website appear more like the native apps that mobile users interact with every day, and so seems a more familiar mobile experience.

Easy-to-use site search

No matter how great you make your navigation and information architecture, when using large sites that contain a lot of content many users prefer to search for information. The Better Connected survey includes several questions that ask how quickly users can find information that won’t necessarily be among the top tasks highlighted on your homepage. You need to make sure that the users who prefer to search rather than use your site navigation can find this information as quickly as possible.
 
Search facility of Wycombe District Council website as viewed on a mobile device
Wycombe District Council's site search is prominent and makes it easy for users to find the information they need with very little typing.
 
It’s important to make sure that the search box is easy to find and that the search functionality is as intelligent as possible. This helps reduce interaction cost – the amount of work that a user has to do to find the information they are looking for. Here are some ways to do that:    
  • Make sure the search box is visible. Use a simple magnifying glass icon to call attention to the search box but don’t hide it behind the icon where it’s less prominent.
  • Put the search box in the top right corner of the page. Users scan web pages from left to right in an F-pattern. They expect to find the search box in the top right of the page.
  • Use auto-complete or auto-suggest to complete users’ search terms. Typing on mobile devices is difficult and completing users’ search terms saves them from having to type them out in full.
  • Provide autocorrect functionality to cut down on typos and speed up the search process. Because the keyboard on mobile devices is so small people make more mistakes. Correcting typos or providing “Did you mean?” style help text reduces failed searches.
  • Don’t erase users’ search terms when they submit their query. Users will often refine their search by making changes to their original query. Erasing their last search term makes this harder.
Remember, search is not a replacement for good navigation. If your analytics data shows that a lot of users are searching for the same content, then you should look at where that content sits in your navigation. Employ user research techniques like tree testing to find out how easily users can carry out tasks and identify areas where your navigation can be improved.  

Mobile-friendly forms

Forms are one of the most-frequently used elements of any service-orientated website. Using almost any service will involve a users completing a form to provide information. Creating frictionless forms is a vital part of any effort to drive self-service and channel shift – if people get confused or frustrated when completing a form they are likely to abandon it and contact you through other channels.
 
Thankfully good form design isn’t rocket science. It’s all about making it easy for users to enter information quickly and accurately. Here are some basic principles to follow when designing and building forms:
Don’t forget to test your forms on real users. It’s not hard, and it could uncover easily-fixed usability issues that would otherwise cost you significant amounts of time and money. You don’t have to test with a wide pool of users – testing with just 5 people will uncover up 85% of usability problems.
 
Most local authorities work with a limited budget and are better off investing in developing a fantastic website rather than spreading their resources too thinly. Last year’s Better Connected mobile test asked whether users are offered an app on the website being tested. If you have a business need for a mobile native app and the budget to develop both a first-class website and an app, then go for it.
 
Responsive website have several benefits over native mobile apps when it comes to user experience:
  • A user looking to complete a task on their mobile might not be able to download your app due to data restrictions.
  • Website content will appear in search engines results, unlike content in native mobile apps, making it easier to find.
  • By following mobile-first design principles you can create a website that works well on desktop and mobile – ensuring a consistent user experience across all devices.
Also bear in mind that responsive websites incur lower maintenance costs than native apps – you only have one platform to maintain as your responsive website should be built to work in any mobile browser. If you decide to offer a mobile app you’ll need to create and maintain apps for various mobile operating systems, at least for the two most widely used platforms, Apple’s iOS and Google’s Android. These apps will require frequent updates as Apple and Google make breaking changes to their operating systems.

Conclusion

Ensuring your design is easy to use on mobile isn’t difficult. It’s all about making sure that users can quickly find your content – either through your navigation or using your search – and doing everything you can to make it as easy as possible to fill in forms quickly and accurately. The easiest way to check you’ve got this right is to use your site yourself. Even better, get at least five real users to test it. You’ll soon gain some valuable insights into areas you can improve.  

 

Back to homepage