Liquid Information Navigation – A New Paradigm?

In Chapter 1 of Design Web Navigation, I consider the fundamental need for web navigation. I question:

People don’t particularly want to navigate and risk getting lost. They come to a site to get answers or accomplish a task. As such, web navigation can be considered a means to an end. But is it a necessary evil? If navigating isn’t fun, why impose a burden on people with something that could potentially confuse them?

One fairly obvious reason we need it: navigation provides access to information. (No duh, Kalbach). That’s stating the obvious, for sure, but it’s how you provide access that makes a difference. I then present different models for accessing content. In additional to traditional hierarchical style web navigation schemes, there’s also hypertext content linking, keyword searching, filtering, and something called “liquid information, ” the subject of this post.

He’s how I describe liquid information navigation:

“…there are no links. Instead, each and every word is interactive for all texts. There is no distinction between text and hypertext, or between content and navigation. All texts are links, and all links are texts. … From a single word on a given page any number of navigation actions as possible, leading to new content pages.”

I didn’t invent the term. It comes from the University College of London Interaction Centre (UCLIC), which hosts a research project that can make all online texts interactive—right down to the individual words. See the liquid information project and hyperwords. I describe their model as follows in my book:

Instead of hypertext, the researchers refer to this as “Hyperwords.” The basic idea is that when a word is clicked, a menu of options appears. You could then conduct a search, link to related documents, define the term, translate it, and so on. As they put it, the goal is to put an “end to the tyranny of links.” This would also mean an end to navigation design.

Hyperwords is a browser plugin that gives access to a range of options from any word on the web. The image below is the one I used in Designing Web Navigation (Figure 1).

Figure 1: Example of the Hyperwords menu (from Designing Web Navigation)

I presented this model without judgment in my book, more or less: it’s just another possibility for accessing content. At the time, I actually didn’t think much of Hyperwords. The need to install a plugin, for one, seemed like a barrier to adoption and use in general. It also seemed like there were almost too many options for any highlighted word. In the image above, each of the top-level options also has a range of sub-options, such as which search engine to search.

Recently, however, I’ve been seeing other examples of liquid information navigation on the open web. And they’ve taken a slightly different approach. Below is an example from Read Write Web. Here’s how it works:

Step 1: Select a word or phrase anywhere on the page. “SPARQLZ” is selected shown in the image below (Figure 2).

Figure 2: Steps 1 and 2 using liquid information navigation on RWW

Step 2: When you release the mouse, you get a search option, shown in Figure 2, just above the highlighted term.

Step 3: Click the “Search” option that appears, and wait until the results appear in a dialog, shown below (Figure 3).

Figure 3: Liquid information navigation search results on RWW

The first part of the results list in this dialog comes from the ReadWriteWeb website. Google results also presented after you scroll down a bit. There are also options for videos and images.

I couldn’t find any information about the technology used for the example of liquid information navigation on RWW, so I don’t know if it’s off-the-shelf or home-grown. (If you know, please comment on this post).

Zoomino is the technology used in my next example from the website All About Jazz.One major difference to the RWW example is that Zoomino also recognizes names in a text and presents them as links, inline in the text. Otherwise, the flow of interaction is similar:

Step 1: Select a word or phrase anywhere on the page. (This is not necessary to do for names already linked).

Step 2: When you release the mouse, you get the Zoomino icon right where your cursor is. (This icon doesn’t appear when interacting with a linked name). In the image below I’ve selected Dave Holland’s name in the page title, above the image of him. You can see the “Z” icon above where my mouse stopped.

Figure 4: Steps 1 and 2 on All About Jazz with Zoomino

Step 3: Rollover the icon OR directly roll over a linked name to get an information dialog

Figure 5: The contextual information dialog with Zoomino

It’s not as comprehensive as the RWW example or Hyperwords: with Zoomino, sometimes there isn’t any information for the terms you select. So, in that sense, it’s really not “liquid”–more like Jello, I’d said.

Here’s the marketing text from the Zoomino website describing their service.

Zoomino provides contextual applications that automatically integrate into a web content page. Zoomino enables web publishers and bloggers to effortlessly pair internal and external videos to content pages, add other contextual apps such as articles and keyword summaries, and increase revenues through monetization opportunities.

You’ll notice the advertisements integrated into the dialog in the above image. They seem to take up a heck of a lot of real estate for such a limited space. You could argue it’s more seductable moment for the ads, but I suspect they’ll suffer from banner blindness all the same.

The final example is ClearForest’s Gnosis browser plugin. See a full description on their website.  In the image below you can see the underlined terms in the text (Figure 6). These were automatically recognized by the system. Clicking on one yields a small dialog of options, similar to Hyperwords.

Figure 6: ClearForest’s Gnosis entity recognition plugin

Gnosis isn’t really liquid information navigation because only recognized named entities are clickable. Note that the type of entity recognized is also indicated. In Figure 6, the system knows that Swisspatat is an organization. Overall, however, the interaction and style of navigation is similar. So I’ll put it in the liquid information navigation model for now.

In total, we’re seeing some practical examples of liquid information navigation emerge on the web. There are still some improvements that need to happen with the interaction design. For one, it’s not obvious that the feature is even there. (How many of you who read RWW knew about and used the liquid navigation there?). Still, I suspect we’ll see more and more of this type of mechanism.

Will liquid information navigation ever completely replace normal navigation? Is this really a new paradigm for web navigation? No, I don’t think so. But it can supplement other navigation mechanisms and schemes to better support information seeking on websites. We’ll still need “normal” navigation, as well as search and filtering and other mechanisms. It’s not an either-or question at all: in striving to design web navigation that brings value to your customers and to your business, multiple approaches are needed.

By all means, consider adding liquid information navigation to your repertoire. Let me know if you do or if you know of other examples.