Skip to main content
Humanities LibreTexts

5.8.4: Navigation

  • Page ID
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    It’s common for site designers to work from the website owner’s point of view. After all, the owner is paying for the site. But the user’s goals are probably very different from the owner’s [1]. Most users want to find something – a product, a news article, a college to attend, etc. Therefore, as several experts in the field have stressed, the primary concern of web designers has to be to make it as easy as possible for users to find what they are looking for. As Clement Mok says, “Navigation is about wayfinding [sic]…. It’s about creating a complete system. It’s about looking at the whole” (as quoted in Fleming [2]).

    It's useful to remember that searching online is a lot like looking for a product in a store. When we enter a store, we have to decide first whether to search on our own or ask an employee. Online, we have to decide whether to go to a likely homepage or use a search box. If we decide to look for the item ourselves in the store, we use the store’s cues (signs) to find the right display and then examine the items on the shelf. The online process is similar. If we start with a likely homepage, we then follow the links (signs) that seem most likely to lead us to our goal.

    Although using the Internet has many similarities to looking for things in the “real” world, we have to keep in mind some important differences. In the “real” world, we usually have some sense of how big the space (store, office building, etc.) is and how much of it we have covered in our search. But in a website, this isn’t clear so it’s hard for the user to know when to give up the search [3].

    Also, in a website there’s no sense of direction; we don’t turn left or right or go north or south (although some websites try to mirror traditional navigation, such as "The Mealings"). Neither do we have the sense of location that comes from moving past things and picking up bits of information about them as we go. On the web, when we click on a link, we’re instantly taken to that place, with no chance to see anything else on the way [4]. It’s easy to get lost. That’s why the Back button makes up 30-40% of clicks [5]. It’s also why Homepages are so important. Because they’re relatively fixed, they enable the user to get back to a familiar space and start over [6]. This need of web users to get back to familiar territory is understandable because, when we’re on the net, we’re inherently lost. We can’t look around to see where we are (no street signs, no landmarks, etc.). Users constantly need to “figure out where they are” [7]. Therefore, we need to give them some basic information early in the website. We need to tell them

    • Where they are
    • Where they can go
    • How they can get there
    • How they can get back to where they started [8]

    One method of showing users where they are is by creating a stable navigation bar. A stable navigation bar stays in the same spot of a webpage (usually the top), even when users scroll down. "Vogue," "GNV Partners," and "La Grange" all use a stable navigation bar. In addition to the stable navigation bar, you can organize your navigation system spatially. "Kintore Business Park," for instance, places links next to a visual representation of buildings for rent. Also, it is important to note that the navigation bar should not detract attention from the main items of interest. Navigation bars can be kept minimal but still easily accessible, as demonstrated in a speaker company called "BeoPlay," which uses a series of dots on the left to correspond to each page.

    In addition to helping users find what they’re looking for and telling them where they are in the site, navigation has other purposes:

    • It gives them “something to hold on to….to make us feel grounded.”
    • It reveals the content of the site
    • It tells users how to use the site, by telling them where to begin and what their options are
    • If the navigation is good, it gives users confidence in the site

    “Navigation isn’t just a feature of a website, it is the website….” [9].


    1. Fleming, Jennifer. Web Navigation: Designing the User Experience. Sebastopol: O’Reily, 1998. Print, p. 7.
    2. Fleming, p. 3.
    3. Krug, Steve. Don’t Make Me Think: A Common Sense Approach to Web Usability. 2nd ed. Berkeley: New Riders Publishing. Print. p. 57.
    4. Krug, p. 57-58.
    5. Krug p. 58.
    6. Krug, p. 58.
    7. Krug, p. 59.
    8. Fleming, p. 5.
    9. Krug, p. 59

    5.8.4: Navigation is shared under a CC BY-NC-SA 4.0 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?