WIP: Common Navigation

Dave Johnson — Sun, 27 Mar 2011 10:08:44 +0000

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.

Web Integration Patterns

Dave Johnson — Tue, 15 Mar 2011 09:30:40 +0000

In my previous post, I promised to write a blog series on Web Integration Patterns. This post explains the concept and a bit about how I plan to write about it.

What I’m calling Web Integration Patterns are techniques for integrating software systems, web applications and web sites using the common technologies of the web. These patterns build on HTTP, HTML, JavaScript and sometimes JSON, RDF and XML to provide ways to integrate software systems and include both programmatic approaches and user interface integrations.

Not the same as Enterprise Integration Patterns

These patterns are different from Enterprise Integration Patterns (from the book of the same title). Those enterprise patterns make the most sense inside an organization where shared-databases and specifically messaging middle-wares are part of the common infrastructure. Web Integration Patterns assume only the web as common infrastructure, or at least the best of them do, and that means they can work equally as well in a controlled enterprise Intranet as they do on the big wild Internet. They can work well for a suite of web applications or a family of loosely related web sites.

Four categories of patterns covered

I plan to write about a dozen blog entries each covering one pattern, and I’ll do at least one per week. I’ll start with the basic patterns then introduce more advanced patterns. I’ve organized the patterns into four groupings, listed below in the order that I will cover them:

(I'll add links in below as I publish each pattern)

Basic Patterns: fundamental patterns which are relatively easy to implement, and, mostly, possible on a website made up of static HTML pages.
- #1 Links: Use links as a way to integrate web sites & applications via navigation and relationships between resources.
- #2 Common Navigation: Make separate web sites and applications appear to be one by using common user interface elements for navigation.
- #3 Embedded Properties in HTML: Enable easier integration and better search across integrated web applications and sites by using standard mechanisms (e.g. Microformats, RDFa) to embed property values in HTML pages.
- #4 Resource Preview: Enhance links shown in HTML pages so that users can hover, mouse-over, or use some other gesture, to view a preview of the resource at the other end of the link.
- #5 Widgets and Gadgets: Allow other web sites and applications to integrate your site into their web pages by providing an embeddable user interface, commonly known as a Gadget or Widget
- #6 Feed-based Integration integrating web sites and applications by using standard feed formats, e.g. RSS and Atom, to convey timely information, updates, status messages, events and other information
Advanced Patterns: more advanced patterns, which may require some server-side logic and infrastructure beyond a plain old web server.
Authentication Patterns: these are advanced patterns that concern authentication and authorization of users and web sites, including Single Sign On, OpenID and more.
Social Patterns: patterns from the world of social networking, including things like OpenSocial, Facebook apps and ActivityStreams.

Perhaps using the word “patterns” is a bit pretentious. I’m no gang of four or even one, and I don’t plan to give these patterns the comprehensive treatment examples that you’d find in a patterns book. I won’t be providing source code examples either. Still, I think Web Integration Patterns is the right name and format, so I’m sticking with it.

The first pattern that I’ll cover is Links. More Later...