Navigation in Hypertext: 10 Writing Tips for Web Authors

JerzWritingE-text

We only notice navigation when it doesn’t work. Web authors should follow web design conventions that account for the variety of ways users will try to navigate through their pages. While usability testing is the best way to ensure your site is really operating as you intend it to, this page offers a basic overview of basic navigation principles that most visitors will expect on most pages that they visit.

01 May 2000 — first posted by Dennis G. Jerz
08 Mar 2011 — last edited

  1. Why Navigation is Important
  2. Basic Online Navigation Conventions
  3. Navigation Elements for Every Page
  4. Case Study: WashingtonPost.com Design
  5. Group Similar Pages Together
  6. Write Meaningful Link Titles
  7. Use Consistent, Persistent Navigation
  8. Use Place-Holder Text in Your Navigation Bars
  9. Use Multiple Navigation Bars to Organize Large Sites
  10. Breadcrumb Trails: Flexible, Hierarchical Navigation

1) Why Navigation is Important

Backdoors, side doors, windows, chimneys, trapdoors. While it’s comforting to think of your front door as the place where all visitors are most likely to enter your web site, the truth is that people will use search engines that drop them anywhere — not just the home page.

Authors of traditional linear books don’t have to bother with navigation. The assumption is that the “right” way to read a book is to open the front cover and turn pages until you reach the end.

In fact, beginning web authors often divide a single document up into page-long chunks stitched together with “back” and “next” links. Such a layout barely scratches the surface of the power of hypertext (see “Hypertext Links: Whither Thou Goest, and Why“).

Think of your developing site as a collection of logical, free-standing units that can be strung together like beads, in different orders, based upon the path a particular visitor chooses to take through your site, or based upon which sections of your site that somebody else wants to link to from their own pages.

Each individual page should make sense all by itself, so that a reader who is interested in the topic can send the URL to a friend, link to it, print it, or save it to disk; yet at the same time, each separate page should help the reader figure out what the site is supposed to do, where to find pages that are similar to this one, etc

2) Basic Online Navigation Conventions

  • Put a “home” link on every page – usually in the upper left corner.
  • Use a consistent design scheme for each page on your site. (See a common newbie design issue: inconsistent navigation bars.)
  • Group similar items into discrete sections. For each item in a section, include a link “up” to an index to an index page.
    • If your website is small, it is reasonable for every page to link to every other page.
    • By the time your site grows to have about eight or nine pages, maintaining this growing list of links becomes overwhelming.
    • If your site has more than a few sections and levels, consider a breadcrumb navigation bar.
  • Forget about “Back” and “Next”.
    Instead of expecting the reader to “click here to continue” along a path that only you can see, consider offering the titles and/or descriptions of several documents that you think might be helpful.
  • Place useful navigation at the top and bottom of each page.
    • Readers prefer navigation at the bottom of each page (so they don’t have to scroll up in order to decide where to go after they’ve finished reading).
    • Browsers want the navigation at the top (so they won’t have to scroll down past content that they’ve already decided doesn’t interest them).
  • Interface Tips for “Newbies”
    • If you have more than about 8 pages, you probably need to organize your site into 2 or 3 groups.
    • No page should have a link to itself.
    • When you click on a menu option, that option should somehow stand out on the destination page.
    • There are fancy ways to automate the process of creating menus, but if your site is small you can hand-code the menus on each page, highlighting the current page. (It often takes far more time to find and fiddle with a fancy JavaScript-based or CSS menu system than it would take just to code the navigation manually. You’ll learn more, and you’ll have more control over your site, if you handle the navigation yourself.)

3) Navigation Elements for Every Page

For every page on your site, ask yourself: What would a visitor need to know about the rest of my site, if this was the only page he or she had seen so far? Some basic navigation conventions can help your visitors feel more comfortable on your site.

Yes Provide a “Home” link in the upper left corner (on every page)
(Rather than simply calling that link “Home,” call it “Sally’s Spinach Resource Center” or something else informative.)
Yes Link “up” to the first page in each subsection (on every page)
Yes Put the author and date on every page (to help users determine how current and credible the information is)
Yes Add links to related pages (use meaningful titles, not just “back” and “next” buttons)

4) Case Study: WashingtonPost.com

Major news sites like The Washington Post have a stable, consistent header and footer on each page. Multiple panels and areas can be rather confusing, so beginners who use multiple panels can easily get themselves into trouble. Readers tend to ignore navigation and anything else in the margins of the page.

