close

Navigation

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.

Top app bar

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 Bar

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.
 

  1. Use only 3-5 elements.
  2. Use short text labels.
  3. Don’t use multiple colors.
  4. Avoid using both the bottom and top bars as it may confuse users.

Pic. 1. Simple design that contains only three elements and uses the same color

Pic. 2.Too long text label causes text truncation

Navigation Drawer

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.

 

  1. It should be permanently on-screen or controlled by an icon.
  2. It can open from the left side of the screen or the bottom when combined with the bottom navigation bar.
  3. The text labels should be short and clear.
  4. We can use icons or leave the text labels without them
  5. Don’t use the same icon for different destinations.

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

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.
 

  1. They can be fixed or scrollable. Scrollable tabs should have some tabs off-screen until scrolled.
  2. We can use icons and text labels or both.
  3. Text labels should be short and clear.
  4. Use color change and underline to highlight an active tab.

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

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.

 

  1. Show the full navigational path.
  2. Progress from the highest level to the lowest.
  3. Use page titles as your breadcrumb titles.
  4. Collapse breadcrumbs if they have more than four items.
  5. Make the last Item unclickable.

Pic. 1. The separator icon shows movement

Pic. 2.Don’t use slashes as separators. Use arrowheads instead

Tip's & Tricks

  1. Use clear labels.

  2. Make your design simple. Avoid unnecessary design elements and animation.

  3. Make the interactive elements look clickable.

  4. Design from left to right. Users are used to it, so put your menu or drawers on the left side of the screen.

  5. Communicate user’s location. Highlight the currently selected section. Consider using breadcrumbs.

share the term