If you build it they will come…that is unless they can not find it. The navigation on your website or mobile application is the map your users have to guide them to all of the features and pages you have built. If you have poor navigation your users may not be able to find what they are looking for and it might as well not exist. In this post, we will go over a few good mobile navigation strategies, how to use them and common mistakes developers make when implementing their mobile menus.
The Side Bar Menu
Let’s start with the sidebar menu. The sidebar menu is a simple solution for navigation on a responsive website. The sidebar menu starts off as a top bar navigation, once the browser size reaches a specified width the navigation transforms into an icon that can be clicked to toggle a sliding menu. This menu is easy to install and customize.
Below is an example of the sidebar menu.
- The sidebar menu allows the user to view a portion of the content on the page they have navigated to without closing the menu. This happens because part of the page is exposed when the menu is opened.
- If the menu you are using has sub-menu items the sidebar menu is probably the best fit for your project. The sidebar menu allows for drop downs to be embedded in the menu. This is why the sidebar is the menu of choice for many UI framework websites like Angular Material that have a large selection of menu and sub-menu items.
- The sidebar menu is an easy transition from a full web menu, once the screen is too small for all of the menu items to fit the breakpoint can be set to transition the UI to just a menu icon.
- Setting the breakpoint too late can ruin a users experience on your site. If you are using the sidebar for responsive web design make sure that your media queries are set to trigger the menu before your menu options run out of room and collapse to the next row. In the example below, the break point is set to small and the menu overflows out of the menu bar. To avoid this make sure you test at different screen sizes. If you add additional items to your menu be sure to go back and test again.
- Camouflaging the menu icon is a common mistake designers make when using the sidebar. If your menu icon does not stand out or if it not in a common location the user may not see it. In the example below the menu icon is one of the last things your eye sees. Your eye is pulled to the left corner where the menu button normally is. The extra icons and dull color also contribute to the lack of visibility.
To avoid this, remember that in the hierarchy of your design the add button and the menu both need to be seen. You should move the menu to its traditional position where users will expect it. You can also make it a bit larger and brighter so it can be seen clearly within the rest of the design.
UI Frameworks with Sidebar Menus
Drop Down Menu
Next we will look at the dropdown menu. The dropdown menu is a very common solution for mobile menus. The transition to this design is similar to the sidebar. When the menu items no longer fit in the menu bar an icon replaces the text.This is one of the most commonly used mobile navigation choices because it is easy to create and mobile users have become accustom to this type of menu. You can see an example of the dropdown menu below.
- The dropdown takes up less space than the sidebar menu so users can see more content while navigating. This is why the dropdown is good for smaller amounts of menu options.
- The dropdown menu has more options for placement. It can come from the center of the page, or pop up from the bottom. The sidebar is limited to the left or the right.
- Cutting off the menu is a big mistake that can be made with a dropdown menu. Be sure to give your menu enough room to show all of the navigation options. Just like any other element in your design the dropdown needs proper spacing, if all of your other graphical elements are in a grid made sure your dropdown follows the same rules.
UI Frameworks with Dropdown Menus
Last, let’s take a look at the tabs menu. The tabs menu shows a few menu options with the currently selected option highlighted or underlined with an accent color. This menu option is good for small menus or for sub-menu options on a main menu page. It is not recommended to use this menu on mobile for your main menu if you have more than four options. This menu requires a minimum amount of space to view the menu options. This style of menu has become popular on applications where multiple sub-pages can be scrolled through on a main page in the application.
- The main advantage to using the tabs menu is its simplicity. Applications with just a few options do not need to waste space with large dropdown or sidebar menus when you use this option.
- The tabs menu does not cover any of the content when you are navigating, so the user can see all of the pages content as soon as they arrive.
- The most common use case for the tabs menu is to navigate through sub-pages or different types of content in a section of the application. This is used alongside with another menu option like the dropdown or sidebar. You can see examples of this when you look at popular applications like Yelp or Venmo.
- The most common mistake people make with this menu is putting in too many options. If you have too many options on mobile you risk having your menu get cut off.
UI Frameworks with Tabs Menus
There are a number of options to choose from when you are creating the navigation for your project. You need to keep in mind how many options your user will be choosing from, how important it is to keep the page content visible when navigating, and the screen sizes your users will likely be using. These considerations will allow you to choose the most effective navigation for your mobile application.