Information Architecture   «Prev  Next»
Lesson 6 Navigation and labeling
Objective Identify types of navigation and labeling.

Identify Navigation Systems

What types of 1) navigation and 2) labeling are commonly used in website design?
Here's a breakdown of common website navigation and labeling types, with a focus on their usability implications:
  1. Navigation
    • Hierarchical Navigation (Main Menu):
      • Typically a horizontal bar at the top of a site.
      • Features main sections, often with dropdown submenus.
      • Best for: Well-structured sites with clear categories.
    • Footer Navigation:
      • Links at the bottom of a page.
      • Often includes secondary links (About, Contact, Privacy Policy), sitemap, or repeated main navigation.
      • Best for: Supplementing primary navigation.
    • Utility Navigation:
      • Small set of links, usually top-right of a page.
      • Focuses on user actions (Login, Profile, Search, Shopping Cart).
      • Best for: Quick access to essential actions.
    • Sidebar Navigation:
      • Vertical list of links, often on the left or right side.
      • Common for blogs, news sites, or content-heavy sections.
      • Best for: Navigating within a specific content category.
    • Breadcrumb Navigation:
      • Shows a user's location within the site's hierarchy (e.g., Home > Products > Electronics).
      • Best for: Orienting users in complex websites, preventing them from feeling "lost".
    • Faceted Navigation:
      • Allows filtering content by attributes (size, price, color).
      • Often used on e-commerce sites.
      • Best for: Zeroing in on specific products in large catalogs.
  2. Labeling:
    • Navigation Labels:
      • Should be clear, concise, and match users' mental models.
      • Avoid jargon or overly creative terms.
      • Test labels with actual users to ensure they're understandable.
    • Call-to-Action Labels (Buttons):
      • Use action verbs (e.g., "Download", "Subscribe", "Add to Cart").
      • Make the purpose of the button instantly clear.
    • Headings and Subheadings:
      • Break up content into sections with informative headings (H1, H2, etc).
      • Guide users' scanning and quickly convey the topic of each section.
    • Link Text:
      • Make links descriptive, avoid generic "Click Here."
      • Link text should indicate what the user will find on the destination page.

Important Considerations
  • Consistency: Use the same navigation patterns and labeling styles across the site.
  • Mobile-friendliness: Navigation must be easy to use on smaller screens.
  • Don't Overwhelm: Too many navigation options can be confusing. Focus on the most important.

Types of Navigation and Labeling

The following series of images will illustrate several types of navigation and labeling features.

Navigation, Labeling, and Architecture Components

The following paragraphs discuss the various types of navigational elements.

Navigational Elements for your Website

  1. Primary elements: Global and local items
  2. Global elements: Integrated on every page
  3. Local elements: Appearing only on pages of a sub-site
  4. Supplemental elements: Placed remotely, give overview of site content and organization
  5. Labels: Textual and iconic elements
  6. Textual labels: Literal, word-based indicators
  7. Iconic labels: Visual images that resemble what they represent

Web Navigational Elements

SEMrush Software