4

Designing a website to be used to search and view people on a mobile browser. It needs two types of navigation: one primary (for overarching functions), and another secondary (for functions once a person has been found). Vertical navigation is preferred as there may be sub-nav items in both cases. We want to try and show as many navigation functions as possible... there are too many items for horizontal secondary navigation to be accessible. We also want search function to be as easy as possible.

In this scenario, which pattern is best to use?

2 Answers 2

1

Interesting question and good visual by Dipak. There's no right answers for you without testing various design patterns with your users.

Basic Patterns for Mobile Navigation

In Summary: Mobile navigation must be discoverable, accessible, and take little screen space. Exposing the navigation and hiding it in a hamburger both have pros and cons, and different types of sites have different preferred solutions to the mobile-navigation quandary.

Top Navigation Bar

The top navigation bar is essentially inherited from desktop design. It is simply a bar that enumerates the main navigational options across the top of the screen. This is quite efficient, but has two disadvantages:

  • It works well only when there are relatively few navigation options;
  • It takes up valuable real estate above the fold.

enter image description here

The Tab Bar

Close relative of the top navigation bar specific to apps. It can appear at the top (Android mostly) or at the bottom of the page (iOS mostly). It is usually present on most pages within an app and has the same disadvantages as the navigation bar. One important difference between tab bars and navigation bars is that tab bars are persistent, that is, they are always visible on the screen, whether the user scrolls down the page or not. Navigation bars usually start out being present at the top of the page but disappear once the user has scrolled one or more screens down. (A sticky version of the navigation bar stays put at the top of the screen, or as the user starts scrolling up, reappears at the top of the page.)

enter image description here

The Hamburger Menu (and Variants)

The navigation menu is a menu that contains the main navigation options in a manner that usually hides the detailed options but makes them visible upon request. While the hamburger icon is perhaps the most talked-about signifier for a navigation menu, other labels and/or icons can be used for navigation. (In fact, third-party research seems to suggest that using the word Menu instead of the hamburger icon is slightly more popular with users.) The main advantage of the navigation menu is that it can contain a fairly large number of navigation options in a tiny space and can also easily support submenus, if needed; the disadvantage is that it is less discoverable, since, as the old adage says, “out of sight is out of mind.”

enter image description here

Conclusion

Making navigation important and accessible is a challenge on mobile due to the limitations of the small screen and to the need of prioritizing the content over the UI elements. Different basic navigation patterns attempt to solve this challenge in different ways that all suffer from a variety of usability problems. 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.

More bout menu patterns could be found in here https://www.nngroup.com/articles/mobile-navigation-patterns/ Great talk by LukeW about mobile patterns (menu included) https://youtu.be/Y-FMTPsgy_Y?t=2324

0

Get inspired by Facebook's Mobile App.

enter image description here

You can use the bottom tab-bar navigation for Search and top hamburger for the secondary navigation.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.