Blogging Roller

This is the second in my series of Web Integration Patterns. Check out the intro at this URL http://rollerweblogger.org/roller/entry/web_integration_patterns

Synopsis

Make separate web sites and applications appear to be one by using common user interface elements for navigation.

Motivations

• Provide easy navigation between integrated web sites & applications.
• Make separate web sites appear to be one and parts of the same overall user interface.

Related patterns

• Links

This pattern is an extension of the Links pattern. The idea is to use links combined with common user interface (UI) elements, as a way to provide navigation between integrated sites and to make the separate sites appear to be parts of a whole application. This pattern is usually implemented via a banner with links, a tabs or some other type of menu component.

To make this work, somebody has to create the common navigation, give it an attractive design, decide which web sites or applications are included in the navigation. Consequently, this pattern works well for a set of web sites owned by the same organization, or a suite of packaged web applications.

Pros and Cons

The advantages of Common Navigation are that it works, it does make separate web sites seem to be part of one integrated whole and it's relatively easy to implement. One disadvantage of this approach is that the Common Navigation elements can either conflict with, in a visual sense, or distract from the web sites themselves. But if you're selling a suite of web applications, you've got control of whole design and you can solve this problem.

Examples

Here are some examples of Common Navigation that I see almost everyday. The first is Google.

Common Navigation in Google web applications

Google Mail, Calendar and other Google apps all share a Common Navigation bar across the top of the page. Google decides which apps appear in the menu, and the tech blogs whine whenever an item is moved or removed from the line-up. This is a pretty shallow integration: just links to applications and no more.

Now, let's see a deeper example.

Common Navigation in IBM Lotus Connections

IBM Lotus Connections is a suite of social software applications including social networking, blogs, wiki, forums, file sharing and etc. As you can see below, Common Navigation is used to provide links, not just to applications, but into specific parts of applications. For example, the Latest Entries page in the Blogs app, and the Wikis that I own vs. Public Wikis.

Next, another suite example.

Common Navigation in IBM Rational Team Concert

IBM Rational's Jazz-based products use Common Navigation, but with a project-orientation, showing a user's project's within each application. You can see this below in Rational Team Concert. A development project spans different applications and may have requirements managed by one web application, defects tracked by another, test cases managed by a third and so on. Each user sees the right menu for their projects.

Next, an example that's not a suite of web applications.

Common Navigation in StumleUpon

Another example is StumbleUpon. When you use StumbleUpon, you see the banner at the top of every page. You press the Stumble! button and a you see a randomly selected web page from anywhere on the web, or from some specific category of web site, and you still see the StumbleUpon banner. The StumbleUpon banner makes the whole web seem like one big site, deigned for "stumbling" around and sharing the things you find with friends.

Wrapping up

I wasn't sure that Common Navigation really deserved its own pattern, as it's really just a simple and obvious application of the Links pattern, but I think this works. As always, feedback is welcome. What did I get wrong? What did I leave out?

Next up: Web Annotations.