Work With Us
Contact us

Chapter-6

Street Signs and Breadcrumbs

Designing Navigation

Summary

Chapter 6 explores the critical importance of page names and site navigation in helping users understand where they are. Just like street signs and breadcrumbs in a fairy tale, navigation elements must be clear, consistent, and obvious.

Every page needs a clear name that frames the content, matches what users clicked to get there, and stands out as the most prominent element. Good page names eliminate confusion, while poor ones leave users questioning whether they’re in the right place.

This chapter emphasizes that navigation isn’t just functional—it’s about creating confidence and orientation, ensuring users always know where they are, how they got there, and where they can go next.

key Points

Why Page Names Matter

  • Page names are like street signs—they tell you where you are instantly
  • The page name is often the first thing users look at when a page loads
  • It frames the entire page and sets expectations for what users will find
  • A good page name confirms that users have arrived at the right place
    “The page name should be the most prominent text on the page”

Essential Characteristics of Good Page Names

  • Every page name must be in the right place, prominent, and match what was clicked
  • Location: The page name should appear near the top of the page, in the content area
    “Not in the navigation, not in a breadcrumb—in the main content area”
  • Prominence: It should be the largest text on the page or close to it
    “Frame it with white space to make it stand out even more”

  • Match: It should match the link text that users clicked to get there
    “If the navigation says “Products,” the page heading should say “Products”—not “Our Offerings””

The Matching Problem

  • One of the biggest navigation failures is when page names don’t match navigation labels
  • Users click “Services” but land on a page titled “What We Do”
    “This creates doubt: “Am I in the right place?””
  • Marketing teams often want creative language, but consistency matters more
  • When names don’t match, users lose confidence in the site
    “The page name is your chance to fulfill the promise of the link text”

Page Names vs. Headlines

  • The page name and the main headline can be different, but the page name comes first
  • Page name: “Products” (matches navigation)
  • Headline below it: “Innovative Solutions for Modern Businesses”
    “This gives you both orientation and marketing message”
  • But if you must choose one, always prioritize clear orientation over creative messaging

Breadcrumbs: Showing the Path

  • Breadcrumbs are a secondary navigation scheme that shows users where they are in the site hierarchy
  • They show the path from the home page to the current location
    “Example: Home > Electronics > Cameras > Digital SLR”
  • Each level should be clickable except the current page
  • Place breadcrumbs at the top of the page, above the page name
  • Keep them small and unobtrusive—they’re there if you need them

Breadcrumb Best Practices

  • Use standard separators: > or / are universally understood
  • Don’t get creative with separators—conventions work better
  • Use small text: breadcrumbs shouldn’t compete with main navigation
  • Include “Home” as the first item, always linked
  • Make the last item (current page) visually distinct but not clickable
    “Bold it or use a different color to show “you are here””

When Breadcrumbs Are Most Valuable

  • Breadcrumbs are especially important for large, deep sites with multiple levels
  • E-commerce sites with categories and subcategories
  • Content sites with sections, subsections, and articles
  • Any site where users might enter deep into the hierarchy from search results
    “Breadcrumbs help these “parachute users” understand where they’ve landed”
  • Less critical for flat sites with only 2-3 levels of hierarchy

The Importance of Visual Hierarchy

  • Page names and breadcrumbs should work together to create clear orientation
  • Breadcrumbs (small, top of page): show the path taken
  • Page name (large, prominent): confirm current location
  • Main content: deliver on the promise of both navigation and page name
    “This hierarchy tells users everything they need to know about context”

Common Mistakes to Avoid

  • Several common mistakes undermine the effectiveness of page names and breadcrumbs
  • Using different words for the same thing innavigation vs. page names
    “Navigation: “About Us” → Page name: “Company Information” ✗”
  • Making the page name too small or visually weak
    “It should be unmistakable—the first thing users see”
  • Putting the page name in the wrong place (like in a sidebar)
  • Having no page name at all, assuming context is obvious
  • Making breadcrumbs too prominent and competing with main navigation

Testing Page Names

  • Ask yourself: If users arrived at this page from a search engine, would they know where they are?
  • Does the page name clearly communicate what the page is about?
  • Does it match the link text users clicked in the navigation?
  • Is it prominent enough that users can’t miss it?
  • Would a new user understand their location in the site hierarchy?

Key Takeaways

  • Page names are street signs—they must be clear, prominent, and consistent with navigation
  • The page name should be the most prominent text on the page, framed by white space
  • Page names must match the navigation labels users clicked—consistency builds confidence
  • Breadcrumbs show the path from home to current location and help users understand hierarchy
  • Breadcrumbs should be small, unobtrusive, and use conventional separators (> or /)
  • Good orientation (page names + breadcrumbs) prevents the “Where am I?” question
  • Never sacrifice clear orientation for creative marketing language—clarity wins
Previous
Next