Mobile Web Navigation Paradigms

We are accustomed to a variety of navigation schemes on the Web such as tabbed navigation schemes and menus located on the sides of the main page content.

These schemes give us useful visual clues about where we’re located within the site and provide reference points on how to navigate within the site. Obviously, this is more difficult to do in a mobile context because of the mobile devices’ limited screen size and navigation capability constraints. While it isn’t impossible to use desktop style navigation scheme like tabs on a mobile device, they generally do not work as well as they do on the desktop due to the limited device screen size and pointing capabilities.

The preferred and most common method of creating mobile navigation schemes is to use a simple vertical list of options, often assigning and listing the corresponding numbers (0–9) to the accesskeys for keypad navigation. You can design this list in many ways using stylesheets or images. You should consider supporting more advanced navigation methods for higher-end phones to ensure a rich user experience on these devices.

Showing multiple levels of navigation within your list usually doesn’t work well because it gives users too many options and consumes valuable screen area. A better way is to show only the options related to the page they’re viewing.

However, you should provide escape points, either as links to the next section, to the parent section, to the home page or all of the above. These links usually work best at the bottom of the page and allow the user to move on without scrolling back to the top of the screen.