Skip to content

Liquid View Modes

Last updated on February 23, 2019

The Liquid View is being designed to provide tailored views for a student performing a Literature Review, not a general graph of nodes and connections.


The specific scenario illustrated below is of the user coming across a person’s name, in this case ‘Wendy Hall’ and would like to get some perspective on how this person fits within the knowledge flow of the field. How this view can be accessed is either directly through the Liquid View or through their word processor as a Spark Point, a point where something sparks the user’s curiosity.


Funnel Mode


Document Citation View

One of the base views is the Funnel Mode where a selected node is in focus in the centre of the screen, with what it relates to in columns to the left and right. This particular view shows:

  • The selected author, ‘Wendy Hall’,  is in larger font, bold, the middle, in a column listing all authors cited in the users database (possible to toggle on/off)
  • Documents ‘Wendy Hall’ has cited on the left
  • Documents which cites ‘Wendy Halls’ are on the right

At the bottom, on the toolbar the user can see that this is a Document Citation View. In this scenario the user clicks on this and options appear, including to choose the Author Citation View, as shown next.



Author Citation View

In this Author Citation View the document columns are replaced by lists of names of authors which the middle highlighted author has cited on the left and is cited by, on the right.

Whether the central column will show only one name or all the names in the document, as illustrated here, is yet to be determined.

In this walkthrough the user will now click on the toolbar at the bottom and return to Document Citation View:

Additions to this view could be to either fade out to move to the left the authors Wendy Hall has cited which are less used by others and therefore could be less or more important. This is the kind of visual interrogations which will be worthwhile to investigate, to see which will be useful and which just clutter.



The user can click on any document name in either column to expand it to see it’s metadata, including authors, date and concepts (or even the abstract possibly). Click (or double click, to be determined) on any of the metadata and it become the central focus. For example, if the user clicks on the name of an author name in the left column then that author becomes the focus in the middle column (not illustrated).

Here is an indication of an expanded view where the user can click on any of the metadata to put it into the centre of the screen:


Graph Mode

Graphs can easily become overly complex and unmanageable so the core effort is to provide effective interactive means for the user to increase and decrease what they see.


The user can choose to switch away from the Funnel Mode of people and book citations, to a more general graph mode. Here both people and documents can appear but the mode is optimised to have concepts front and centre.

In this scenario the concept of ‘Hypertext’ is in focus and category boxes lead out like dendrites (towards) and axons (away) from it.

In this example it is quite bare, with only three categories being shown and only one other node (‘Ted Nelson’). The rationale for the design is that the categories are in essence the names of the links so that is why they are surrounded by the same width line as the lines, to indicate that they can be interacted with to show more.

( The idea of Category is in this case interchangeable with Link Type and adds the function of being possible to break and expand, instead of a traditional line with a label which either points to a node or to nothing if the node is not visible )

In the illustration below, the user has clicked on ‘Hypertext’ and it expands to show:

  • Option on top to ‘Hide’ this node
  • Option at the bottom to ‘Show All Connections’ which would take all the connections listed under ‘Hypertext’; History of, Pioneers, Inspired, Hypermedia and Technologies and put them into the world, leaving behind an visual shadow to indicate their origin (a concept inspired by Chris Gutteridge’s Webleau/Liquid Space).

The user can also drag any of the nested Categories onto the workspace individually.


The Visual Implementation

The use of category boxes are designed to be a mechanism to easily constrain and expand the size of the visual map. Instead of simply having a label on a line, the boxes are the same dimensions of the line and therefore more clearly visually communicate that they contain more information.

This is not the final visual style or ‘finish’ though I will aim to keep it simple. I played around a bit with the superficial and visually inspirational aspect of possible Liquid Views, as mocked up on YouTube:



This is not a passive or read only mode, the user can drag a node onto another node or category to establish a new relationship which gets written into the WordPress post where the node is stored.

  • If the user drags a node onto another node the system will make the connecting line flash to indicate it must go via a Category (current or new)
  • If the user drags a node onto a Category a flashing line appears on the other side of the Category to indicate that the user must drag it onto a node

There are further notes on the Interactions.


Published inDynamic ViewLiquid | ViewPhD

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.