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.
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.
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 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.
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.
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:
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.
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.
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:
Keep forms simple – collecting information you don’t need is a waste of users’ time and is forbidden under the upcoming General Data Protection Regulation.
Add labels above each field and group similar fields together to reduce cognitive load.
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.
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.