What makes a good mobile site experience? 10 tried and tested UX tips to maximise conversions
There has been a lot of talk about mobile responsiveness and optimising sites for mobile devices for a long while now. But if you take a quick look around the web it is clear that many businesses still design their sites on desktop and then convert what is there to smaller screens with minimal change. Unfortunately this can result in a mobile site where UX is actually having a detrimental effect on conversions.
There is one big differentiating factor between mobile and desktop users that you need to cater for if you want your mobile site to work. Mobile users are more goal-orientated. This means they are more likely to be visiting your site with a specific purpose in mind and they expect to be able to achieve this goal effortlessly. We can boil this down to three watchwords when designing pages for mobile:
RELEVANCE > EASE > SPEED
So with these watch words in mind, here are our top tips on how to design a mobile experience that works for a goal-orientated audience.
Top Tips
1. Categorise your users’ tasks into at least primary and secondary groups. Only those that make the primary grade should be immediately visible on the page. All secondary considerations need to take a back seat.
2. If you have multiple primary tasks then you need to create multiple main landing pages for these rather than make the homepage into a one-size fits all. Users from search need to land on the main page where their task can be achieved, rather than having to navigate from another page. These landing pages need to look and feel like main pages rather than sub-pages.
3. Once each landing page has a task then assign a goal and try to adopt a one-click rule for each goal achievement. For example, Virgin America recently changed the CTA throughout the mobile site to simply “book a flight” and no other. As a result mobile users could book a flight twice as fast. They made the assumption that the only primary task their mobile site needed to cater for was flight bookings so this became their one-click rule. So simple!
4. You have a much smaller space to do what you need to do so make the space count. Images and video are really important to grab and hold attention but they should not take up all the space above the fold.
5. Keep menus simple and short. Mega menus are out – keep primary tasks in the menu. Instead mobile users want to navigate by…
- A search function. It should always be visible and invest in something that is really useful, easy to use and actually delivers relevant results. Help users find what they are looking for with auto prompts, suggestions and even questions. Is a list of relevant pages the best way to deliver results.
- A filtering function. Place filters at the top of the page and help users by displaying how many results will be returned when a specific filter is applied. Make them easy to add, remove and edit.
6. Navigating back and forwards in a user journey can also be more challenging on mobile. You should feature small sticky headers and footers which keep the most important navigational links always in view – for example, homepage, shopping cart, menu icon in the header and your own backwards and forwards icons in the footer with a click to call CTA. Sticky headers and footers also serve the purpose of grounding the user in a page so they know where they are and don’t feel adrift in the content. A visible breadcrumb can also be essential but again simplicity is the key – it should only feature main or sub category pages rather than every page in the trail. And don’t take users into new windows to access any site content as it is more difficult to get back on mobile.
7. Scrolling should be vertical as much as possible. Horizontal scrolling is not as popular so keep this to a minimum and only use in small sections. Instead you can also consider using landscape orientation. Mobile users will tend to switch between orientations if you prompt them to do so – with a good reason why.
8. E-commerce functions and form filling must be tested on all mobile screen sizes. It is especially important that you do not make mobile users scroll horizontally or vertically to get to the ‘Next’ or ‘Buy’ buttons that move them on in the process. Make it as easy as possible to enter any data you are collecting – so use the most appropriate input type for each field, use autofill and auto advance functions instead of making users fill out information and click to proceed.
9. Make it easy to carry on the task on a different device or at a later time. Given the limitations of small screens and how people use mobile devices whilst out and about, users often want to switch between devices and frequently want to finish tasks on other devices or later times. Support users to do this any way you can by helping them send links or remind me notes to social media or email accounts on long form content pages or forms. ‘Save for later’ lists on ecommerce sites, that only require sign-in with social media or google accounts, also work really well in maximising conversions.
10. You must have heard this before – but fast page loading speed is absolutely essential so make sure you run each important mobile page through a speed testing tool and carry out any recommended improvements. Google’s page speed testing tool is here if you need it. https://developers.google.com/speed/pagespeed/insights/
Simplicity and clarity is what you are looking for in your mobile UX. Achieving this starts with knowing what tasks a mobile user will want to make on your site and then catering for each of these as intuitively and quickly as possible. Hopefully, our 12 top tips will help but also keep your eyes open. If you see a feature on a mobile site that helped you to complete a task then test it on your site. For any more advice get in touch with the team at Varn.
