Webvanta Blog: Creating Effective Websites

How to Avoid the Top 10 Website Navigation Mistakes

How to Avoid the Top 10 Website Navigation Mistakes Image

Perhaps the most common place website designs go wrong is in their navigation. Often, some simple changes will dramatically increase the number of visitors who find what they’re looking for.

Here’s our list of the most common mistakes that we see in website navigation. Most of these are easily remedied once you recognize them.

1. Lack of persistent navigation

Every page of your site should have the same main navigation. If the main navigation changes as visitors move around the site, it is disorienting, and disoriented visitors are likely to simply leave.

When you need to present page-specific navigation, it should be additional to the main navigation, not replace it. A left or right sidebar is typically a good place for such ‘local nav’.

2. Too many choices

When you have a lot of content, and especially when you have a site that has evolved incrementally over time, it is easy to end up with lots of items in your main navigation. This makes it harder for visitors to find the most important information.

It’s essential to keep in mind the top goals you have for the site, as well as the ‘top tasks’ that visitors want to perform. Everything else takes away from those goals by creating clutter and perceived complexity.

We recommend keeping top-level navigation to not more than six items or, as an absolute maximum, eight items.

Drop-down menus are an easy way to expose additional choices. Some experts advise against them, but we often find them to be effective. A visitor can easy get a broader overview of the site by exploring the drop-down menus.

It is worth considering, however, eliminating drop-downs and using a landing page for each main menu item to perform the function of the drop-down. Even better, consider a ‘mega-dropdown’ that essentially presents a large panel of information just below the main navigation.

Note: you’ll find lots of outdated advice on the web, including warnings about drop-down menus being bad for SEO and accessibility. This is completely untrue if the menus are properly implemented with modern coding practices.

If you do use conventional drop-downs, we recommend limiting each drop-down to no more than six items.

3. Multiple primary navigation areas

Adding navigation elements along both sides of the page, or in additional rows above or below the main navigation, can be even worse than having too many items in the main nav.

Each of these techniques has its place, but they must be used with care and restraint. The more navigation links a page has, the more overwhelming it seems, and the less likely it is that visitors will figure out what to do.

Focus is critical. It must be absolutely clear from a glance where the main navigation is. Secondary navigation must be clearly secondary. Tertiary navigation is best avoided, and if needed, should be relatively inconspicuous.

There are a few places where additional navigation works well:

  • Local navigation links in a sidebar
  • Small utility links, like Login or Contact, placed above the main navigation
  • Footer links that are generally ‘below the fold’ when the rest of the navigation is in view

Another technique that can work well as secondary or tertiary navigation is a tabbed interface as part of the page body.

Just make sure that every link that is visible is truly needed, and that the main navigation is clearly dominant.

4. Interaction designs that are hard to use

There are two primary suspects here:

  1. Flyout menus that open to the right, either from a vertically oriented main nav or from a drop-down menu
  2. Horizontal drop-downs that disappear when you are not hovering over them

Both of these techniques share the same drawback: the user has to carefully move the cursor horizontally to the item of interest, and if they overshoot, the thing they’re trying to click disappears. Our recommendation is to avoid any sort of fly-outs.

Even vertical drop-downs can have this problem if they respond instantly. The best drop-downs should persist for a fraction of a second even if the cursor moves beyond the drop-down area.

5. Being different for the sake of being different

I was once talking with an ad agency that built a lot of restaurant websites. They bragged that they come up with a unique way to navigate each and every site. Some had rows of buttons down the middle of the page. Some had home pages that were pictures where you had to guess what to click on. One even had the main nav at the bottom of the page.

It’s great to be creative, but save it for places where it is helpful. Car designers don’t innovate about where to put the gas pedal and the brake pedal. Architects rarely change where doorknobs go—and when they do, the building occupants regret it.

Website navigation is a place to be conventional and give users what they expect. Use your creativity to make it good-looking, work well, and include the right items, but follow the patterns that everyone expects.

6. Too clever for your own good

