Navigation Options

"Navigation" refers to the way a user moves through your site. This design centralizes that information primarily in the left-hand column of the page. There are some options for how that space is used, as described below. Also, there are some layouts and circumstances under which the right-hand column would be appropriate for navigation. You should also consider whether you want to order links alphabetically or by importance (i.e. likeliness of being clicked).

Contact Us Box

Notice that for both of the navigation options described below that a "contact us" box is placed below the navigation in the left-hand column. This placement is being used throughout the site for consistency. The department can choose what information to put in that location, such as fax number, departmental email address, office location, office hours, etc. It's also an option to make the "contact us" title a clickable link that takes the user to a page with more contact information, possibly including directions and information about breaks, etc.

Grouping Links

Two features are available that help divide up the links in the left-hand column. They can be used with either universal or breadcrumb navigation.

First, it may be helpful to divide the navigation into separate boxes.

Also, within the navigation box items can be separated using a darker line (look on these pages for "undergraduate catalog" and "virtual bryn mawr"). This technique helps deliniate "related information" that's not necessarily part of the site in question.

The Breadcrumb Trail (on all home pages)

Left-hand navigation expands and contracts so that only the most relevant links are visible and a 'breadcrumb trail' is created to allow you to go back to where you were.

The home page of a site will have breadcrumbs that are determined based on how one would find the site from the home page (even though some people will come directly to the site), typically

Offices > "department name" or

Academics > "department name "

These names will be clickable and will help users of the site to make their way around quickly. For example, clicking on 'Offices' or 'Academics' will take you to a list of other departments that may be of interest. See Residential Life and click on the "Student Life" breadcrumb trail link for another example.

Using Breadcrumbs on a Departmental Site

The expanding and contracting breadcrumbs are very useful within sites that have a lot of navigation. If users are offered more than 7 or so links in one block research has found that they have a hard time finding what they are looking for. With that in mind, the breadcrumb allows the user to click on a link and quickly see another (more specific to that topic) set of clickable links.

To see an example of this visit http://www.brynmawr.edu/deans/ and click on "Academic Essentials " or "Non-Academic Support ". Then click on the breadcrumb link called "Undergraduate Dean's Office" to go back to the home page.

You'll notice in that example that the first two levels of the breadcrumbs go away and the "top" breadcrumb becomes the department name (in that example "Undergraduate Dean's Office"). The design firm determined that more than 3 levels of breadcrumbs is overwhelming and that once users click within a site they generally aren't looking to jump between departments (as they might be while on the home page).

Universal Navigation

Sites that have 7 or fewer links throughout all pages of the site are suited for "universal navigation", meaning that the same links are present on every page -- followed by your department's contact information. It will be similar to this example.

Navigation in the Right-hand Column

There are some cases in which you may not want to add another layer of breadcrumb navigation and yet will have some information that you want to make easily available and to highlight it as "navigation" rather than as "content". We have two example of sites that are using the right-hand column effectively for this purpose. The first uses page anchors and has a section called "On This Page". Another example links to related pages, as in this section called "Additional Resources". The main thing that we, and best practices, would advise against is putting core navigation between the pages in multiple places on the page.