Quality website navigation is the skeletal structure of any website. In many ways, it's the most important part of a site's design. Generally, navigation consists of links that lead users to various website sections. Most commonly placed across the page header or along a side head, site navigation shows users how to use the site, what it does and where they can find what they're looking for.

Website navigation describes both the structure of a website and the act of navigating by the user. The cleaner and clearer the structure, the better the user's experience. Quality user experience, without confusion or frustration, keeps users on a website longer, which in turnhelps conversion rates and improves search engine optimization (SEO).

Navigation best practices

There have been many different ways to present the user with a website's navigation, though not all of them are optimal for user experience or SEO. What they all share in common is placement: As a rule, the site navigation (also known as the main navigation) appears on (nearly) every page of the site, unchanged and constant. It is both the anchor and the map for the user.

Text links

Use descriptive words or phrases in your website's main navigation. This has been the standard way to present site navigation since the first commercial Web browsers were released, and even with all the design tricks that have been invented since, it is still the best. Text is easy for Web designers to update, comprehensible to users and visible to search engines.

Many sites still use dropdown menus (users place their mouse over a menu item and another menu is exposed) in their main navigation, although the practice has tailed off in recent years as developers understand the relationship between internal linking and SEO.

Dropdown menus are invisible to search engines. Similar to the way a user reads, comprehends and follows a text link, search engines "crawl" a website. The more links that lead to and out of a given page, the more importance - and higher ranking - the engine gives that page. By using dropdown menus, all that potential SEO is lost.

Descriptive titles

Closely related to simple text navigation is giving those navigational links strong descriptive names. Strong names tell users exactly what they'll find when they click a link, set the tone of a website and produce good keyword associations for search engines.

For example, many websites have "About" or "What we do" pages. Those labels mean nothing to either the audience or a search engine. Instead, come up with a descriptive keyword for the navigational link. Instead of "About us," a clothing store might say: "Our fashion philosophy," or a gardening supply store might say: "Dig all the dirt on us."

Good structure

Keep the main navigation as simple as possible. The human mind is only capable of holding so many items at once. It's best to have only a few top-level menu items. The optimal number of main menu items is three to seven. Too many more and users' eyes will glaze over, and they'll find someplace else to shop.

Take a clothing store, for example. The cleanest main navigation would simply be "Men," "Women," and "Children." Each of these big categories will have their own sub-categories, branching out like a tree, but no matter how complicated the branching becomes, users will always have an easy way back to the main trunk.

There are SEO benefits to having fewer navigation items, as well. A page's rank depends on many factors, but two of the most important are the number of links to and from a page and the number of visits a page gets. The less scattered your navigation, the more hits your main category pages will receive, the better their search engine visibility.

Good structure begins early in the website's design stage, well before colors, fonts and layout are decided. Mapping out every possible page on a website and placing them in a logical order does more to help users navigate your site than anything else you can do.

Breadcrumbs

Letting a website's branches get too complicated is its own pitfall, however. Website navigation should be shallow, meaning that users don't have to make too many clicks in order to find what they want. Too many clicks can become frustrating and confusing.

Using navigational breadcrumbs is one way to keep users from getting lost. Breadcrumbs are automatically generated series of links, usually at the top of the page beneath the main navigation, which shows the users a list of the links that they took in order to get to the present page. The user can click on any of the breadcrumb links to return to a higher-level page.

Breadcrumbs serve several purposes. They:

  • Show the user that they're still in the correct section.
  • Give the user an easy way to get back to higher level categories if they wish to look at different items.
  • Create more links between pages for improved SEO.

Breadcrumbs are especially useful for ecommerce sites, which typically have a few clicks to get from general categories to product pages.

Sitemaps

Sitemaps aren't really for users anymore. It is a dedicated page that lists every page on a website, usually in hierarchical order. Most content management systems now have applications that automatically generate and update sitemap pages, and although most users will never see it, there is usually an unobtrusive link to it somewhere in a website's footer.

The reason that sites still have sitemaps has everything to do with SEO. Search engines actively look for sitemaps so they can more efficiently crawl the rest of the site. Any way to get the search engine's attention is good.

Website navigation can't be done haphazardly. It is how the public and search engines interact with your site. From clear, top-level navigation to ample linking between pages, users must be able to know where they are at all times. It takes a great deal of up front planning to do it right, and as your website grows, you need to revisit your navigation and site structure periodically to keep it from becoming a tangle. Users come and go pretty quickly on the Internet. Keeping things simple and clear will keep them on your site longer and boost your site's visibility in the future.


Bigcommerce is the leading ecommerce platform for growing and mid-market retailers.

Learn more:
1. Visit our commerce blog
2. See our best-in-class features
3. Request a demo


Try Bigcommerce free for 15 days and see what plan is right for you
Start free trial
High-volume or established business? Call for a demo. 1-866-581-4549

Start your free trialHigh-volume or established business? Call for a demo.1-866-581-4549