Promise Media

Website Navigation Design Requires 3 Main Tactics

Stored in: Website Development and tagged: ,

Basic web designWebsite navigation design largely comes down to three tactics.

  1. Put the main navigation at the top of the page, on the left side or via a combination of both.
  2. Provide subcategories in the navigation on every page of the site or put them only within each specific section.
  3. Decide whether to use an expandable navigation with javascript or similar technique.

What looks like the best design may not provide the best functionality and user response. It may look good, but if a user doesn’t want to click on anything in a multi-tiered dropdown menu, there isn’t any justification for adding all of the needed code.

So any design should include the ability to track the clicks in analytic software to see the results. From those results, the people responsible for the site can make adjustments to the site navigation.

That often leads fierce debates. The person who created the design has a personal attachment to it. The person responsible for the site results will want to see better numbers. At the end of the day, the numbers need to win for the sake of the site’s future.

What Works and What Doesn’t

Side navigation was popular for many years and lost favor as navigation became more complex.

Our own experiments showed that clickthroughs on side navigation dropped off dramatically below the fold. Many people simply don’t scroll much. Items in the viewable area got most of the clicks, while the the lower ones received far fewer.

That being said, side navigation is making a comeback with some sites because it provides a dramatically different look than the overwhelming number of sites that use top navigation.

A strong vertical element on the left or right side of the page provides a spot for many sites to display advertising and secondary content. So think of side navigation as not so much a simple list but an alternative form of presentation.

The dominant design tactic today is a horizontal navigation bar at the top of the page. Putting it there has a downside as well because the width of the page limits the number of items that can go there.

Website navigation design then advanced with the addition of CSS and Javascript techniques providing a multi-tiered dropdown menu. What used to be a simple “News” link in the menu bar expanded into a list of Government, Crime, Education, etc.

More ambitious designers and publishers took it even further with second and third tiers in the dropdown menus.

But a page usability study shows that people who visit a site from search engines — they enter an inside page on the site via a keyword — rarely use top level navigation.

In addition, analytics software for multiple sites has shown that people even more rarely use the the dropdown menus. They want their content and want it quickly. They don’t want to click around to find it.

Which Tactic to Use

Top navigation makes sense for a site with a relatively small number of main sections. Emphasize short words in the anchor text to provide space for multiple items.

The easier questions to address are subcategories and expandable navigation.

Some sites put subcategories at the top as CSS or Javascript dropdowns that sometimes don’t work, add a hefty amount of code to each page and often get in the way of users when they accidentally mouse over the main link.

The simple approach always is worth trying.

The simple approach with navigation is to use a small number of main categories at the top of the page and hard code the subcategories only within each individual category page.

The subcategories will appear as a second menu bar that is immediately visible to the site user and immediately clickable.

This approach provides speed and ease of use for any visitor.

Website Navigation for SEO

The placement of navigation links and the anchor text used in those links does impact search engine optimization.

Prominence is an important concept in any SEO strategy, so it stands to reason that any prominent link on a site will carry more weight with search engines.

A prominent link attracts more clicks. More clicks will reveal user response to the page in terms of bounce rate and time on site.

If a page works for users, search engines will know it and rank at least that page higher as a result.

The limites space on the navigation bar doesn’t provide enough room for multi-word phrases that target important keywords. That work can be left to the landing page’s title, headlines, images and other SEO signals.

But the site developer can put links with keyword phrases in article bodies and elsewhere that do provide that linking signal.

Leave a Reply

© 2007-2017 Promise Media LLC • Contact