Mobile Site Navigation

by Brightlemon Admin on 20 Jan, 2010

With more and more people using mobile phones to access the web, it makes sense to provide visitors with the best experience possible. Navigation plays a very important part in this and has to be carefully considered. Browsing the web with a phone is a very different experience compared to a traditional desktop or laptop computer, and a navigation setup that looks great on a monitor may not work at all on a mobile device. Site navigation that caters to mobile users in mind will benefit from improved usability and reduces the risk of user frustration.

The W3C best practice guidelines for the mobile web state that primary navigation should be placed at the top of the page. Ideally, this will be fairly basic, taking up a few links as possible. The fewer links, the more chance the user has of viewing page content without scrolling. Although few devices will be able to display the complete content without scrolling, the user should see enough to gain an idea of what the content is. Even just a title and the first sentence will give enough context for the user to know what content they’re viewing. Having fewer links can also speed up a user’s browsing experience. Many mobile devices highlight each link in turn as the user scrolls, which can be a slow process if there are too many of them. Having fewer links will reduce effort on the user’s part.

Primary links should not be your only concern. Any secondary links should go at the bottom of the page, possibly linked to from the top with an anchor link.

While you should seek to reduce the number of navigation links, this should be done with the context of your site in mind. If reducing the number of links increases the number of pages a user has to navigate to access their desired content, then the net result is a less usable site. With the time and cost it takes to retrieve a page, you should seek to reduce objective barriers – allow a user to reach their goal in as short a time as possible. The W3C recommends that users should be able to reach their objective in no more than four retrievals.

Navigation consistency is also helpful, as this prevents users from getting lost in your site. If they have journeyed through your site using one set of links, only to visit a new page with a different set, they will soon grow frustrated. It is vital to keep your core links ever-present on a page. Any ‘drill-down’ navigation menus or breadcrumb trails will allow users to know how they reached their current location.

Access keys are a great way of allowing users to quickly skip to key areas of your site. Common repeated links (such as ‘home’) are ideal for access keys – users can take a quick shortcut to their desired page by simply pressing a keypad number.

The description used for a link is also of great importance. It is important for a user to know what they’re going to get when they click on a link, so it’s best to use clear and concise text to best convey the link result. If the link leads to a file format that is not commonly supported by your targeted mobile devices, this should be made clear in the link. The W3C recommends this for all files that aren’t XHTML, GIF or JPG.
Other mobile don’ts…

Don’t use image maps
Don’t use pop-up windows
Don’t create auto-refreshing pages (without enabling the user to stop them)

Useful Links:

W3C Mobile Web Initiative
dev.mobi
Opera Mini Emulator
Mobile Web Design: Tips & Techniques

BrightLemon