Ryan Cramer

March 1, 2009

CMS Navigation Design

The architecture of dynamic content

Design of the navigation system is one of the most important and challenging aspects to designing for CMS-output. Not only must the navigation system(s) make it easy for the user, it must accommodate and adapt to the growth of the site. If the site uses a hierarchal structure, then this navigation system must accommodate new levels of structure (subpages of subpages) beyond what may have existed at the time it was designed. As the architect, you are establishing the design systems by which your client may add new floors to the building.

When designing a CMS driven site, you should consider the following common roles of successful navigation systems.

Roles of successful navigation systems

  • Where am I?
  • Where can I go?
  • Where have I been?
  • What is at the same [sibling] level?
  • What is at the next [child/subpage] level?
  • What is at the previous [parent] level?
  • What is at the section [root parent] level?
  • What is related? (groups, categories, content links, additional pages)
  • What is new, featured or popular?

These roles are successfully met by a combination of the following types of navigation systems.

Types of Dynamic Navigation

Single level navigation

The simplest example of single-level navigation would be the top navigation bar on any given site. But it need not be top navigation, it can be any type of navigation that only represents a single level of hierarchy in a site.

Hierarchal navigation

Hierarchal navigation shows a starting level of navigation with one or more levels below it. In some cases, this type of navigation may be a collapsible tree. See the example below, which shows the hierarchal structure that manages the pages on this site.

Breadcrumb trail navigation

Breadcrumb trails show the levels above the one you are at now, usually providing a backtracking path that ends at the homepage or root parent.

Body copy navigation

Body copy navigation exists within the main content area of a site. It may appear in the context of other text, or it may appear as an independent list of pages. The publications in the screenshot below are examples of body copy navigation.

Rollover-reveal navigation

This type of navigation requires you to rollover some portion of it in order to show what the navigational options are. The screenshot below demonstrates the rollover-reveal navigation, where you have to roll over an item in the top navigation to reveal the navigational options below it.

Categorical navigation

Any type of navigation that associates the current page with topics or categories that can be clicked to for more pages in the same category.

Ranked navigation

Navigation to other pages in the site that are the most popular, highest rated, and so on. The tag cloud to the right is an example of ranked navigation.

Historical navigation

Navigation that provides a path of where you’ve been. Unlike a breadcrumb trail, this path may not necessarily relate to the structure of the site, but rather your path through it. Amazon’s “Recently Viewed Items” navigation is an example of this.

Numbered-page navigation

Navigation that provides links to additional pages of similar content in a linear fashion. The simplest example of this would be the numbered page links at the bottom of Google search results.

Feature/highlight navigation

Navigation that links you to featured or highlighted pages. Such pages might be featured because of their date (e.g. newest pages), or because they have been specifically targeted as a featured item. For example, the three news items below the photo in the interface below are examples of featured navigation, as is the featured publication in the lower left corner.

The above list contained just common examples that are known to work well because users are generally familiar with them. But this list should not be considered complete. New types of navigation are being envisioned and used every day.

Image-based navigation

Navigation that relies on text contained within images or Flash is best avoided, unless it is used at a level where it’s unlikely to change. It may be acceptable to use this type of navigation for the top-level navigation in a site that has no need for top-level growth. But don’t use this type of navigation elsewhere if possible. While some CMSs may be able to create navigation images on the fly, they are certainly a compromise. If you are a typography nut, then you may agree that type in a 72-dpi image without control over the details (like letter-by-letter kerning) can create more typographic problems than it solves. At smaller sizes, the rendering and anti-aliasing of default web fonts in a browser is often better than what can be achieved in Photoshop.

Horizontal vs. vertical navigation

For any given navigation block, you should consider whether the contents of that navigation will be editable and/or expandable. If the number of navigation items or text contained within them is likely to change, then horizontal navigation systems are best avoided. This is because most designs are built for vertical–not horizontal–growth. A navigation system that needs to expand horizontally is naturally limited for dynamic content.

Pitfalls of rollover-reveal navigation

On a CMS-powered site, most vertical navigation systems live within a fixed position / variable height (FV) block, or variable position / variable height (VV) block. They should not be defined to a fixed height space, and should be given room to grow as needed. In some cases, hierarchal navigation may be contained within an area that reveals itself upon rollover (like drop down navigation). While this type of navigation is useful for executing commands, it does little to show you where you are in that system without action on the users’ part. If using such a navigation system, it’s a good idea to recognize that limitation and combine it with something like a breadcrumb trail navigation.

Navigation scenarios

During the design process, it’s important that you cover every navigation scenario in your comps. Show not just how the navigation looks, but how it looks on rollover and how it looks when clicked. Demonstrate how the navigation shows what page you are on and how it differentiates page hierarchy (e.g. child vs. sibling pages). Demonstrate what happens when the text of a navigation item needs to wrap to a second or third line. Very often the designer does not consider these issues. The clients and/or developers are left to come up with their own inapt solutions as needs arise. It’s the designer’s responsibility to figure these things out ahead of time.

—Ryan Cramer

Continue to next part …