Dynamic context information

See also: Functional graphic design Dynamic context information "Unsafe" colour Compatible, accessible and comfortable

The line of links above each page's heading on this site shows the context of the current page in terms of the route taken. We refer to it as the context list. It is also called location and path breadcrumbs[1].

The context list normally shows the shortest route to the current page from the home page. The format implies the hierarchical site structure; the longer the context list, the deeper the current page is in the site.

The same page can appear in many places

Some pages in this site, such as individual case studies, are either level 4 or level 5 pages depending on how they're accessed:

1. Via 'All projects'
2. Via 'Search all projects by services provided'
3. Via a service page, such as 'Information design'

The right-hand navigation generally lists links to the section's level 3 (sub-section) pages.

Path taken from the home page to a level 4 page on a hierarchical site structure

When you're on a sub-section page, such as All projects within the 'Case studies' section, the side navigation indicates the current position by highlighting the current page. The text label is shown in dark bold against a lighter background using colours based on the current section.

These are the context lists for 'All projects', 'Information design' and 'Selected projects':

Home ~ Case studies ~ All projects

Home ~ Case studies ~ Search all projects by services provided ~ Selected projects

Home ~ Case studies ~ Information design

Each of these pages includes project summaries with links to full case studies. The issue is how the side navigation and context links should change according to the route taken to, in this example, a single case study.

Why "path breadcrumbs" are necessary here

Since the side navigation also conveys context, it should be consistent with the context list.

In theory, all of the case studies could have notionally belonged to 'All projects'. However, it was confusing to select a service link in the side navigation and for 'All projects' to be highlighted in the context list.

For this reason, path breadcrumbs are necessary if the context list is to convey the same context as the side navigation.

The rest of the page illustrates the three ways that a case study can be reached. For each, the context list and title text are shown.

Route 1

Path to a case study via the All projects page. The case study will be a level 4 page.

If you were to select the CRASH Web site case study from 'All projects', the context list would be as follows:

Home ~ Case studies ~ All projects ~ Web site, CRASH

The title for the page would be:

Web site, CRASH ~ Case study ~ Limitless Innovations

Route 2

Path to a case study via a Search all projects by services provided and list of Selected projects. The case study will be a level 5 page.

The service Information design is relevant to scenarios in our 'Services' section, including "Besides having a web site, what else can my company be doing online to meet our goals?". The page addressing this scenario includes a link to those projects where we provided the services relevant to the scenario.

When our example project is selected from this page of selected projects, the context list is:

Home ~ Case studies ~ Search all projects by services provided ~ Selected projects ~ Web site, CRASH

The title for the page would be:

Web site, CRASH ~ Case study ~ Limitless Innovations

Route 3

Path to a case study via the Information design service page. The case study will be a different level 4 page.

One of the services provided on this project was Information design. If we'd accessed the case study from this service page, the context list would be:

Home ~ Case studies ~ Information design ~ Web site, CRASH

The title for the page would be:

Web site, CRASH ~ Case study ~ Limitless Innovations

Dynamic titles

Page title is also generated dynamically on this site. It shows the context in the opposite order - the current page is shown first and the site name last - but we've limited the length of page titles to three elements.

For example, a page is at level 4 if it's three clicks away from the home page (the only level 1 page).

The context list style for a level 4 page is:

home page ~ section ~ sub-section ~ current page

So, the context list for this level 4 page is:

Home ~ About us ~ Site features ~ Dynamic context information

However, the page title for this page is:

Dynamic context information ~ Site features ~ Limitless Innovations

Title style

An example from Google: the page's title is used for the prominent first line link

We've not made the title the same as the context list because they don't have the same purpose. A context list helps understand the current page and provides extra navigation to pages higher up in the site structure.

The page title is used in a number of different ways:

• it titles the browser window
• it's how pages are named in your bookmark menu
• it's how search engines will display and link to pages

Because the page title is used in bookmarks and results lists, we believe that the most important information should appear first, especially since long titles are sometimes condensed or truncated by browsers.

References

1. Location, Path & Attribute Breadcrumbs by Keith Instone.   [return to text]
   http://keith.instone.org/breadcrumbs/