Image of News Digest page, Washington Post (May 1, 2000)Content: the reason people came to the site in the first place; here marked in blue. Users typically look directly at the content area of the page; they have trained themselves to ignore most of the surrounding information, since it is typically full of advertisements. 

In this example,  the “content” fills up only about half of the first screen — this is bad for the user, who must spend more time clicking and scrolling. Commercial web sites do need to reserve some space for marketing, and even non-commercial pages need to reserve space for navigation and announcements. In fact, 50% is fairly generous, compared to some web sites.

Navigation bars: typically horizontal (here marked in red). This page shows two: the overall site bar (at the very top) and a local navigation
bar (just above the content area). The main site navigation should be constant — every page should have the same options available.

Menu bar: typically on the left (here marked in green). I think of a navigation bar as horizontal and a menu as vertical, but there’s little functional difference between them. But I would use the term “menu” to describe a navigation unit that changes to reflect specific options available to the user.

  • For instance, when you’re reading a “News” article, the menu offers many different kinds of news (National, World, Washington, etc.), and just a single link to “Style”.  If you click on “Style”, the menu appears to open up, offering links to “Television,” “Movies,” etc.  Meanwhile, the many varieties of “News” options disappear, leaving only a single link to
    “News”.
  • “But I don’t know how to make the menu bar change like that!”
    You don’t need to! Just write a customized menu for each individual page. If the menu bar is located in the same place on both pages, and the pages load fast enough, clicking on a link to load a new page will create the optical illusion that the contents of the menu are changing.

Marketing: the typical advertising regions are marked in yellow. If you put bright graphics or “Click Here!” text in these areas, users will ignore them. If you put important information here, you are burying it. As it happens, this web site includes a “search” box in the “marketing” area — I think that’s poor usability, but probably good business sense — people hunting for the search box will probably end up noticing more advertisements.

5) Group Similar Pages Together

For example, if three pages on your website have to do with tennis, you should pick one page on your site that will be a repository for tennis links. Every tennis page should have a prominent link “up” to the index of tennis pages.  If visitors find themselves following a search engine or a link directly to one of your individual tennis pages, and that page doesn’t tell them where they can find more of your tennis pages, then you’re hiding useful content from a reader.

As your website grows, if you realize that several pages on your site all have to do with the same subject, group those pages together.  If your site features three tennis stories, add to each of them a link “up” to a new “Tennis Stories” page. On that new page, add links to every tennis story on your site. (See
the box that explains Breadcrumb Trails.)

6) Write Meaningful Link Titles that Describe Page Relationships

Blind Navigation Links Helpful Navigation Links
Home | Back | Next 

Page 2

Up: Dennis G. Jerz Personal
Prev: The Jerz Family Name
Next: Newborn Peter Dennis Jerz
“Back” is an uninformative link title. The author has no idea where each reader has really come from. Besides, everyone’s browsers already have a “go back” button. 

If your pages are organized sequentially, far more useful than the bare words “Back” or “Next” or the equally vague “Page 2″ would be a brief description of what you will actually find on the next page in the sequence.

Each of the hyperlinks below will take the reader to the same page… but consider the multiple different ways that an author can introduce that link.

No Back
No Click here for more info.
The linked words jump out at you, but they carry no meaning. You’d have to click on it to find out where they go. Busy readers don’t want to be forced to explore your site blindly. 

But what does “back” mean on the Internet? How do you know what page your reader has just visited? He or she may have followed a search engine directly to one of your internal pages. Every page should stand on its own, providing the reader with enough information to determine whether there is an obvious “start” page or where else to go from here.

Yes I tell my students they should know what to expect from an online web project before they commit themselves.
Yes Next: Online Projects — What You Should Know First
Much better — especially when used together on the same page; you give the reader two ways to get to the information.
Yes Online Projects — What You Should Know First
You do not have to be a computer programmer in order to create a good, useful web page.  But you need to account for the needs of strangers who might follow a search engine to your pages, which means writing in a slightly different way.
The above link is annotated. The short description (“blurb“) provides a sample of what you can expect on that page. Obviously you can’t annotate every single link — just the ones you think are most important.

7) Use Consistent, Persistent Navigation Bars

Navigation works best when it is consistent.

  • Keep the “home” link in the same place on each page.
  • Keep the menu items in the same place.

