Web Mender >> Resources for Barbershop Webmasters >> Navigation
Previous: Readability | Next: Testing and Validation

Easy Navigation

Resources for Barbershop Webmasters

Splitting Things Up

Whether you're working on a site for a quartet or a chapter, you'll have a lot to say. Not everything belongs on the home page. Look for easy ways to divide the information into separate pages, and make it easy to get to them from the home page. Most web surfers have a particular goal in mind when they visit your site, and you should give them the tools to get where they're going as quickly as possible. Correspondingly, the first screen of your home page--the part above the "fold"--should contain obvious links to most of the information on your site.

Consistent Navigation: a sense of place

Nobody likes to feel lost. Use a consistent navigation scheme to help your readers get oriented.

Understandable Navigation

Most of the visitors to your web site won't already know your lingo. Use generic terms with specific names. A link to your bulletin should start with "Newsletter" or "Bulletin". If you publish your bulletin on your site, and the bulletin is called "Sing-o-Rama", the link should probably say "Bulletin: Sing-o-Rama" or "Sing-o-Rama (Chapter Bulletin)".

Many visitors will start by skimming the links, not by reading your text. Use specific action words for your link text. Consider:

Good:
Subscribe to our mailing list.
Subscribe to our mailing list.
Mediocre:
Do you want to be on our mailing list?
Bad:
Click here to join our mailing list.
To join our mailing list, click here.

Visible Navigation

I am not a fan of fly-out and pull-down menus for navigation. They leave more space on the screen for content, which is noble, but they require more interactions to use. If the links are presented simply, the user moves the mouse to the link and clicks. If the links are hidden in a pull-down menu, the user must move the mouse to the menu, click to reveal the menu, search for the appropriate link, move the mouse to it, and click. If the pull-down menu has more items than the browser is willing to display at one time, the user will also have to move the mouse to the scroll bar, click, read the new list, move the mouse to the item, and click. As you can see, the amount of work the user must do increases dramatically.

Fly-out menus have some of the same problems as pull-down menus, and they introduce new problems. There is very little standardization for how fly-out menus should behave, and they often slow users down rather than help them. I've even seen a site where the top-level menu is arranged vertically with flyout below each item. The result was fly-outs that obscured the other items in the top level menu!

Link Presentation

Much of the advice on readability still holds for navigation. The links should be presented in a readable color that contrasts in both luminance and chrominance with the background. Links should stand out visually from the surrounding text, usually by being a different color from the body text and by being underlined. I especially recommend the underlining so that the links will be evident even if the page is printed on a monochrome printer. When possible, use the standard link colors: blue for links that haven't been followed, purple for those that have been. Take advantage of what your users already know from other sites.

Graphical links suffer from all of the same problem as graphical text, but with an additional wrinkle. Web browsers change the color of text links to indicate pages which have already been visited. Users take advantage of this color change both to find and to avoid pages they've already seen, depending on their immediate goal. Although linked graphics can have a border that makes the color change, most designers disable this helpful feature for aesthetic reasons. Many sites with graphical navigation buttons use a distinct color for the current page, which is a slight improvement over no change at all.

Different Types of Links

Although links can point to several different types of Internet resources, the most common types these days are web pages and email addresses. Most links are assumed to point to a web page. Unless given specific evidence to the contrary, users will assume that a link points to another web page. A link to an email address triggers very different behavior, usually the launching of an email client with a blank, pre-addressed message. Links to email addresses should therefore be visually distinct from links to web pages. To my eye, the word "contact" or "email" in the link text is not enough clarification. Links to email addresses should have the address as the link text. An email address can have only one behavior, so the user will not be surprised when the email program obscures the web page. Another advantage: if the web page is printed, the email address will be visible for someone to retype.

Previous: Readability | Next: Testing and Validation