THIS PAGE IS IN PROGRESS

Navigation has a voice on the page. It says, “Click on me and I’ll take you where you want to go.”

It says other things, too: “You are here,” and “These are places you have been.” It says, “Here are some places in the same area of the site you can go to,” and “Here are different areas of the site you can go to.”

When a reader rolls over a link, it gives feedback: “You have engaged me—I am ready to take you where you want to go.”

When a reader clicks on a link, it gives additional feedback: “Interaction successful—prepare to go to a new place.”

When done well, navigation communicates to readers on many levels.

Navigation Is Text and Needs to Be Readable

Readers scan navigation elements quickly. You can help by setting the links (size, line height, line length, alignment, case, style, weight, and color) to promote readability.

More like headings than prose, links can withstand caps, italics, and display fonts. However, the more links you have, the more the reader will have to scan, and the more readable you should make the navigation (Figure 13.1). A handful of links is manageable when set in all caps or center aligned. If the reader has to parse a dozen links, you can provide word shapes and a left edge to help.

 

Figure 13.1 Left: A handful of links set in all caps and centered are easy to scan. Right: A long list of links gets hard to read. Providing word shapes with lowercase letters and a left-aligned edge would help readers scan the list.

If You Click on Me, I’ll Take You Places

Links need to feel different from the rest of the text—they need to have a different voice. Placing navigation bars and lists of links apart from areas of text helps communicate this difference. But links are in the text as well. Inline links need to be set apart in other ways: color, style, size, case, or weight. When using one of these characteristics for links, don’t use it for other text. Using the characteristic that means “I’m clickable” on non-links creates confusion (Figure 13.2).

 

Figure 13.2 Top: It looks like there are many links in the text, but there is only one link in the first paragraph. Using the characteristic (red) that means “I’m clickable” on non-links creates confusion. Bottom: The red has been removed. Readers can see what is clickable and what isn’t.

You Are Here

Knowing where they are in the site helps orient readers to other places they want to visit. This guidance is especially important in a site with complex navigation.

Use contrast (change in color, case, size, or background color) to indicate where in the list of links the reader is in the site (Figure 13.3).

 

Figure 13.3 Top: Meighan Tague uses color to say, “You are here.” Bottom: The navigation system without the color.

If you do not want to orient readers through changes in the navigation, make sure the heading for each page uses the same wording as the corresponding navigation link. Matching headings and navigation links (wording) helps readers orient themselves in a site.

Oh, the Places You Can Go

In a complex site, readers navigate within — and move between — sections of the site. Think of a multi-story building: a visitor can go into rooms on the same floor or move between floors as needed.

Visiting a new section of a site (or a new floor of a building) means leaving one category of information for another, and is a significant jump within a site. Readers need to know what links will take them where.

Use vertical spacing, proximity, hierarchy, and similarity to create navigation links that “chunk” the site for your readers. Set navigation links leading to other sections differently from navigation links within a section (Figure 13.4).

 

Figure 13.4 Left: All links look the same. Where will they take your reader? Right: Visual chunking helps readers form a mental model of the site.

If all navigation links look alike, then scanning and chunking becomes more difficult. Think back to the film series assignments. The visual “chunking” truly occurred when hierarchy was added—before then, it was difficult to see the list chunked by semester and month.

Visual chunking helps readers form a mental model of the site.

You’ve Been There Already

Knowing where they have been also helps readers orient themselves on a website. Readers are looking for something. What link might help them find it? Which links have they already tried?

Showing readers where they have been is especially important with inline links (links within text). A reader may be able to keep track of the links they’ve visited in a navigation bar, but inline links often use different wording (never, of course, “click here”) or link to external pages (Figure 13.5).

 

Figure 13.5 Top: All the links look the same. Bottom: Color can be used to say, “You’ve been there already.”

Visited links are often indicated with a color change. A duller or lighter color will still say “link,” but with less emphasis.

Your Wish Is My Command

Links can respond—changing color, case, size, weight, style, background color, or underline—when readers roll over or click on them. This interactivity reinforces that a link is a portal to more content, and readers will be taken to another place (Figure 13.6).

 

Figure 13.6 Interactivity reinforces links as portals. Top: The original link state. Bottom: The link changes color when a reader hovers over it.

The trick (usually) is to keep it subtle, especially when changing a typographic element (size, weight, case, and style).

If an interaction makes other words in the text move over or down to the next line, then find another solution. The movement of the other words in the text will draw the reader’s eye and undermine the interactivity of the link (Figure 13.7).

 

Figure 13.7 Keep changes on hover subtle. If words move, it will distract the reader from the link. Top: The original link state. Bottom: The link becomes bold when a reader hovers over it. Notice how some words get bumped down to the next line. This is not good practice.

Quick Tips

Navigation is most helpful when…

• Links are readable.
• Links are easily identified, because they look different from the rest of the text.
• Contrast is used to show readers where they are in the site.
• Navigation links are “chunked” to help readers form a mental model of the site.
• Subtle contrast is used to show readers what links they have already tried.
• Subtle contrast is used to create interactions with the links.