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. Signposts: Helping Users Navigate Content


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.

  • http://www.faico.net/ Web Design Software Creator

    As a software developer, I always wonder if its more effective to hyperlink ‘call-for-action’ words, e.g. ‘download here’, or ‘click here’ instead of a keyword. Visitors might simply ignore text link these days as most people won’t read content in great detail.

    Advice from some other blog posts suggest it would be easier for people to see, and act on links, if you use a large, colorful button (e.g. DOWNLOAD NOW button), instead of using hyperlinks. Hyperlinks are becoming more and more used for SEO purpose, i.e. navigation by search engine robots, not human.

    • http://twitter.com/z0r z0r

      Call to action buttons and hyperlinks in the paragraph are not the same. While the 1st wants your full attention and no reading, the 2nd just tells you where you can go to check some links. No one will make a call to action button in the paragraph with phrase “LOOK AT WIKIPEDIA NOW!!!”. That’s just .. not smart.

  • http://www.virtuosimedia.com Benjamin @ Virtuosi Media

    Very thoughtful post Ben. Some other signposts in content worth mentioning are the headers, bolded and italic items, block quotes, images, video, and pretty much anything else that draws attention to itself through visual distinction. Of note also are the size, color, spacing, and proximity to other objects that call attention to themselves. Most readers only scan rather than read, so it’s important to draw their focus to what’s important, even if it’s through a subtle method.

  • Armin C.

    Nicely written. Well designed and used links can definantly improve sematics/usability.

  • http://www.sugarcatblog.com Rachel

    Interesting article, thanks.

    I always try to use a verb in the link as users are more likely to click on a link if it contains a verb. It also tells you what’s going to happen when you’ve done it (you will ‘read more’ ‘browse products’ or ‘leave comment’).

  • http://www.bozboz.co.uk Web design Brighton

    I think that from SEO point of view, the ways you link to other pages that you described in the first point are very controversial.
    It’s hard to decide whether second or third are better for SEO, but from user perspective I do agree with you that third one is the best.

    Thanks for the tip with not repeating the keyword in the link text and in the title, I’ll look more into this.

  • http://interactivemoon.com Hang Le

    Well, if I see a link with so many words, I wonder if people would generally associate that it’s a header or something, instead of a clickable link – since a sentence like “Browse our collection of detective and crime stories.” doesn’t really suggest that it’s a click action. It of course also depends on how we design the link.
    About “Link text that could be found on any website” : I’m not sure if it’s a problem or not. Since a similar navigation (like “home”, “about”, “services”) would make the user navigate the site more easily – since they’re used to it and of course know the purpose.

  • http://laira.pathseek.info/ Laira

    Such useful great work .Thanks for sharing with us….

  • Travis

    Hey Ben. Maybe you can convince Walter to actually use real hyperlinks on the Tweets of the Week series here on this site. Bitly links with no hint as to what I’m clicking on provide no meaning at all. The link URL is irrelevant as far as needing to be displayed on the page, thus negating the need for Bitly links. Might as well just use Click Here. Not only that, don’t you think the people who run the websites you’re linking to would appreciate some Google juice?

  • http://www.randomtemplate.com RandomTemplate

    I think the key aspect should always remain, users first. Don’t worry about your linking in the form of SEO if your site is structured well and easily navigated to good content that will work itself out.

    Just keep in mind that not everyone on your site will know everything, make things simple & easy. Add tooltips where possible and explain where things lead. Whether using small amounts of text or an icon. There is alot of generic trends out there we can all rely on to “assume user knowledge” but don’t forget not everyone follows those trends.

    Babysteps, make it simple & easy and remove all sharp objects.

  • http://www.rezyde.com/residential Rezyde Management App

    I think links for bots and humans are very tricky. It takes a good balance of both to satisfy SEO and for people who visit your site.

  • http://www.infopunta.com Punta del Este

    im having troubles chosing the right categories for the navigation bar in my news website. i think i’ll have to add a subcategories in each categorie.

  • http://www.infoasistencia.com Diseñador Web Toledo

    too is a seo usefull… thx

  • http://forex673.co.cc fran

    it is advised that always use easy terminology instead of hard so that people can understand