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.

About Jim Kalbach

Head of Customer Experience at MURAL


  1. Matt Theuma


    Interesting article, I agree with your conclusion that the liquid information navigation won’t be replacing normal navigation anytime soon. It works better as a supplement and a way of keeping people on your site/page while providing additional or external information.

    By the way, it looks like Read Write Web are using Apture:


  2. Hi James, that’s us on ReadWriteWeb. We (at Apture) are all about removing the distinction between where hyperlinks are, and where they need to be. It’s the future of the web we aspire to and dream about. Great post!

  3. Dennis

    how do you get back and keep your orientation within a given system? I can see how following an immediate urge is easier and quicker and in context – but I might click click click to explore and then find out I’m in the wrong place – without context. I had the same disorientating feeling about the original concept of hyperlinks. would be cool if you could somehow “park” the related links – or even build a temporary nav from the things you are interested in as you read – see something you want to follow later, but first continue where I am, but mark things I’d like to click on (temporary nav) – or maybe even have a sort of crumb trail build up as part of your history of shooting off into different directions.

    • James Kalbach

      Yes, you certainly do lose context and have a more difficult time with orientation with liquid navigation. That’s why I don’t think it will ever completely replace “normal” navigation. However, one could get back and forth with the browser history function. So liquid navigation may have to work even closer with the browser in the future.

      Thanks for the comment.

  4. Jonathan

    Please don’t use the words “new paradigm” – it’s the kiss of death for any idea :-)

    I’ve got no particular problem with the concept of this (similar in part to Aza Raskin’s Ubiquity, only for mouse cursor lovers), but to call it “navigation” seems rather unnecessary. Doesn’t navigation, by definition, need to have some signifier for “you are here”? What’s this “liquid” stuff got to do with that? Thinking about it in this way really doesn’t help to understand it.

    As far as I can tell, it is basically hypertext on steroids. Certainly useful for some things, but not navigation (or for that matter, linear concentration on the content, for which it seems positively poisonous).

    • James Kalbach

      Hi Jonathan,

      Thanks for your thoughts.

      By no means is location (i.e., “you are here”) a prerequisite for us to talk about something as navigation. If fact, I’d argue that would be far too limiting.

      Here’s my definition, for instance, from Designing Web Navigation:

      1. The theory and practice of how people move from page to page on the web
      2. The process of goal-directed seeking and locating hyperlinked information; browsing the web
      3. All of the links, labels, and other elements that provide access to pages and help people orient themselves while interacting with a given web site.

      Navigation not confined to a row of tabs on a website. It’s the whole system of being able to move around a site and its content, as well as between sites.

      Sorry you don’t like the “liquid” metaphor. I’m quite fond of it, as are others I’ve spoken with. As I mention in my post, the name comes from researchers at University College of London. What it implies is that, instead of a designer deciding what’s navigation and then signalling that to users somehow, every bit of text is a potential hyperlink. The navigation experience in relationship to the content is more fluid, like liquids.

  5. Pingback: Обзор свежих материалов, август 2010 « Юрий Ветров. Проектирование интерфейсов и управление проектами

  6. Pingback: Обзор свежих материалов, август 2010 « UI Warehouse

  7. Pingback: Эти пользовательские интерфейсы / Обзор свежих материалов, август 2010

  8. Pingback: Обзор свежих материалов, август 2010 « UIFlow

  9. Pingback: My Interview on IATV Radio « Experiencing Information

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: