Skip to content

Category: Liquid | View

Liquid View Design – Hierarchy

I’m testing how to show the word processor hierarchy in the Liquid View and I think holding down spacebar should temporarily show this.

However, it looks messy if I show arrows:

And context is lost if I show Outline view:

Putting the hierarchy to the side was messy:

On top was even messier:

Even when blurring the background:

However, after testing in Keynote, simply going into Outline view seems to be the best option, since the user can instantly toggle back and forth, thus keeping context :-(

Leave a Comment

Hall’s ‘brining together’, Bush’s Needle & Object Oriented Programming

Wendy Hall told me last year that one thing she would consider useful would be to have a way to not have to write everything out, and instead, according to my vague memory; kind of bring things together. As I have been working on my 9 month this has struck me again and again in terms of what I have already written and in terms of what I cite/refer to. Doug Engelbart had an acute sense of ‘have I not written this before’ when trying to come up with yet another way to present his perspective. Organising a document is very much about avoiding repetitions, removing what is not of primary importance to a secondary position (or removing it altogether) and making clear what the relationships of the contents of the document is.

Vannevar Bush packed a huge amount of pound insights into his 45 paper, all of them centred around the issue of knowledge access. If we don’t deal with this within science and academia “truly significant attainments become lost in the mass of the inconsequential” he wrote , and added that “A record if it is to be useful to science, must be continuously extended, it must be stored, and above all it must be consulted” The means through which he proposed is to do this was to make a system which latched on to the brain’s real way of working, as opposed to ‘artificial’ indexing systems; through associations. “This is the essential feature of the memex. The process of tying two items together is the important thing.”

When you tie two things together you have knots, which what the origin of the word ‘node’ is, so he is talking about tying information into nodes explicitly and implicitly (by different associations) which is very much what the Liquid View project is about. He calls the process of tying items together making a ‘trail’, which can then be named and accessed later and joined into numerous trails. When we note that the earlier meaning of ‘trail’ is that of something  hanging down loosely and flowing behind ( (the meaning as ‘a path’ came later), then this weaves very well into the mental narrative of liquid weaving and unweaving of knowledge. I see this as being a provocation to build a system where the trails become documents and we get close to something Wendy Hall was thinking about.

Issues then become apparent, such as in my paradigm of working within a ‘Word Processor’ what can the nodes represent? Only internal headings or external documents and what about glossaries? These are then core design issues for Author and Liquid Views – how to provide a highly visual space where tying links together is flexible (can be done in many ways for many different results) and deep (connecting disparate nodes in a visually and interactively coherent manner).

Programmers make code-reuse a core aspect of their competencies, as discussed with Christopher Gutteridge, so why can other authors not also be provided with tools to reduce repetitions and make connections clearer? That’s a founding question of Liquid Author and Liquid Views.

Leave a Comment

Interactions In Liquid Views

Liquid view is designed to help an author think in order to produce a document, it is not a general purpose system for analysing information. In light that framing, it will be important to be very clear about the purpose of the system, as starts here. The purpose of the liquid view is to help the author better understand how the sections in their document, as indicated by headings, relate to each other and thus to organise the sections better and integrate information which appears to be missing.


It should be possible to interact with the liquid views in different ways for different reasons, depending on where the user is in the process:


Creation of Liquid View


The Liquid View should be embeddable in another .liquid (Author’s native document format) document and should also be createable from a user-specified subset of headings in a .liquid document.


Creating Nodes 


The user should be able to create a new node/heading by double clicking on the screen and start typing. By default any new heading is shown as being level 1. The user can then drag the heading onto any current heading and the new heading will then slot in user the current heading (same level or one level below, depending on how the user drops it, a gesture we will have to study)/


Type heading on screen. Defaults level one. Appears at end of WP. Floating in liquid. Changes heading if snapped to different level. How to order as level one? Move to head then maybe be away. Cmd f searches on it.


•  Choosing what Elements to show

•  Choosing How Many Levels Deep to Reveal Headings

•  Manual Layout in 2D and 3D

•  Criteria Layout

– Using ‘magnets’ to pull Elements in specific directions

– Search to show only Elements with specific keywords or hide, as well as to show connections to such Elements

•  Manual Connection view

•  Criteria Based Connections view

•  Connections visual change depending on criteria, such s amount of keywords linked, age etc.

•  Navigation by moving the user’s view within the document, primarily horizontally and vertically as well as ‘zooming’

•  Attracting Further Information in order for the author to best understand the information as well as

•  Hiding Information away for use later – such as by putting Elements into the Cuttings area from the liquid view

•  Quick find on screen through allowing the user to type in the first characters of a Heading and have the Heading(s) which include the search text to be highlighted.

•  Create Heading/Node. Headings are usually created in the word processor view but should also be possible to add to the liquid view, either as sections under current headings or free-floating (where they will then be appended to the end of the word word processing view unless moved elsewhere).


View Controls


Control mechanisms need to be present to allow the user to alter:


•  Global view attributes, such as a toolbar.

•  View attributes of specific link types.

•  View attributes of specific headings. It needs to be possible to:

– Move section

– Choose how many levels to see: open/collapse. If collapsed, the Heading is underlined to indicate more under it.

– Show/Hide connections

– Indicate wether the section is Done (green dot/colour text maybe), In Progress, Paused or Empty (grey maybe, and auto-assigned?)

– More… To be determined during user consultations, as with all potential features


•  Mouse over sections to see structure, in other words what other Headings are part of the same column


Layout Considerations


The user will be able to manually move elements around the screen and summon automatic layouts based on criteria:

•  The basic layout unit scheme is a column, where headings show up as in the word processing view’s collapsed ‘Table of Contents’. The author can easily snap apart headings from columns and create new columns.

•  Clusters of near or overlapping headings will show similarities and and those headings not near each other will imply distance in meaning through distance in layout.

•  Relative positions of top/bottom and left/right can be used to show meaning.


Stored Views


The author should be able to save views (maybe in a tabbed format) and possibly to go back through a timeline.


Toggle Views


How can the user best transition between the word processor view and the liquid view, in a way that feels natural and makes it feel like two different views of the same information is shown? Currently, logically, the view fights with the collapsed/Table of Contents view. How should the liquid view look on first entering it; the same as Outline?




•  Toggle Outline view: Pinch in with two fingers to enter and and pinch out with two fingers to exit

•  Toggle liquid view: Pinch out with three fingers maybe?

•  Toggle flow view: pinch out with two fingers when in regular view and pinch in with two fingers to go back to regular view




The liquid view should be annotatable, just like the word processor view should be.




On publishing the .liquid document the author should be able to choose what liquid views related information should be included.


(note from my PhD work)

How To ‘Think’ This Section

This section connects ‘How scholarly tools inappropriately constrain thought’ with ‘How Author, Liquid Views and Liquid addresses the issues’. With so many dimensions, and adding auxiliary projects, it becomes quite unwieldy. I have therefore moved this into Scapple, to mock-up how this would be dealt with when we have a Liquid View. I built this view on a 27” iMac so the view may be quite tiny on a Macbook and likely unusable when printed out on anything smaller than A3/4.

Main View:


Issues arising from this Liquid View Scapple Mockup Exercise

The first issue is one of size. This was created on a large display but the target user group uses significantly smaller screens. An issue then becomes how to best zoom in and out while also having a mechanism for deterring how deep or shallow in the hierarchy to reveal. Here the sub-headings under ‘View’ are visible:

Expanded View:

The visual design will also need to be revised, with better magnetism for where the lines should spring from the headings/nodes and how the lines should be visualised. In this example only a sub-set of the headings in this document were turned into nodes so the user should be able to easily and elegantly choose what should be used. Furthermore the black notes on the sides of the view are not in this document so I need to design an interaction and system for handling such notes.




Leave a Comment