Another variety of wasted (and detrimental) creativity is making up clever names for things where there is a conventional name that everyone understands.

Clever names might make some creative directors and copywriters happy, but they don’t do anything for your site’s visitors.

‘Give us a shout’ instead of contact. ‘Bag’ instead of shopping cart. ‘Check us out’ for portfolio.

Show off your cleverness in your body copy and images, but keep it out of your navigation.

7. Terminology that users don’t relate to

Another very common mistake is to use the organization’s ‘well known’ internal terminology for navigation links.

You may have company divisions called ‘Industry Services’ and ‘CMK Products’, but those terms might mean nothing to visitors to your site who are trying to figure out what you do.

Make sure that employees who are closest to your customers are part of the design process. They can help ensure that your navigation speaks to the way customers think about what you do, not about how your company is organized or how the product experts think.

8. Lack of context

When you’re designing the information architecture for your site, it’s easy to assume that visitors arrived at a particular page through the path that you had in mind, and that they know where they are in the site’s hierarchy.

Often, however, visitors arrive at a page deep in the middle of your site after following a link from a search-engine result or another site. They never saw your home page, and they have no idea how your site is organized. You can help them out in a variety of ways:

  • Include breadcrumb navigation that makes it easy to see where in the hierarchy a page sits, and provides links to easily move back up the hierarchy.
  • Make headlines more explicit than may seem necessary. Perhaps you have programs for the medical industry, the sports industry, and the exercise industry. Be sure use descriptive titles, such as ‘Medical Industry Programs’, rather than assuming that ‘Programs’ is all you need because the page sits in the hierarchy under ‘Medical Industry’. (This helsdfaps with SEO too.)
  • Include your tagline and other key messages about your company or organization in the header on every page, or in a site-wide sidebar.

9. Dead ends

Don’t allow users to go down any dead-end path:

  • Include the main nav on every single page, so it is always available.
  • If your site includes faceted searching or hierarchical browsing, disable links that would lead to no results. Don’t make users try one thing after another to find where the results are.
  • Don’t link images to a page that displays only the image, with no navigation. Use a lightbox instead to maintain context.
  • If some pages are under construction, don’t link to them; remove them from the navigation until they’re ready.

10. Links that depend on images or JavaScript

This is less of an issue for normal users, but it is critical for handicapped users with assistive browsing devices, as well as for search engines.

Use appropriate HTML elements—typically unordered lists—for all navigation, with HTML text that provides meaningful navigation labels. Then use CSS to make those lists look however you want.

Take a fresh look at your site

With these 10 common navigation mistakes in mind, look at your site with fresh eyes. You’ll probably find a number of weaknesses that are easily rectified.

Feedback from visitors new to your site is also invaluable. Consider putting together some simple user testing, asking people who have never seen your site to accomplish a particular task without any explicit guidance. Services such as UserTesting.com make this easy and inexpensive.

For Further Reading

We recently presented a webinar in which we reviewed 10 sites and pointed out easy opportunities to improve them. Many of the failings were navigation-related. Watch the recorded webinar on easy website improvements.

The Nielsen/Norman group recently published an excellent article that gives navigation problem-and-solution examples from major websites. Well worth reading: Four Dangerous Navigation Approaches that Can Increase Cognitive Strain.

Gerry McGovern’s New Thinking blog is full of insights about creating customer-centric web content. On the Web, habits are expensive to change, for example, explores in more detail why you should follow established patterns.

One methodology for deciding what’s most important is to perform a ‘top tasks’ analysis. Jeff Sauro’s How To Conduct A Top Task Analysis will get you started.

Add Your Comments

(not published)

Reader Comments

1 comments

GREAT THANKS

I am a beginner blogger and I have been struggling with how to make my blog better in terms of navigation and terminology. So you can imagine how helpful this article has been. N yeah I found plenty weaknesses in my blog's navigation and terminology, which of course I have rectified. I am super super grateful for this. Keep posting stuff like this, you definitely help souls like me do well online. Cheers!