Visible Context

Problem

How do you help the reader know where they are in a Web site?

Context

A Web site with many cross-links.

Solution

Include a small "map" or navigation bar on each page that links to pages near the current page. This might include pages that lead to the current page, pages related to the current page, and pages that give more detail about topics on the current page. Clearly separate the VisibleContext from the actual content of the page.

Resultant Context

The VisibleContext gives a feeling of the overall structure of the site without detracting from the detailed information on each page.

If your site has a TreeStructure, the VisibleContext might include the path from the root to the current page and the siblings of the current page.

Known Uses

Many sites include navigation bars at the top and/or bottom of Web pages.

-- NatPryce

Another known use of this pattern is reflected in the way that NetObjectsFusion works. When you design a site in its site layout tool, and then choose "create toolbar" in any page it will create a toolbar that links to the parent and siblings of that page. Most pages built with this tool reflect this idiom (for instance, the Web page I built a while back at http://members.aol.com/thecallfan). -- KyleBrown

Bruce Tognazzini has published an article about designing VisibleContext at http://www.asktog.com/columns/014WebsiteNavBars.html and discusses the lack of navigation support in browsers and Web site development tools at http://www.asktog.com/columns/015WebDesignRant.html .

Adobe show how you can use color to make VisibleContext by ensuring a ConsistentLook between related pages and navigation icons. See http://www.adobe.com/studio/tipstechniques/wpdphse7/main.html

Do you think this wiki needs something like that? -- DaveHarris

...maybe as links to the, say, five pages the current page is most frequently accessed from? -- FalkBruegmann

VisibleContext is fine for tree-like sites. But on a web-like wiki the inline links (you could visualise them as a kind of TagCloud?) are the 'where', and (if thoughtfully edited) lead to reciprocally-linked related pages. Recently I've seen a spate of wikis set up like hierarchical websites, a sign of InformationArchitecture incomprehension that misses the wiki point and goes against WikiDesignPrinciples -- DaveEveritt

Many pages on Wiki include hand-written VisibleContext. E.g: Most of the JavaIdioms and ComponentDesignPatterns have links back to the appropriate pattern index. These pages have a WebsitePatterns button at the top.

Automatically generating VisibleContext for Wiki pages might result in a severe performance hit. -- NatPryce

JspWiki (another wiki in JSP) already have something like this and they call it Reference by, which provides all other pages that reference this page. Much more intutive way of doing this is using TheBrain applet, please look at http://www.thebrain.com. -- SeshKumar

But we have this if you click the title: BackLinks

I suspect generating useful VisibleContext for a wiki would be somewhere between "pretty tricky" and "hard". -- MatthewAstley

Yes. Just have a look at the VisualTour of each page. That should give you an idea.

See BreadCrumbs