Why Product Observability Matters? Read Now
Cubyts

How to define a Navigation Schema?

Navigation schema is a set of rules that defines a way to get from one place to another inside a digital product.

Duration

1 week

Complexity

Advanced

Contributors

UX Designer, Interaction Designer, Design Lead, Product Manager, UX Writer, Customer

Getting Started

A navigation schema, also known as a navigation structure or site map, is a framework that defines the hierarchical arrangement of content and the paths that users may take to access that content on a website or application.  It helps users to find the information they need in the product. 


How to?

Here are general steps to define a navigation schema:

  1. Create a visual representation: Use a visual tool like a flowchart or diagram to represent the navigation schema. This representation should be easy to understand and help stakeholders visualize how users will navigate the website or application.

 

Commonly used navigation elements Desktop interface

e.g. Websites, Portals, or products

    1. Global navigation is present throughout the product and is a part of the screen that has buttons and links that can move you to different pages.

    2. Local navigation is a sub-navigation or page navigation. It is an extension of global navigation.

    3. Contextual navigation helps move to other similar content/ parts of the product. This is optional.

 

 

 

Commonly used navigation elements on Mobile interface

e.g. Mobile apps


Do’s & Don'ts

 

Do’s

Don’ts

  1. Do user research before defining the navigation schema.

  2. Define a simple and intuitive navigation schema.

  3. Do make sure that navigation on desktop devices is optimized for mouse clicks.

  4. Do ensure the navigation on mobile devices is designed considering touch interactions. 

  5. Create a visually clear information hierarchy.

  6. Use as few elements as possible.

  7. Use clear and concise labels for navigation links that accurately describe the content.

  8. Maintain consistency in the navigation schema. 

  9.  
  1. Don’t create an over-complicated structure. 

  2. Don’t create deeper hierarchies unless really necessary.

  3. Don’t use vague or generic labels that don’t describe the content accurately.

  4.  Don’t neglect mobile optimization.

  5. Don’t forget to test your navigation schema with real users.

 


Suggested Tools 

  • Miro

  • Milanote

  • Figma


References 

Other Related Best Practices

  • How to Create an Information Architecture