Good Navigation Is Essential to Your Site’s Success: How to design a good Nav bar
In this article you will learn what makes a great primary nav bar. Our user testing shows that ignoring nav bar guidelines will cost you sales and customers. You cannot create a good user experience without a good nav bar.
The nav bar plays an essential role in creating good first impressions and setting site expectations. New visitors will scan the primary nav bar when they first arrive on your site home page. When nav bar link labels are confusing, or important visual cues are missing, visitors are less likely to engage. If visitors have only come for a quick comparative look, confusion equals exits.
Most nav bars typically violate one or more basic usability guidelines. It is easier to build a good nav bar on a new site then to repair a poor one on an existing site. If you are considering a major redesign, assemble all your usability guidelines including these before starting the project. You wouldn’t fail to understand safety codes before building a house; it’s no different with a web site.
Commit to a great nav bar UX and you will gain an immediate competitive advantage over the majority of sites which currently fail to achieve even basic usability (you must cite your exact sources whenever you quote numbers like this.)
Nav Bar Guidelines
Before deciding whether you should locate your primary nav bar on the top, left or right of your pages and how the nav bar submenus will work, first consider the basic characteristics of a good primary nav bar.
Guidelines – A good nav bars must:
- Use recognizable link labels which 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 active links which only refresh the page you are on.
On existing sites you are trying to improve it will be easiest to make changes to comply with the first two guidelines, so address them first. Guideline 3 and especially 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 which 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, and Testimonials. Our sample nav bar below immediately tells you a great many things about this site from only a 3 second glance. These nav bar labels successfully tell the visitor that the site content will be easy to explore. Alt tags and submenus may provide further details but it is risky to count on these hidden elements; you need simple, clear, unambiguous terms in your primary nav bar. Graphical nav bar links 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. This is not what a nav bar should do. Also avoid cute labels such, Mystery Deals or Special Bonus designed to “intrigue” people to click; they seem only to annoy the people in our user tests. People may click but they do so begrudgingly and may then feel less motivated to buy.
If finding information about the company behind a site is difficult, many won’t even bother to search through the products or services it offers. With a well designed nav bar, your visitors will be comfortable searching for a product of interest, reassured that they can easily go back and answer important questions before buying such as: “who are these guys?”
2. Be in a consistent location on every page
This 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 templates often try to eliminate any possible distractions by excluding primary nav bars. While there is some evidence that this may result in higher conversions, it also limits the chance to add additional products to the cart. We prefer access to consistent navigation throughout the entire site. It isn’t like being in the grocery store checkout line where suddenly remembering a needed item will hold everyone up while you dash to dairy. Good navigation throughout the cart process makes it easy to add products and ensure 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 a practice which works for a very well established and already highly trusted brand like Amazon will also work for you. Keeping the nav bar in a consistent location and clearly visible reduces anxiety and confusion and makes the site more flexible in meeting the visitor’s needs.
If you offer a web service which may engage users for extended periods of time on one page (webinars or online courseware comes to mind) it is permissible 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.
In the example below, the Nav Bar gives a clear visual cue to show you which page you are on, where your mouse is currently pointing and which pages you have visited earlier.
This visitor is now on the Overview page within in the Services Section. With this clear cue, the page needs no bread crumbs You will never feel lost with good visual cues.
In the above example, if you were to move the cursor over Testimonials, it should take on a “you are here cue” (which could be, for example, a different color or reverse video). Also the Testimonials submenu is will soon display, replacing the Services submenu for as long as your cursor remains on Testimonials. As soon as the cursor leaves the Testimonials tab, the Services submenu reappears since it was only hidden momentarily by the cursor movement to Testimonials. The Services tab remains highlighted while in this section, until you click on another tab.
This example displays visual cues to show that you have visited the Contact Us page (the text color changes from blue to purple). After leaving the Overview page that link will change to follow the same convention. Typically visited links will display in a slightly different color, to differentiate them from the unvisited page links. Note: some browsers allow visitors to set their own options for showing visited links in a settings form.
It is common for visitors to make several site visits and for some time period to pass before making a purchase. When you show visited links, 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.
4. Avoid active links which only refresh the page you are on.
The links for the page you are currently on should be inactive and provide a cue that they are inactive. This indicates which page you are 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 nowadays there is evidence that self-referential links also confuse your traffic analytics by increasing page view counts, distorting page duration times and more. Rather than struggle to adjust your analytics, the better choice is to comply with this guideline and avoid the problem. 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 Graphics – Look and Feel.
As long as your nav bar meets the four guidelines above, it will be usable. Feel free to experiment with creative graphic effects but always test with representative users.
A UX consultant is responsible for insuring a good user experience but graphic designers need the flexibility to insure compliance with branding elements and corporate style guides when building the look and feel of a nav bar. We do not want all nav bars to be identical.
Ensure that the text is clear and readable. Dark text on light background is more readable. 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.
What Kind of Nav Bar and Where?
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 submenus is driven by the number of second level choices. With less then approximately 6 second level choices, you can choose either vertical or horizontal submenus. More than 6 second level choices require a vertical submenu. We would not mix vertical and horizontal submenus from the same primary nav bar for aesthetic reasons and because any kind of inconsistency tends to confuse users.
If you choose to locate your primary nav bar at the top of the page, horizontal submenus are good because they don’t hide site content and can stay in place to provide the visual cues to which page you are currently on as well as make 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 submenus which can expand or contract as you hover over the primary nav bar link.
Bread crumbs are an acceptable visual cue for complex sites with vertical submenus which must disappear after selection from them. Bread crumb guidelines will be discussed in a later article on “navigation elements outside of the nav bar”; they do have a valuable role in certain circumstances.
How to Test Your Nav Bar.
Whatever choices are made, they should always be subject to user testing. Test early before extensive coding is done.
For a quick user test of your nav bar, sit a new visitor your home page for 10 seconds and then read them each term in the primary nav bar asking them to describe what they would expect to find on each second level page.
Are they clear on what each term means?
Are their expectations for page content on target?
Can they suggest better terms?
Next, bring the home page back up and give them the task of finding a specific product/service. Ask them to share their thoughts and reactions out loud while you carefully watch their behavior for signs of confusion including back button clicks, resorting to ‘search” or the site map, or frustration. At no time should you offer any verbal prompts to help them complete the task. Consider testing seniors or teens if they are part of your market as well. Can they find what they need? Is it the fault of the nav bar, your information architecture or something else? This is only the most basic of user tests but testing just 5 users will show you the effectiveness of your nav bar (and much more).
For more testing instructions, read Zero Budget User Testing.
Begin now to plan out your nav bar improvements but before making wholesale site changes, be sure to read the upcoming navigation articles on Information Architecture and Non Nav Bar Elements,. Improving the UX by building a good nav bar will not earn rave reviews from your visitors; in fact most won’t even notice it but you will see it in the bottom line. Ensure that your new visitors become repeat customers with a great UX starting at the nav bar.
This article was previously published on Web Marketing Today
Usability Expert
|
User Experience and Conversion Point ReviewThe goal of a User Experience and Conversion Point Review is to help you insure that your web site delivers an effective conversion path, provides a successful branding experience, and communicates the information in a way which serves you best to deliver leads or sales |