home> articles > Nav Bar Guidelines
Nav Bar Guidelines part 1 of 3 Navigation Design SeriesBy Todd Follansbee April, 2009 First published in Web Marketing Today the largest, oldest internet marketing newsletter on the web - and still free.
Abstract great user experience starts with good navigation and good navigation starts with the Nav Bar. These four guidelines define the behaviors and characteristics necessary for a good nav bar. Few sites will meet these guidelines and they are not easy to comply with, sorry. Do your best with your current site and insure compliance on your next major redesign.
Also consider reading the rest of the series.
|
|||||||||||||||
The nav bar or navigation bar plays an essential role in creating good first impressions and setting site expectations. New visitors will scan your nav bar when they first arrive on your site home page.
When nav bar labels are confusing or important visual cues are missing, visitors are less likely to engage. Confusion produces exits. Our user testing shows that ignoring nav bar guidelines costs sales and customers. You cannot create a good user experience without a good nav bar.
When you commit to a great nav bar, you will gain an immediate advantage over your competitors, since most of them are likely to have sites which fail to measure up to basic usability standards in many areas.
Immediate Fixes vs. Redesign Fixes
Where do we start? Most nav bars typically violate one or more basic usability guidelines. You can implement some changes immediately. Unfortunately, however, it's easier to build a really good nav bar on a new site, than to repair a poor one on an existing site.
When you are considering a major redesign, it'll be time to assemble all usability guidelines (including these) before starting the project. Just as you wouldn't fail to implement current safety codes before building a house, it's no different with a website.
Nav Bar Guidelines
Here are the basic characteristics of a good primary nav bar. It must:
• Use recognizable link labels that set a clear and accurate expectation for the page content.
• Be in a consistent location on every page.
• Provide visual cues that tell you what page you are on, where your cursor is, and what pages you have visited.
• Avoid self-referential links that only refresh the page you are on.
On existing sites the first two guidelines can be easily implemented, so address them first. Guidelines 3 and 4 will require some tedious, page-by-page revisions for an existing site. In a new site design, compliance shouldn't add time to the project. Let's review each guideline above in more detail.
1. Use recognizable link labels that set a clear and accurate expectation for the page content
Examples of simple, recognizable labels which set clear expectations include:
About Us, Contact Us, Home, Products, Services, FAQs, Testimonials
Here's an example of simple, clear nav bar labels:
You need simple, clear, unambiguous terms in your primary nav bar. The nav bar labels above quickly tell the visitor that site content will be easy to explore.
Alt tags and sub menus may provide further details, but it is risky to count on hidden elements such as these. Graphical nav bar elements need alt tags for visually challenged viewers. Alt tags should include the nav bar link label, but it is best to expand on the content with a few additional key words.
Nav Bar link labels such as Great Stuff, Point, XYZ Fittings, Advertising, Free, and Joe's Picks , raise more questions than they answer. When we ask users to describe what these pages are likely to contain, we hear a wide variety of responses. Also avoid "cute" labels such as Mystery Deals or Special Bonus, designed to "intrigue" people to click. They seem only to annoy people in our user tests. They may click, but do so begrudgingly and may then feel less motivated to buy.
2. Be in a consistent location on every page
Guideline 2 is simple. The nav bar should be in the same place on every page and should always include a link to the home page. Most but not all sites meet this guideline.
The most common example of missing or incomplete nav bars is in shopping cart sequences or links out to sites which provide some special functionality.
Shopping Cart Navigation
Shopping cart pages often try to eliminate any possible distractions by excluding primary nav bars. While this may result in higher conversions, it may also limit the chance to add additional products to the cart.
We prefer access to consistent navigation throughout the entire site . Shopping online isn't like being in a grocery store checkout line where suddenly remembering a needed item will hold up everyone while you dash to the dairy section.
Good navigation throughout the cart process makes it easy to add products and ensure that you are ordering the right items. It also allows people to answer other last minute questions before check out such as: "How secure is this cart process?"
Do not assume that what works for a well established and highly trusted brand like Amazon will also work for you. Keeping the nav bar in a consistent location and clearly visible will reduce anxiety and confusion and make the site more flexible in meeting the visitor's needs.
Exceptions
If you offer a web service that engages users for extended periods of time on a single page (such as webinars or online courseware), it's okay to hide the nav bar and header with a "show/hide" option to deliver a full screen experience.
3. Provide visual cues that tell you what page you are on, where your cursor is and what pages you have visited
Guideline 3 is important, but more difficult to add to an existing site. In the example below, the nav bar gives clear visual cues to show you which page you are on, where your mouse is currently pointing and which pages you have visited earlier.
In our example, the visitor is currently on the Overview page within in the Services Section. With this clear cue, the page needs no bread crumbs (page name hyperlinks below the nav bar, which show your page position in the navigation hierarchy). You will never feel lost with good visual cues.
Cursor Movement Reveals Clues
In our nav bar example, if you were to move the cursor over the Testimonials tab, it would assume a "you are here" cue, such as a different color. Also the Testimonials submenu will soon display, replacing the Services submenu for as long as your cursor remains on the Testimonials tab. As soon as the cursor leaves the Testimonials tab, the Services submenu reappears since it was only hidden momentarily by the cursor movement to the Testimonials tab. The Services tab remains highlighted while in this section , until you click on another tab.
Visited Link Clues
The example nav bar shows a visual cue that tells you that you have already visited the Contact Us page -- the text color changes from blue to purple. Typically, visited links will display in a slightly different color to differentiate them from the unvisited page links.
It is common for visitors to make several site visits over some period of time before making a purchase. When you show visited links in a different color, returning visitors feel "welcomed back" and know where they've already been on the site. Visited link cues ensure that they can easily find their way back to relevant information.
Clarity and Readability
Ensure that the text is clear and readable. Dark text on light background is more readable than light on dark. Link "hot spots" must be large enough to easily keep the cursor over links. It is annoying when the submenu links disappear when the cursor strays the slightest bit so be sure to test the worst case scenario -- a laptop without a mouse.
4. Avoid active links that only refresh the page you are on
The fourth guideline is harder to implement. The links for the page you are currently on should be inactive and provide a cue that they are inactive. This helps indicate which page the visitor is currently on. For example, any home page links should be inactive when the visitor is already on the home page.
When we first adopted this guideline years ago, we did so because pages loaded slowly and it was especially annoying to click on a self-refreshing link only to wait 10 seconds just to redisplay the page. Self-referential links still waste time. But self-referential links also confuse your traffic analytics by increasing page view counts and distorting page duration times. Self-referential links are time consuming to correct on an existing site, so you may you choose to live with them for now. But ensure that any new design complies with this guideline.
Nav Bar Graphical Look and Feel
As long as your nav bar meets the four guidelines above, you know it will be usable. Feel free to experiment with creative graphic effects, but always test with representative users.
A user experience consultant is responsible for insuring a good user experience. Graphic designers, however, need the flexibility to insure compliance with branding elements and corporate style guides when building the look and feel of a nav bar.
Horizontal or Vertical Nav Bars
Our personal preference is to locate primary nav bars at the top of the page when possible, but we are more concerned about how it works and what it says than where it is.
The choice of vertical or horizontal sub menus is driven by the number of second-level choices. With up to six second-level choices, you can choose either vertical or horizontal submenu's. More than six second level choices, employ a vertical submenu. We don't recommend mixing vertical and horizontal submenu's. from the same primary nav bar -- for aesthetic reasons and to avoid any kind of inconsistency that might confuse users.
Horizontal submenu's. are good because they don't hide site content and provide the visual cues to which page your visitor is currently on, as well as making other links at the same level readily available.
Vertical Submenu Behaviors
Left or right side primary nav bars (we prefer left) work best with vertical submenu's. which can expand or contract as you hover over the primary nav bar link .
Bread crumbs are an acceptable visual cue for complex sites, since vertical submenu's. must disappear after making a selection. We'll discuss bread crumb guidelines in a later article.
How to Test Your Nav Bar
You should always user-test your new nav bar design . Test early before extensive coding is completed, so you can make changes if necessary.
To conduct a the most simple user test of your nav bar, have your new visitor examine your home page for ten seconds. Then read him each term in the primary nav bar, asking him to describe what he would expect to find on each second-level or sectional page.
• Is he clear on what each term means?
• Are his expectations for page content on target?
• Can he suggest better terms?
Next, bring him back to the home page and give him the task of finding a specific product or service. Ask him to share his thoughts and reactions out loud. Carefully watch his behavior for signs of frustration and confusion, such as back button clicks, resorting to "search," or going to the site map to find something.
During the test, don't offer any verbal prompts to help him complete the task. Afterwards analyze his behavior. Can he find what he needs? Is it the fault of the nav bar, your information architecture, or something else?
Testing just five users will show you the current effectiveness of your nav bar. Consider testing seniors or teens, if they are part of your market, as well. For more basic testing instructions, read my article, "Usability Testing on a Zero Budget."
Begin now to plan nav bar improvements. Improving the user experience by building a good nav bar won't earn rave reviews from your visitors -- or your CEO. In fact, most won't even notice it. You will, however, see a change in your the bottom line. Ensure that new visitors become repeat customers by providing a great user experience -- beginning at the nav bar.
End.
Reprints Policy - This article is free for reprint as long as you provide a link to this site and acknowledge ownership. For more information or special permission, please email me. - Thanks, Todd
To watch a short video of a usability test please visit the download page.