Basic Patterns for Mobile Navigation

Pay attention to navigation and search, make them accessible and discoverable, but don’t forget one of the basic tenets of mobile usability: prioritize content over chrome.

​

how to prioritize content while making navigation accessible and discoverable.

​

If you decide to use a navigation bar or a tab bar, they should be the main chrome area of the screen and little extra space should be devoted to other utility-navigation options or to search.

​

The navigation menu makes the navigation options least discoverable and is best suited for content-heavy, browse-mostly sites and apps.

​

If you decide to use a navigation menu, you need to think seriously about supporting navigation in other ways, such making the IA structure of your site more discoverable by increasing the cross-section links.

​

The key is to pick the type of mobile navigation where the (inevitable) downsides will hurt your users the least for the kinds of tasks they are most likely to perform on your site:

Hamburger menus accommodate a large number of options, but these options are less discoverable. They are particularly well suited for browse-mostly sites. Navigation bars and tab bars take space on the page, and work well when the number of navigation options is small. Sites that are primarily task oriented can use a homepage-as-navigation-hub pattern.

​

Posted on September 3, 2019