Designers make navigation structures to help people move through websites, but good structure and function are not enough. Navigation should not only show where you can go but also where you are now. Each page on a website could be the first page your website visitors see, so it’s important to convey enough context so that people can proceed immediately toward their goals.

Photo of a freestanding map pillar on a city sidewalk
Navigating the web from a web search is somewhat like being dropped off at an arbitrary location in a strange city. Good signage is essential. Photo by RK Photography
Photo of a store map display with a marker labeled "You are here" situated between Footwear and Snacks
Fixed maps, often placed prominently in shopping area walkways, orient people by showing them their current location using you-are-here markers. Photo by Britain W.

Visitors Don’t Always Use the Front Door

In a world where search engines can drop your website visitors anywhere, it's important to signal where users are in the information space, so they can navigate from there successfully. Even when visitors arrive via the homepage, they may need orientation as they traverse the site.

Signage reassures people that they are traveling toward what they need. As in a train station, web location indicators may be a combination of color coding, lighting, signs, arrows, paths, and names of landmarks. When people become confused, concerned, or lost, signs and signals often help them be more confident about how to proceed.

Make it easy for visitors to identify both the website and the page topic at a glance. On the web, you-are-here signaling is often accomplished by changing the appearance of the navbar, icons, or menus. This navigation signaling is reinforced by breadcrumbs and headings. Shopping checkouts and application procedures (wizards) tend to use step names and numbers too.

Typical You-Are-Here Mechanisms

  • Logo and branding: Presenting a logo shows ownership of content. Logos should be linked to the homepage. Other branding, such as trademarks, color palettes, and signature fonts may be used to trigger recognition of an organization’s established credibility. Usually this effort is concentrated in the top left corner of websites, which is most likely to be onscreen first, regardless of device size.
  • Navigation change: A link or graphic element (tab, button, label, etc.) related to navigation becomes more visually prominent when the user selects that topic. Often this prominence is achieved through highlighted coloring or offsetting the element in space, or both (for better accessibility).
  • Headings: Left-aligned headings help left-to-right–language readers scan quickly for meaningful words. Several levels of heading can be exposed at once to show more context and path information.
  • Window (page) title: HTML titles appear at the top of each window or tab, in search-engine results, RSS feeds, news aggregators, bookmarks, and history lists. Descriptive, unique titles help indicate ownership, information organization, and the page’s particular contents.
  • URL: Well-chosen, human-readable web addresses are important to sharing, credibility, recognition, and recall. A page’s web address can be used to reveal some of the information architecture to help contextualize the content.
  • Breadcrumbs: The information hierarchy is exposed in a linked path. As with URLs, breadcrumb structure can help expose nearby content, but in a more explorable way.
  • Contextual cues: Date, tags, icons, and other symbols and signs may be used to place the information in the right context, both in time and in the site’s information architecture.
  • Visual design changes: Color-coding, changes in branding, and other visible differences can signal a change of location. Color-coding (where the predominant color changes depending on the section of the site) is usually found in websites with sharply distinct types of content. For example, magazines, news sites, and many organizations use color and brand changes to differentiate among features, departments, and product families.
  • Steps: Checkout steps, or other sequential task flows, are typically named and numbered on progress indicators. These step indicators usually run horizontally above application pages or appear as a vertical list on the left. They show both the entire sequence of steps and which step you’re on now, to help set expectations correctly.
Screenshot: BBC Technology News, with four location indicators marked in the top-left screen area.
BBC News indicates where you are with (1) logo and branding, (2) navigation-bar change, (3) headings, and (4) contextual cues. The page title and URL include the article's title and website's name.
Screenshot: A required reading list for a class taught via Open Course Ware at MIT. Location indicators appear in the first screenful of content, in the typical top-left page area.
MIT’s OpenCourseWare website has great location indicators: (1) branding, (2) navigation bar changes, (3) breadcrumbs, (4) headings, page title, and URL, but it misses the important, visible, time context.

Page titles and URLs are also helpful for showing information context and location:

