Signposts: Helping Users Navigate Content

Navigating unfamiliar information on the web requires aids.
These aids don’t have an agenda or bias the way advertising does. Instead, navigational aids help people find the right path based on their interests.
Signposts are one type of navigational aid. They provide the information people need to make their own decisions while searching and surfing the web.
Should a designer worry about a website losing readers? Many websites compete for attention by luring audiences with vibrant illustrations, catchy typography and rich user interfaces.
In addition to being attractive, other websites strive to be useful. The goal of usability isn’t to get attention, but to get repeat visits. Advertising loses readers, in the sense that it directs them to other websites, whereas usability is about making sure they don’t get lost.

Like their real-world counterparts, web-based “signposts” are visual cues that guide people through new territory. In the physical world, people rely on landmarks, maps, signage and lines of sight to find their way through unfamiliar territory.
Online, one goes by descriptive links, navigation bars and headings on the page. Real-world and virtual signposts have the same purpose: to help people find the best path to their destination.

Hyperlinks Are Overlooked Opportunities

The web wouldn’t work without links. Yet visitors and designers alike often dismiss links as one-time events. Click, load and that’s it. But the right information can turn simple hyperlinks into useful signage that leads visitors to the information they seek.
Hyperlinks are only as meaningful as their clickable text. A poorly crafted link will leave people wondering whether the link is worth a click. The words in and around a link should inform people what the link will do (e.g. redirect them to another page or website, download a file, etc.) and what makes leaving the current page worth their time.

1. “Click here to browse our collection of detective and crime stories.”
2. “Browse our collection of detective and crime stories.”
3. “Browse our collection of detective and crime stories.”

The examples above appear to mean the same thing, but there are important differences:

1. The first example uses the phrase “click here.” The effectiveness of this phrase has long been debated. Both the W3C and major search engines state that keywords in links are more useful than generic phrases. That is, people searching for detective stories are more inclined to search for “detective” than for “click here.”
2. The second example gets the most links into the fewest words. Each link on its own is less specific than “detective stories” but may be more appropriate depending on how the content on the linked websites is organized.
3. There are two advantages to a link like the one in the third example. First, the link has keywords, which means there is no doubt about where it leads. Secondly, its total clickable area is bigger; small links require more precision from the visitor.

Design Adds Meaning to Links

Unfortunately, overwhelming people with information is possible. For example:

Read more about the history, sub-genres, proposed rules and famous characters of detective stories (external link to Wikipedia).
Read more about the history, sub-genres, proposed rules and famous characters of detective stories (external link to Wikipedia).

The link above tells people that they will leave the current page and indicates what they can expect to find, but it’s a lot to read at a glance.
With HTML, designers can add more meaning than words alone can give.

Read more about detective stories.
detective stories

Some things to note:

• We moved most of the text to the “title” attribute. Most browsers show the title only when the user hovers their cursor over the link, which reduces clutter on the page.
• We left “Read more about” outside of the link. Whether to remove phrases like “click here to…” and “see more…” depends on one’s style, but in general using as few non-keywords as possible is best.
• In browsers that support HTML5 and CSS3, the rel attribute indicates a link’s type. Designers who use CSS attribute selectors with approved rel values will be able to style links according to their relevance.
• We used an icon to indicate that the link will take users to another website. Icons can be ambiguous, but a hint is better than nothing.

A caveat: avoid repeating words from the clickable text in the title attribute. If you’re not telling your readers anything new, there’s no point including it. For example…

Detective stories

… is better than…

Detective stories

Effective Navigation Bars: More Than the Sum of Their Links

Any link can be helpful, but the best guidance a website offers should appear in its navigation bar.
A navigation bar is a list of links to major parts of a website. Navigation bars are usually placed at the top or left edge of every page on a website, and they vary in appearance. Well-crafted bars do more than just provide links. They:

• Give visitors a sense of the website’s purpose and priorities.
• Serve as a simplified site map.
• Denote the location of the current page within that map.
• Tell visitors where they’ve already been.

Even if they’re thin, navigation bars deserve more than to be relegated to the fringes of a layout. An ineffective navigation bar is vague or unhelpful and might have such problems as:

• Link text that could be found on any website. “Home,” “About,” “Services” and “Contact” may be accurate, but these headings are too generic to give a sense of identity or purpose.
• All links styled the same way. On a complex website, a simple list of links isn’t just unhelpful, it’s downright unfriendly.
• Links that point to the wrong pages or to pages that don’t exist.

Even if a visitor decides not to click, the link might still be a success. Let’s say a visitor wants a company’s email address. The navigation bar on the company’s website might offer many choices:
Home | Services | Your account | Services | History | Careers | Rates & policies | Contact
The obvious choice is “Contact.” And by being obviously wrong, the other links tell the visitor not to click on them. From a content-hunting standpoint, this navigation bar is saying:
No | No | No | No | Not likely | Maybe | No | Probably
Can a navigation bar be full of “no”s? Certainly, if the website doesn’t have what the user wants. Good navigation isn’t about providing the answer at any cost. It simply guides people to the content they want with the least ambiguity. The goal of an effective navigation bar, then, is to turn as many “probably” links into either “yes” or “no” links.

Signposts Are Tools

Like all tools, signposts are a means of crafting solutions but are not solutions themselves. The purpose of signposts is to simplify for readers, not to add a layer of complexity.
Web-based signposts shouldn’t lure people to their destinations. Rather, the designer should tell people what’s available and empower them to decide where to go.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a web designer who solves communication problems with better design.
How do you make content easier to navigate? What’s the most difficult website you’ve ever had to dig through? Share your stories in the comments section below.