Usability for mobile websites
Smart phone users have increasingly high expectations for what they should be able to do when using the web on their phones. This means a differently designed website that is mobile-optimised and focused on a handful of key tasks.
Most companies don’t pay attention to the usability of their mobile visitors. This is even though mobile access to the web is expected to be greater than desktop access by 2014. As a result, the user experience suffers and visitors more to your competitors website.
There are many factors to consider when designing a mobile website. For example, CMS integration, url format, SEO - too many for this article. Instead, here are nine key points to increase usability for mobile websites:
Design a mobile-optimised site
Access to desktop website
Simple navigation
Images and videos
Avoid text input
Simple language
Respect conventions
Think stubby fingers or long nails
Use sharp contrast
Design a mobile-optimised site
This is not the same as a miniature version of your desktop website! Instead, design with the smart phone technology in mind. Graphic design skills and considerations for the mobile web is different to the desktop version.
Access to desktop website
Ensure your visitors have a direct access to the desktop version of your website. At the Met Office, the mobile website I designed directed the user to the mobile site by identifying their browser. However, if they selected a desktop version as their preference, a cookie saved this as their preference for their next visit.
Simple navigation
Your information architecture needs to be simple and flat. This means only having the key items and keeping the link labels short. Mobile users will not dig too deep into your navigation.
Images and videos
For the mobile web, you have to pay even more attention to optimising images and graphics for size and shape. I prefer to show videos through YouTube or Vimeo as opposed to streaming it directly. Finally, don’t have key information as a pdf or other document formats.
Avoid text input
At all costs avoid users having to input text to get information. Where you have to use forms or a search box, use wide input boxes so they can see what they are typing. Finally, help the user by using dropdowns, checkboxes and carousel where possible.
Simple language
Cut the features that are not core to your mobile user and reduce the word count so you focus on the key message. This takes writing for the web skills to a higher level.
Respect conventions
Web conventions of the desktop website, for example logo always on top left and links to homepage, are there for a reason. This is what the user expects and is a habit for them. A mobile web design is not the place to try and change these conventions. Follow the same heuristic principles of the web for both desktop and mobile web.
Think stubby fingers or long nails
Touch screen phones are not the easiest to use if you have stubby fingers or long nails. Therefore keep the design big and simple with clickable areas no smaller than 50 x 50 pixels.
Use sharp contrast
Use fonts and background colours that guarantee legibility in any surrounding, particularly when used outdoors or in bright sunlight.
Using these guidelines, for most of the tasks, your mobile users will get a superior user experience. For a small minority of tasks, they will still need to go to your desktop site. The big gain experienced in using a well designed mobile website will comfortably outweigh a small penalty that's suffered in the extra click to go to your desktop version.
