Visualizing different layers of navigation

Navigation consistency is crucial to a user’s experience of a product. Consistent navigation brings coherency and efficiency to the experience of a product.

Below is a proposed navigation pattern for a platform. Central to this design is a task model of user interaction. Understanding the series of steps a user takes to complete a task and what tasks are primary is paramount in designing delight experiences.

Three Layered Navigation

The layers of navigation can be divided into three sections. With this example, I thinking of the platform as the sum of all the products offered to a user. 

Platform

This is highest level of interact with links to different products in a platform and access to user settings. This navigation is at the top of the window and always visible to the user.

Example interactions:

  • Switch between products in a platform.
  • Change user settings.
  • Go to a Dashboard.

Product

This navigation will link to the different sections of the product. Any section within the product will be accessible here given the correct permissions. The navigation here can be hidden in dropdowns or appear exclusively on the individual product section.

 

Task

Within a product, the tasks are the high level functions that are offered to the user. Task are comprised of all the interactions needed to complete the user’s objective.

Subtask – a subdivided group of interactions  involved in achieving an objective. This could be filling out a form, selecting options for a draggable component in a builder, or any group of interactions needed to complete a task. These are the buttons and dialogs to achieve tasks or task groups within an application.

Task interactions and microinteractions are the smallest steps taken to achieve a specific goal. There can be  tasks that require many microinteractions.

 

MENU