I was very fortunate to have standards expert Aaron Gustafson as a techical reviewer of my book, Designing Web Navigation. He recently ran a piece in .NET magazine called “Master Mobile Navigation,” and he asked me to contribute a sidebar to that article.
Below is the short text I wrote focusing on the position of navigation menus.
Position Is Everything
The position of navigation menus is an important decision screen designers have to make.
In desktop applications, main navigation options are typically located horizontal along the top. This convention is nearly universal, but with exceptions. An advantage is that the functionality and tools of the program are given the full screen width.
The first websites with static navigation menus positioned them vertically on the left. For a hierarchical, content-based website, this shows the structure of the pages well. The menu is also always visible when the page loads, even if there is horizontal scrolling. But web navigation is not as standards as desktop applications: menus also appear along the top and even on the right side.
With the design of mobile applications we see a different set of conventions emerging. On smartphones, menus are often horizontal along the bottom of the screen. This provides easy access with the thumb when holding the phone in the palm of the hand. It also avoids having to reach across the screen to touch an option, as happens with a top aligned menu.
What’s more, hidden menu options are common with mobile devices. These can either be accessed by swiping a small tab to open a “drawer” on screen or via a hard key on the device itself. Discoverability and memorability of these options is lower since they are out of sight, but this tactic saves valuable screen real estate.
Tablets frequently have menu bars at the bottom of the screen, but also along the vertically along the left side. Their slightly larger screens allow for this. A left-hand position also mirrors how people hold tablets on the sides on the device. Overall, we find even more variation in location of navigation menus with mobile devices than with websites.
So what’s the best screen location for mobile navigation? The situation, not some arbitrary guideline, should ultimately drive your decision. There are potentially many viable options. For designers, these means it’s imperative to thoroughly understand user behavior, the context of use, and the limitations of the device to make informed decisions.
Text by James Kalbach as appeared in “Master Mobile Navigation by Aaron Gustafson, .NET, Sept 2012.