How to define a Navigation Schema?

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. Conduct research: Before creating a navigation schema, it’s important to understand the user's goals and needs. For that, conduct user research, including surveys, interviews, and usability tests, to gather insights into what users are looking for and how they prefer to navigate a website or application.

2. Identify main categories: Based on the research, determine the primary content categories and their subcategories. Create a list or visual representation of these categories and subcategories.

3. Organize the content: Arrange the content categories and subcategories in a hierarchy that reflects their importance and the relationships between them. The top-level categories should be the most important and broad, with subcategories becoming more specific.

4. Define the navigation structure: Determine how users will access the content. Decide on the primary navigation options like horizontal menu, sidebar, or breadcrumb trail, and how users will move between sections of a website or application. 

5. 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.

6. Test and refine: Once the navigation schema is in place, test it with users and gather feedback. Refine the structure based on user feedback and repeat the testing process until the navigation schema is intuitive and easy to use.

 

Commonly used navigation elements Desktop interface

e.g. Websites, Portals, or products

1. Global(or Primary), Local(or Secondary) and Contextual navigation

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.

 

 

2. Adaptive navigation: Special kind of contextual navigation generated from data intelligence using a process referred to as collaborative or social filtering. E.g. ‘People also bought…’ section in Amazon where the possible combinations that are popularly bought are shown.

3. Menus: Menus are content categories or features, typically presented as a set of links or icons grouped together. They are visually differentiated from the rest of the UI elements.

4. Toolbars: A toolbar is a bar that has buttons, icons, and other things to help you do something. The toolbar is used for actions, which need to be done repeatedly. 

5. Quicklinks: A bunch of links to frequently used parts of the product.

6. Search Bar: Search element provided in products/portals which has a lot of information that is mostly organized under a complex hierarchy.

7. Breadcrumbs: Pathways that show where you currently are on a website.

8. Footer: The footer is the bottom part of a website and can be used for some generic functionality. The footer can contain things like a site map, links to other websites, copyright information, links to social media sites, and contact information.

 

Commonly used navigation elements on Mobile interface

e.g. Mobile apps

1. Top Navigation: This element is at the top of the UI that includes high-level actions, which are important and required through different tabs of various other functionalities of an app.

2. Bottom Navigation: As the name suggests, it is a bar placed at the bottom of the UI. It is a great way to help users quickly and easily navigate between different sections of your app.

3. Hamburger Menu: It is a method of hiding more elaborate navigation, so users can enjoy more screen space. It's usually placed on the top bar.

4. Cards: The card is a UI element, which helps users get diverse information from it and lets them drill down for more details.

5. Tabs: Similar to the bottom navigation, tabs are used to switch between alternative views within the same context. 

6. Gesture-based navigation: Swipe, pinch, zoom, etc. are some of the popular gesture-based navigation options.

Do’s & Don'ts

 

 

Suggested Tools 

• Miro

• Milanote

• Figma

References 

• Navigation Design Fundamentals - How to Design Navigation from Balsamiq Youtube Channel

• Site Maps vs. Navigation vs. Taxonomy: What’s the Difference? from Key Pointe Consulting 

• The Difference Between Information Architecture (IA) and Navigation from NN Group

• Mobile navigation: patterns and examples from JustInMind

• Implement Global Navigation to Improve Website Usability from IxDF

• Navigation Systems — Information Architecture for Designers from UX Planet

• UI/UX Design Glossary. Navigation Elements from Tubik

• Schemas: Designing According to Users' Expectations from IxDF

• Card Sorting Best Practices for UX from Adobe
  
  

Other Related Best Practices

• How to Create an Information Architecture