Synonyms: navigational components
Navigation is a set of actions guiding users through the app or website. Navigation is important for users’ interaction with your product. Our task is to set the best and easiest route to solving users’ problems. We can do that using many tools, the most popular below.
It is an interface element including related content and actions on the top of the page. Top app bar can transform into a contextual action bar. It can contain a navigation icon, a title, action items, and an overflow menu. Top bar can also contain imagery, but be careful using it.
Pic. 1. Text and icons remain visible
Pic. 2.Don’t use imagery that makes your text and icons unreadable
Bottom navigation bars allow quick switching between sections of an app. They display from three to five options at the bottom of the screen. The icons represent each option and sometimes have a text label.
Here are some general rules for bottom bars.
Pic. 1. Simple design that contains only three elements and uses the same color
Pic. 2.Too long text label causes text truncation
Navigation drawers contain main navigation destinations. We use them for apps with more than five destinations, unrelated destinations, or multiple levels of navigation.
Here are some basics for this element.
Pic. 1. Simple and clear design with recognizable icons
Pic. 2.Don’t apply icons only to some destinations. You should use them for all options or leave only text labels
Tabs represent a single row on the top side of the screen. They allow users to move between related and on the same level of hierarchy options.
Here are four tips for the tabs’ design.
Pic. 1. Offset the first tab on the left to show that tabs are scrollable.
Pic. 2.Don’t use the different padding on each tab.
Breadcrumbs show the user’s current location. It helps users understand better the structure of the site. There are some rules for making your navigation readable.
Pic. 1. The separator icon shows movement
Pic. 2.Don’t use slashes as separators. Use arrowheads instead
Use clear labels.
Make your design simple. Avoid unnecessary design elements and animation.
Make the interactive elements look clickable.
Design from left to right. Users are used to it, so put your menu or drawers on the left side of the screen.
Communicate user’s location. Highlight the currently selected section. Consider using breadcrumbs.