Usability on the mobile Web: best practices and guidelines for designers and developers

In this era of technology, we are continuously interacting with things so it is vital that these interactions form positive experiences for us. This is true not only for objects or products we can physically touch, but equally so for intangibles such as websites.

User experience counts even more on mobile devices and it is one of the main factors determining if a site has a solid conversion rate or a high bounce rate. Mobile usability also incorporates aspects of accessibility and can determine how many people interact with a site, how many of them purchase, or how many gain something of value from the interaction, regardless of the device they’re using.

There are some constraints developers and designers must take into consideration when designing and developing for mobile. If device type is the broadest of these, then screen size, differing form factor and physical user interface are part of picture too.

To design a better mobile user experience it is crucial to understand the user, their behavior in relation to the mobile experience we’re going to deliver and in relation to the entire mobile web experience.

Multi-screening is fast becoming endemic. According to a research conducted by Nielsen, half of US and 62% of UK mobile phones are now smartphones while Forrester say more than 20% of the US population owned a tablet in 2012. And although the difference between desktop and tablet usage may be minimal (on large format tablets) users switch between devices according to their needs whether that is tablet, desktop or phone. Users often use their mobile devices when researching a purchase and they want information immediately.

As a general rule, if you want to deliver a great experience to mobile users, you have to think like a mobile user. What are customers looking for from a mobile experience? What goal do they want to achieve? In general, when users access a website on a mobile device, they want to focus on content that will help them achieve their goals. Even if their goal is to be entertained while waiting for bus, they don’t want to waste time (or data) trying to get to where they want to go. Mobile users are not looking at a big screen and may have to deal with the environmental factors as well as device constraints. Debates on context notwithstanding, these factors can have a huge impact on how they interact with the device.

Assuming a perfect experience doesn’t exist due to widely differing cultural and personal tastes and that context is not the only way to determine how to deliver a good user experience on mobile, it’s still possible to use the context-paradigm to research user behavior to figure out what they want to do on your mobile site. Physical context allows us to better understand how users intend to utilize your site on mobile. There are always aspects that can be planned in advance: for example, how would another user activity, like a phone call, interrupt the experience? Could location disrupt the interaction? Can I do something to anticipate the users’ needs? How will users interact with the buttons on my site?

It’s also possible explore the Technology context of the mobile site we’re going to develop: how light it has to be, how we can avoid high costs for end users, how we can protect user data if it’s required by our site and, last but not least, how we can align with our users’ expectations in terms of technology required.

The third context we can use to provide a better user experience on mobile is the Social Context. What goals can users achieve through our mobile site? How quickly can users interact with the site? How much information do we need to add to give users what they want?

Even if the idea of mobile context is not a black and white issue, it’s well worth taking into account the above parameters to provide a great user experience on mobile.

So, what does a developer or a designer have to do to avoid mistakes and to provide an enjoyable user experience on mobile?

1. Prioritize the most important content or features: on mobile space is short and time is valuable, so it’s important to decide the ideal amount of content to be shown on the mobile version of the site. Mobile websites have to be quick to load and well focused to keep mobile site visitors coming back.
2. Keep your layout simple: create a simple framework for your content and eliminate horizontal scrolling by adopting a single column layout which performs well both on mobile phones with small and big screens.
3. Give the option to view the full website: because a mobile site may not completely replicate the functionality and content of a desktop site, it’s good practice to keep a link on the mobile version that allow users to switch back to the desktop site.
4. Take advantage of mobile specific features: many phones and smartphones come with built-in functionalities that allow users to automatically perform an action such as GPS mapping, scanning QR codes or click to call functionality.
5. Use more text links than images: even if the visuals are appealing, on mobile they can be annoying, heavy and annoying to the end user. Create hypertextual links without images, using the power of colours, is a good approach to deliver a light user experience. If you need to use images, be sure they are designed to resize without breaking. Given a choice between a heavy pretty site and a plainer fast one, users will pick a fast one every time.
6. Avoid the use of pop ups and/or automatic refreshes: think about bandwidth constraints and get your message across in a different way. Go for a different, lighter and less intrusive approach.
7. Build mobile-friendly forms: regardless the device, be sure that the forms on the mobile version of the site are easy to use because entering information is much more difficult on a mobile device than on a desktop site. Allowing data selection via a menu is a good choice but there are other options as described on Smashing Magazine.
8. Optimize the navigation: when it comes to mobile, less is often more. Do not confuse your users, guide them and allow them to move freely across the site. Avoid desktop navigation schemes unless they’re appropriate for mobile.
9. Minimize the action path: use clickable buttons to perform an action, reduce user text entry, change the font and background colour of the selected links and button
10. If using redirects be sure they work: if you decide to redirect from desktop to mobile, set everything to automatically serve the appropriate version from a single URL. Be sure that if a user is requesting the URL from a smartphone he’s not redirected to the desktop version or vice versa. Device detection software, can redirect users to the appropriate experience based on the device they’re using.

Last but not least, every website is different, so it’s always good practice to carry out mobile usability testing to ensure a mobile website delivers a great user experience. According to recent studies, five usability testers are enough to represent 85% of the usability issues but the more tests you can carry out the more information you will collect. A usability test can be tricky and expensive if conducted in a proper way but there are other interesting ways to test if a mobile site is properly delivered or not, as Newfangled shows here. Using an online mobile testing solution can be another good option. A list of free or almost free ones can be found here, or try our Prism mobile test tool (also free).

Even if it’s quite old, this post by Jakob Nielsen contains a lot of useful guidelines for mobile-optimized websites. Generally speaking the old and classic rule is always a good starting point: give your users what they want, when they want it!

If you want to read further, we also recommend this deep dive on our mobiThinking.com site.