m7: high-level navigation

High Level Navigation

  • High level navigation is designed to assist users in understanding the content available and directing them to their desired destination within the website.

Key Navigation Patterns

Horizontal Navigation
  • Definition: The primary navigation is located at the top of the page and remains persistent across all pages of the website.
  • Functionality: As users navigate deeper into the site, an additional layer of navigation is introduced, known as secondary navigation.
    • Characteristic: Secondary navigation is contextual, adapting to the user's location within the website.
Global vs. Local Navigation
  • Global Navigation: This aspect allows users to access any section of the website freely.
  • Local Navigation: Once a section is chosen, local navigation provides access to subsections within that specific area.
    • It operates under the concept of locality where navigation is focused on the current section.
Vertical Navigation
  • Common Scenario: Local navigation is often presented in a vertical format, which is particularly advantageous when there are numerous subsections that cannot be accommodated within a horizontal layout.
Sliding Drawer Navigation (Off Canvas)
  • Mobile-First Design Influence: A pattern adapted from mobile interfaces is that global navigation might be hidden when a specific section is accessed, showcasing local navigation instead.
  • Hamburger Icon: Users can tap on this icon to reveal the global navigation options in a sliding navigation drawer, making it possible to navigate back to any other area of the website seamlessly.

Real-World Examples

Horizontal Navigation Example - The Guardian Newspaper
  • Global Navigation: Features categories like news, opinion, sports, culture, etc.
  • Local Navigation: Upon entering the sports section, users are presented with a local navigation bar displaying further subsections available within the sports category.
Vertical Navigation Example - Lululemon
  • Website Layout: The website utilizes a horizontal global navigation bar.
  • Local Navigation in Skirts Section: When the skirt section is selected, the categories are too numerous for a horizontal fit, hence are listed vertically.
  • Deeper Navigation: Navigating into the activity section brings up further local navigation options like casual, tennis, running, etc.
Sliding Drawer Navigation Example - New York Times
  • Site Structure: The website exhibits global navigation across the top.
  • Deeper Levels: As users delve into the world section, local navigation replaces the global navigation at the top.
  • Accessibility to Global Navigation: The hamburger icon at the top left enables users to open up the sliding drawer, thereby accessing the global navigation again even after deep navigation into subsections.