Skip to content

Issue with the logic of WP to Liquid View layouts and back again

This started as a really annoying design problem I thought of late last night, then today after a nice lunch and coffee, I decided to at least write it out, and I think I have reached an useful design approach, as mentioned and illustrated at the end:


This diagram shows a serious issue of how the word processing view should be able to go into Liquid View and back again.

The initial logic for Liquid View was that there would automatically be a dotted connecting line between level 1 and 2, and form level 2 to 3 and so on. There was also an assumption that the user could add further lines to illustrate points in liquid view.

However, in this diagram I have organised purely by layout organisation and using bold for headings. There are no real, structural indications for how headings relate and thus how we can go from Liquid View to WP (word Processing) view and back again. This is a real issue.

For example the section on ‘Keyboard’ control options I have listed the basic options vertically, under the heading ‘Keyboard’ in bold, with no connecting lines:

•  Click
•  Click and hold
•  Click and drag
•  Double Click
•  Ctrl-Click
•  Cmd-Click
•  1, 2, 3, 4, 5, 6, 7, 8,
•  Select Heading, then 1, 2, 3, 4, 5, 6, 7, 8, 9
•  Cmf-F
•  Cmf-Shift-F

The two connecting lines were used to connect to the category/bolded heading ‘Show more or less levels’

•  For whole view
•  For specific Heading

And this is an eminently useful way of working in this liquid view/Scapple/Concept Map space, but it does not immediately suggest how to go back to word processor view.

I did another version where I indicate level 1 to 2 etc via dotted lines (which were not indicated at all in previous diagram) and used slid lines for relationships. This gets messy though, when there is a list which should have lines going in two directions, such as the ‘Liquid View Annotations’ section, at the top:


I’m going to to try another layout, where sub-sections are all vertically in line and user can only snap sections off at a heading and lines are only for relationships. Level 1 relationships (which level one heading comes after another) is not indicated.

Here we go:

In this way of working, all headings are locked, left aligned, under the heading above it. User can drag sub-headings up and down to provide more space, and snap off any sub-heading to place it elsewhere. Unless the user drags that heading to another heading, it remains under the original heading in WP view.

Notes can be entered in italic and inserted into the vertical column layouts (to be shown as sub-heads under the heading in WP view.

Any lines used are purely for liquid view visualisation.

Visually: Level 1 headings are big and bold, level 2 bold but not as big, then level 3 normal size, level 4 a bit smaller.

The video for this exploration, showing the process as I worked:

And this is the scapple document used: Liquid View Interactions


I think that constricting the liquid view into columns can be pretty interesting. Note, after working on the example above, I realised that there were issues with the ‘Gestures’ section and the ‘Liquid View Annotations’ section and cleaned them up like this:


This layout adheres to this layout logic:





It’s important that looking at the information is different from interacting with it, so with that in mind, when selecting a heading, the visualisation could change from showing the plain view, as above. For example:


On click, the heading is highlighted, perhaps with options/buttons showing:


Then on moving, the structure (as shown above), of the column layout, is made clear, so that that user can easily drag to a new space free-form or move the heading to another column stack:


Then the user can drag on top of another heading, which would result in a link/line:


Or between two headings to move across to the new position and visually the selected heading has less of a drop shadow and the headings move out of the way to accommodate it:

Published inLiquid | AuthorLiquid | ViewPhD