7 usability guidelines for websites on mobile devices
As the Mobile Internet continues to grow very quickly, we've put together some guidelines on how to create or improve your mobile user experience.
1. Reduce the amount of content
Not everything shown on a PC site can fit reasonably onto a mobile web page, where space is short and every pixel counts. It's important to reduce the amount of content shown on the mobile-optimised version.
Only include the most important content or features. Low-priority content that can be removed might include content or links that are outside of the main content area, content that's typically found in the right-hand columns of standard web pages.
Mobile websites should be very focused. This makes them easier to read and move around, as well as quicker to load on devices that can sometimes have slow Internet connection speeds.
2. Single column layouts work best
Wide web pages are difficult to view on small mobile phone screens. Even on smartphones like the iPhone, with its relatively large screen, standard web pages load up zoomed out so that they can fit on the screen. Most text is unreadable until users zoom into the part of the screen they want to view. Zooming in isn't ideal because it adds an extra step, and zooming in and out isn't easy to do on all phones.
Instead, create single-column pages that use up the whole width of the screen. To add additional content the page should expand downwards rather than across, as scrolling down is easier than scrolling across and users generally prefer it.
3. Present the navigation differently
It's difficult to fit the navigation across the top of the screen on a mobile web page. Stacking at the top would push the content too far down. A single-column layout on a mobile phone screen page, placing the navigation at the top, would push the content too far down. Here are some tips for adding a navigation to mobile website:
- On the homepage, place the navigation and site search at the top of the page, and leave content for later pages. This is suitable for sites on which users want to navigate or search straight away, rather than read content – for example, when users visit ecommerce sites they usually have a specific product category in mind and want to tap through it or type it into the search box.
- Place the navigation at the bottom. Users can still access the navigation, but it doesn't get in the way of reading the page. An anchor link at the top of the page can give quicker access.
- Place the navigation in a dropdown link at the top of the page (and possibly at the bottom too).
- Only offer a 'back' button on pages other than the homepage. This keeps the page design simple at the expense of any ability to navigate directly to another section of the mobile website.
4. Minimise text entry
Entering text onto websites using mobile phones is much more difficult than when using a desktop or laptop keyboard. Users make far more errors and are significantly slower when typing on even the best mobile keyboard than when using a full-size PC keyboard. It stands to reason, then, that users don't want to have to type as much on mobile websites.
Ways to reduce the amount of text entry required include:
- Allow users to use stored details in their 'My Account' section when going through a mobile checkout experience e.g. picking from previously entered delivery addresses.
- Ask users to enter a PIN instead of a password.
- Take advantage of inbuilt functionality (see below).
5. Decide whether you need more than one mobile site
Screens and processing power on mobile phones vary tremendously. For example, a quick check on a leading mobile phone retailer showed phones selling with resolutions ranging from 128 x 160 pixels to up to 480 x 800. And, while many smartphones have the ability to load up full web pages, less advanced phones can't cope and would crash trying to do the same.
If your mobile website is only going to be seen by smartphone users with fast download speeds, then one mobile version will be ok. However, if you want a broader reach then you should consider creating a paired down version. Facebook goes as far as having three main mobile versions. m.facebook.com is the main mobile site, touch.facebook.com is optimised for touchscreen mobile phones, and 0.facebook.com is optimised for users in countries with very slow download speeds.
6. Design for touchscreen and non-touchscreen users
Smartphones account for the majority of mobile Internet usage in many countries, including the UK and USA. So, it's important that your mobile site should be optimised for smartphones. These typically have large touchscreens screens, but may have a more traditional trackball, joystick, or directional keys. Therefore, it's important to that your design is easy for both touchscreen and non-touchscreen users.
The most common difficulty with viewing standard web pages on a smartphone is in selecting, particularly tapping, small text links accurately. Fingers tend to be too thick to hit a small link accurately, and if there are two or more links close together then it's easy to accidentally tap the wrong one.
Links should be avoided for any important call-to-actions (it's less of an issue to use them for footer links). Instead, design call-to-actions that take up more screen space, and which can be tapped easily. For example, use thick rows that span the width of the screen, or square boxes, both of which can be tapped easily.
7. Take advantage of inbuilt functionality
Many mobile phones have an advantage over PCs – they come with lots of inbuilt functionality that most PCs don't have. You can make it easier for users to perform certain tasks by utilising a mobile's inbuilt, native functionality and thereby remove the need for manual steps.
Make calls
All phones can, of course, make phone calls by default (PCs require additional software and most users won't have purchased credit to make calls from their PC to physical phone). Allow users to automatically ring a number when they tap or click a phone number. This is useful for 'Contact us' or 'Store finder' pages.
See an address on a map
Similarly, it's possible to give the user the option to select an address and automatically open the mobile phone's map application.
Find the nearest...
Users are often away from their home when they use the Internet on their mobiles. Since many mobile phones come with inbuilt location-detection capability (e.g. GPS) you can ask a user to share their current location. High street retailers, for example, can make it easy for customers to find their nearest stores on a map. Social networking mobile sites can make it easy for users to find people, places or events near them.
Input information in innovative ways
There are innovative means of allowing users to input information in ways that are fun and useful, from QR codes to gamification.
Wrapping up
The number of people accessing websites on their mobile phones continues to rocket. They can be given a much better user experience by following these guidelines:
- Reduce the amount of content
- Single column layouts work best
- Present that navigation differently
- Minimise text entry
- Decide whether you need more than 1 mobile site
- Design for touchscreen and non-touchscreen users
- Take advantage of inbuilt functionality