MIT's page title: Readings | Introduction to Technical Communication: Explorations in Scientific and Technical Writing | Comparative Media Studies/Writing | MIT OpenCourseWare (It's a bit long, but very descriptive and keyword rich.)

MIT’s URL: http://ocw.mit.edu/courses/comparative-media-studies-writing/21w-732-5-introduction-to-technical-communication-explorations-in-scientific-and-technical-writing-fall-2006/readings/

At OpenCourseWare, the textbook publication dates (1995-2003) hint at the page’s vintage, but only the URL provides an intentional cue about the year of the course (2006). It’s best to show visible dates or date ranges on pages, so information that survives over time can be understood in the context of its era. The copyright in the page footer (for the entire website) indicates 2001-2015, but that’s too wide a range for technical or scientific content.

”Locations” is shown in a red rectangle on a black, horizontal navigation bar. Buttons include “Find a library!” and “libraries near me.” Street addresses of libraries appear below.
New York Public Library’s website navigation bar changes the current-page category name from black to red. Colored buttons on the page have informative labels that indicate the page’s purpose, and sample content is shown immediately. Logo branding plus these signals form a coherent indication of where you are in the library’s digital realm.
European Space Agency’s website uses two navigation bars, breadcrumbs, two headings, and prominent branding to situate photos in its time-based, space-image collection.
It's difficult to show navigation bar changes effectively in the lower levels of a deep website information structure. That's where breadcrumbs save the day. The European Space Agency has strong signals in both areas. (It’s slightly confusing, though, that a photo taken in 2014 is categorized as a 2015 photo — possibly because of its release date.)

Test for Effective Location Signaling

Many web designs use location indicators that are too subtle to communicate well. Designers notice everything about their designs and have a firm mental model of the site’s structure. They know how to get around on the website, and they don't need orientation, so it’s difficult for them to see the design as others do. Website visitors, on the other hand, may be new to the site, or they may use it infrequently, so everything there is novel and potentially interesting. For this reason, a signal that may seem distractingly obvious to the designer is often not even noticed by the visitor. People easily overlook subtle changes.

When to Test

Existing websites can test location signaling anytime.

For new web designs, testing for location orientation is best done when your website visual design is in the high-fidelity stage. Show real content with all the types of distractions that are expected to exist when the website is live — especially any advertising, animation, and photos — because these are the design elements most likely to influence what people pay attention to.

How to Test for Location Signal Effectiveness

  1. Show people various pages at different levels of your website, one at a time, without navigating to them.
  2. Say: “Pretend you just arrived at this web page. Where are you on the website?”
  3. If they give an answer (right or wrong), ask: “How can you tell?”
  4. If they say they aren’t sure, ask: “What would you expect to see here to help you know where you are?”
  5. If they are still not sure where they are, ask: “What would you normally do in order to find out?”
The Telegraph.co.uk error page (404 not found)
Avoid making navigational dead ends. Sometimes, a URL is no longer valid, having fallen to linkrot. In that case, show people where they tried to go, by leaving the URL in the location bar. If someone made a typo, the user can see it and potentially fix it. For everyone else, provide helpful suggestions and website navigation, as the Telegraph does, so people can reorient themselves quickly. The error page apologizes, suggests rechecking the page address, provides an index link as well as full site navigation, and offers ways to check system status and to contact people. Search-results pages with no results should be handled in a very similar way.

Bottom Line

Only testing with users can tell you for sure, but if analytics show that many people are wandering, pogo sticking, and backtracking, you likely have an information architecture problem to address. The visual location cues may not be strong enough or well placed; navigation labels, titles, and headings may be insufficient or misleading; or all of the above.

Historical Note

Interestingly, the concern about users becoming “lost in hyperspace” led to a lot of very creative but more-complex solutions in early hypertext systems prior to the World Wide Web. It’s good that the web uses a practical and minimal set of signposting conventions these days, and that browsers provide a Back button, which users rely on to take them back to known territory.

Related Courses

Information Architecture and Navigation Design