Usability guidelines for mobile websites

Designing a mobile website doesn’t need to be complicated. Granted, there are special considerations that need to be borne in mind, but practicality and ease of use should always be uppermost in the designers mind. Obviously the easiest answer would be to modify the existing primary website to make it compatible for mobile handsets, but this isn’t always practical, nor as easy as it might at first seem. It’s important to remember that there will have to be some big changes made to the website to make it compatible for mobiles, like layout, design and construction. So, is it easier to build a new design from scratch, or can you just tweak your primary website to suit? The answer is it all depends on what you’re trying to achieve. It’s horses for courses unfortunately, but hopefully the following tips might help.

Keep the content limited

It’s impossible to fit everything from a primary website on a mobile webpage. There just isn’t enough space. Remember, every pixel counts. It’s important to limit the amount of content shown on the mobile-optimised version.  Prioritise the most important content or features, and ditch what you don’t need like low priority content such as content or links that are outside of the main content area: in other words the type of content typically found in the right hand columns of standard web pages. Mobile websites need be focused. This makes them easier to read and move around, as well as quicker to load on devices that can sometimes have slower Internet connection speeds.

Stick with a single column layout

Wide web pages are difficult to view on small mobile phone screens, even on devices like the iPhone with their large screens. Even then most web pages load zoomed out to fit on the screen: the text remains unreadable until users zoom in to the area they wish 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. It’s better to use single column pages that take 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.

Position the navigation carefully

You can’t use the traditional navigation placement on mobile websites; that is at the top of the page. It just wouldn’t work. If you try stacking the navigation, you push the content too far down. So what are the options for displaying navigation on a 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.

Keep text entry to a minimum

Entering text onto websites using mobile phones is much more difficult than when using a desktop or laptop keyboard. Even the best touch screen keypads can be difficult to use. Users make far more errors and are significantly slower when typing. It stands to reason, then, that users don’t want to have to type as much on mobile websites.

Do you need more than 1 mobile site?

Processing power, screen resolution and screen sizes vary tremendously on mobile phones, so it’s important to design your mobile website accordingly. 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 3 main mobile versions. M.facebook.com is the main mobile site, touch.facebook.com is optimized for touchscreen mobile phones and 0.facebook.com is optimized for users in countries with very slow download speeds.

Design for both 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 optimized 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 2 or more links close together then it’s easy to accidentally tap the wrong one.

Links should be avoided for any important calls to action (it’s less of an issue to use them for footer links). Instead, try to design any call to action so that it takes up more screen space and make it large enough to be tapped easily.