Home > User Experience > Navigation Systems — Information Architecture for Designers

Navigation Systems — Information Architecture for Designers

Navigation Systems — Information Architecture for Designers


There are 3 types of embedded navigation systems that are commonly used, global navigation, local navigation, and contextual navigation.

Global navigation system

Global navigation system is presented on every page throughout an interface, it is what we commonly called the ‘site-wide navigation bar’. It typically sits at the top of the page, consisting a set of links that allow users to access the top-level pages of a site, and a link to the homepage (presented as the logo).

Adidas global navigation bar

A global navigation:

  • Answers the question of — “does this site have what I’m looking for?” when a new user first lands on the website.
  • Helps users to get a sense of the size and the complexity of the site.
  • Helps users to reset their navigation path when they are lost.

Global navigation may come in different forms, in the recent years, mega menus and fat footers have became popular.

Mega menu allows user to access deeper level pages easily and helps users to see the information hierarchy at a glance
A bottom fat footer
Are you able to identify the global navigation system on ESPN app?

As global navigation bar has a huge impact on usability, hence when designing, we must keep user’s needs, stakeholder objectives and context in mind. There are times when a global navigation shouldn’t be display, for example during a workflow that can’t be interrupted, such as a checkout process.

Main navigation is hidden during a checkout process so that user can focus on completing the task

A local navigation systems help users to explore what is nearby. It is also known as sub-navigation or page navigation. We can view it as ‘an extension’ of the global navigation.

There are 3 common ways to arrange the global and the local navigation — inverted-L, horizontal and embedded vertical.

Inverted-L:

Local navigation is presented as a vertical link list and is placed below the global navigation, aligned along the left, forming an inverted-L shape.

Inverted-L

Horizontal:

Local navigation is placed directly below the horizontal global navigation and is presented as a row, providing more options.



Source link