A Guide to Website Design Patterns

A good navigation system is a MUST for any website, especially a genealogy website.
The larger your site, the better the navigation should be. Six Revisions, a blog
for web developers and web designers had a very insightful post by Cameron Chapman
titled Guide to Website Navigation Design Patterns. The article covers covers popular site
navigation design patterns. For each of the navigation design patterns, he discusses
what they are, the characteristics of each, when to use each one and the drawbacks
of each one.

Top Horizontal Bar Navigation

The top horizontal bar navigation is one of the two most popular kinds of site
navigation menu used. It is most often used as the primary navigation for a site
and is most commonly located either directly above or directly below the masthead
or banner of the site. The top navigation bar is sometimes paired with a drop-down
menu which reveals a second-level child navigation menu when an item is hovered

Example of Top Bar Navigation.

When to Use Top Horizontal Bar Navigation

Top horizontal bar navigation is good for sites that only need to display a limited
number of items in the main navigation. It is the only option for single column
layouts. If the top horizontal bar navigation is combined with drop-down sub-navigation,
the the navigation bar can accommodate more links as in the site shown above.

Drawbacks of Top Horizontal Bar Navigation

The biggest drawback to top horizontal navigation is that it limits the number
of links you can include without resorting to sub-navigation. For a small site,
this will probably not cause a problem.

Vertical Bar or Sidebar Navigation

Vertical bar or sidebar navigation is when the navigation items are arranged
in a single column, one on top of another. It’s often found on the top-left column,
preceding the main content area. According to a usability study on navigation patterns
for those who read left-to-right, vertical navigation bars on the left side perform
better than vertical navigation bars located on the right side. Vertical navigation
is one of the most versatile patterns as it is able to accommodate a long list of
links. Vertical bar or sidebar navigation can be integrated into almost any kind
of multi-column layout used

Example of Vertical or Sidebar Navigation.

When to Use Vertical Bar or Sidebar Navigation

Vertical navigation is suitable for almost any kind of site, but works well for
sites that have more than a handful of main navigation links.

Drawbacks of Vertical Bar or Sidebar Navigation

Vertical menus can sometimes be overwhelming to users when they are too lengthy.
If the menu gets to be too long, try and use fly-out sub-navigation menus. You might
also, consider dividing the links into intuitive categories to help users find links
of interest more quickly as was done in the site shown above.

Tabbed Navigation

According to Cameron, tabs have one distinct advantage over other types of navigation:
they have a positive psychological effect on visitors. Folks used to seeing tabbed
navigation in notebooks and binders and associate tabs with turning to a new section.
This makes tabbed navigation intuitive.

Example of Tabbed Navigation.

When to Use Tabs Navigation

Tabs are appropriate for almost any main navigation. Using them for main navigation
with a different style of sub-navigation for larger sites is a good option. Like
top navigation bars, tabbed navigation is limited in the number of links they can
display, especially when used horizontally.

Drawbacks of Tabbed Navigation

Tabbed navigation are more work to design than a simple top navigation bar as
they require more markup, image assets and CSS. It is also limited in the number
of links that can be displayed horizontally.

Breadcrumb Navigation

Breadcrumbs navigation gets its name from the Hansel and Gretel fairy tale. Hansel
and Gretel leave breadcrumbs along the way in their journey so they could find their
way back home. Breadcrumbs show you were you are on a website. They are NOT used
as primary site navigation but help support it.

Example of Breadcrumb Navigation.

When to Use Breadcrumb Navigation

Breadcrumbs are useful in sites with multiple levels of web page hierarchy.
They help orient visitors as to where they are relative to the entire site. If a
visitor wants to go back a level, they can just click on the appropriate
breadcrumb navigation item.

Drawbacks of Breadcrumb Navigation

Breadcrumbs don’t work well on sites with shallow navigation.

Tags Navigation

Tags are typically found on blogs and/or news sites. They are quite often
organized into a tag cloud, where the navigation items may be arranged
alphabetically. They also often use different-sized links to indicate how much
content is filed under a particular tag as seen in the example below.

Example of Fancy Tag Cloud.

When to Use Tags Navigation

Tagging content using your keywords is a good choice if you cover plenty of
topics. If you only have a few pages, then tagging content may not be needed.

Drawbacks of Tags Navigation

Tags are usually associated with blogs and news sites, so if your site is a
static website it might not be useful to you. Tags also require a certain amount
of work on the part of whomever is creating the contetn (YOU?), as each post
needs to be accurately tagged in order for the system to be effective.

Search Navigation

Site search has become a popular navigation method in recent years. It’s
well-suited to a site where there is lots of content. Search is useful if your
visitor knows exactly what they are looking for. Including a search option does
NOT mean you should ignore good information architecture. The two should
compliment each other.

The first two example sites shown, use both a site search as well as other
means of navigating the site.

When to Use Search Navigation

If your site has lots of pages and a huge amount of information, then a site
search feature would be important. Users are likely to get frustrated trying to
find their way around a large site with lots of navigation links and many levels
without being able to search for what they want. A site search would also be
important on an e-commerce site as well.

Drawbacks of Search Navigation

Not all search engines are created equal and may not return the desired
results. Search navigation, for a majority of the sites, should be a secondary
form of navigation.

Fly-Out Menu and Drop-Down Menu Navigation

Fly-out menus would normally be used with vertical or sidebar navigation
while drop-down menus would be used with top horizontal bar navigation. The
first example site shows a drop-down menu in use. Your site looks uncluttered
but allows your visitor easily go deeper.

When to Use Fly-Out Menu and Drop-Down Menu Navigation

If you have a large or complex menu but want a simple, uncluttered look,
dropdowns and fly-outs let your visitor decide what they might want to see and
when they want to see it.

Drawbacks of Fly-Out Menu and Drop-Down Menu Navigation

It’s important to make it obvious that there is a drop-down or fly-out menu
with sub-navigation items by using an arrow icon or some other means to indicate
such. If not, your visitor might miss there is more to your navigation system.

Footer Navigation

Footer navigation is pretty much used as secondary navigation, and may
contain links that don’t fit within the main navigation.

Example of Footer Navigation.

When to Use Footer Navigation

Many sites have some kind of footer navigation, even if it is just a
repetition of what might appear elsewhere.

Drawbacks of Footer Navigation

If your pages are long, no one is going to scroll to the bottom of the page
to get to your footer just to navigate your site. Footer navigations should NOT
be your sites primary means of navigation.

You can read the entire article by Cameron Chapman titled
Guide to Website Navigation Design Patterns
on the Six Revisions site. It
contains much more in the way of details and one other site navigation design.
Great article in my opinion.


  1. Thanks for sharing your brilliant ideas. I will be sharing your post to our new team of web designers.

Speak Your Mind