When following the above guidelines, avoid creating pages that link to themselves.

No

Home Page

Home | Current | About Us | Archive

A visitor who is already on the home page, but who sees a link that says “Home,” will be needlessly confused. 

It’s a simple matter to remove the self-referencing link, but doing so introduces a new problem: inconsistent
navigation.

No

Home Page

Current | About Us | Archive

No

About Us

Home | Current | Archive

No

Current Page

Home | About Us | Archive

Since the self-referencing link will be in different places on different pages within the site, the order of the items in the menu won’t always be the same.

8) Use Place-holder Text in Your Menus

Unpredictable, inconsistent navigation is worse than useless — it makes the user even more confused. If the table above represents three pages on the same website, clicking the second item on the menu bar will usually take you to the “About Us” page, but sometimes it won’t.

Fortunately, that problem is easily fixed — the solution is to use place-holding text to preserve the overall structure of the navigation bar.

Home Page

[ Home | About | Contact | Archive ]

Contact Page

[ Home | About | Contact | Archive ]

You might use color or some other design scheme to make the connection between the link and the page title even more direct.

Home Page

MySite Home [ About | Contact | Archive ]

The above revision uses bold text to identify “MyPage Home” as more important, and groups the three following links together with square brackets. It also uses color to highlight the current link.

9) Use Multiple Navigation Bars to Organize Large Sites

After you’ve created more than about 8 pages, you should think about moving to a multi-level navigation system.

MySite Home [ About | Contact | Archive ] 

Archives

Available Archives: [ Articles | Reviews | Downloads | Events ]

In the above example, a main menu at the very top of the page includes permanent links to all the major sections that make up the website. 

Beneath the page title, a local menu shows additional choices. In this case, after the user clicks the “Archive” link, a new page with a submenu is displayed, showing further choices in the “Archive” category.

10) Breadcrumb Trails: Flexible, Hierarchical Navigation

A breadcrumb trail is a special kind of navigation bar, featuring a hierarchical
row of links (like the ones at the top of this page), each of which represents a “node” (a point at which the reader makes a decision).  As the user moves deeper into the site, the breadcrumb trail shows the closest direct path back to the home page.  As the user clicks through the site, each time moving to a site with narrower categories, the navigation bar changes, adding a new link marking the most recent node.

Here is what the breadcrumb trail might look like on a food web site:

Food Home Page > Desserts > Ice Cream > Vanilla 

Vanilla: Deserves More Respect

We drown it in chocolate sauce… we make it play second banana in a classic split. Trustworthy, dependable vanilla deserves more respect.

 

A glance at the breadcrumb trail identifies how the “Vanilla” page fits into the organizational structure of the website. A user who wants a different flavor of ice cream would click the “Ice Cream” link, which would then display a list of all the other flavors.

Food Home Page > Desserts > Ice Cream 

Ice Cream

What flavor would you like? You can hardly go wrong.

  • Chocolate: Decadent and Rich
  • Coffee: Your Kids Will Leave It All For You
  • Strawberry: It’s Fruit… So It’s Healthy, Right?
  • Vanilla: Deserves More Respect

 

Using a breadcrumb trail prevents you from cluttering up every page on your site with links to every other page — huge navigation bars can become overwhelming if they offer more than about 8 or 10 choices, and readers quickly learn to ignore everything that is not content.

If you only have a few pages on your site, this kind of structure probably seems like it’s more trouble than it’s worth.  But if you plan to expand the site organically (that is, adding new articles wherever the need arises), this kind of navigational structure saves you from having to re-edit the navigation
bars on unrelated pages, every time you add a new page.

For instance, if you already have 10 ice cream flavors, and you want to add “Mint Chocolate Chip,” a breadcrumb navigation scheme means you only have to add that link in one place — the alphabetical list of options on the “Ice Cream” page. You wouldn’t have to change any of the other pages on the site. (You might, however, add secondary navigation that permits people to progress alphabetically through the whole list, but in that case you would only have to change links on the pages immediately before and immediately after the new one.)



Loading Facebook Comments ...

2 thoughts on “Navigation in Hypertext: 10 Writing Tips for Web Authors

  1. Pingback: Day of Dennis Jerz » Using Apple’s Screenflow to Critique an Advising Intranet

  2. Pingback: Writing Index — Jerz's Literacy Weblog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>