Dynamic View : Visual Representations

 

 

FIRST ITERATION : Paused due to the issue described in the blog post:

http://wordpress.liquid.info/issue-with-the-logic-of-wp-to-liquid-view-layouts-and-back-again/

 

 

 

The exact nature of which type of graph and which types of interactions are most useful in an academic setting is a major research component of the project.

 

I am starting with the general notion of Ted Nelson’s desire to cut up the text and lay it out in any order. I will be interviewing Ted about this using www.liquid.info/dialogue.html (in a prototype fashion soon) to get further insights from him.

 

The primary use case for Liquid | Author is interaction with an academic paper so the interactions in Liquid | Space will be focused on interacting with text primarily, not shapes or other data, though images etc. need to be supported as well.

 

Here are mock-up screenshots of my work on defining aspects of Interactive Text, as done in Scapple,  and modified in Photoshop, to illustrate how this view might look.

 

 

 

Quick Video Overview

 

Here you can see a normal word processing document compress to show the headings only, in a Table of Contents view and then the user moves the headings around on the screen to organize the document and add new sub-headings which are all connected to the level 1 headings via a dotted line.

 

The user re-organizes the document and then switches back to the word processor view where all the new headings have now been added to the document, and switches seamlessly and instantly between the two views:

 

​

 

Please note, this was put together using Liquid | Author and Scapple, which is a fantastic current concept map application developed by Literature & Latte. The implementation would look exactly the same, in terms of fonts and colours in word processor and Dynamic View.

 

 

 

Word Processor View in Author
(normal writing)

 

​

 

 

At this point the user chooses to toggle into Liquid | View and executes a command/gesture which causes the document to collapse into outline view, first hiding all the body text, then in an instant go to level 1 headings only and is then ready for spatial layout:

 

 

Collapsed Outline View in Author
(on command this appears for a brief instant)

 

​

 

 

 

Collapsed Outline View in Author
(which then collapses to show level 1 headings only)

 

​

 

 

This is what the user would see when first entering Liquid | View; it would be exactly the same as a collapsed document showing the table of contents. The user can now choose to drag the headings around anywhere on the screen.

 

 

 

The Interaction

 

Mark Anderson likens to doing a jigsaw puzzle:

 

The user organizes the information into rough heaps, just as one might organize the blue pieces and the red pieces when doing a jigsaw of a country scene.

 

Similarly, with the users intellectual work, the user categorises what is already in the document to get a better picture of how different pieces relate and to better see what is missing.

 

 

Initial Manual Layout
(showing only level 1)

 

Here the user has already started to develop a shape by putting headings which relate to each other next to each other:

 

​

 

 

 

Pinch-Zoomed Out
(showing only level 1)

 

And here the user has zoomed out to be able to have more space to play with:

 

​

 

 

 

A Full Overview
(showing all levels)

 

Here the user has chosen to view all sub-menus and can now really starting moving headings around and re-organizing the document:

 

​

 

 

 

Pinch-Zoomed In
(showing all levels)

 

​

 

 

 

Mouse Over Section
(showing all levels and mouse over body text from document)

 

This illustrates the beginning of how interacting with the elements can be designed.

 

  • Mouse-Over a Heading for more information, such as the full body text or keywords from that section, or links. This will need to be designed.
  • Drag a heading anywhere
  • Drag a heading onto another to make it a child, with a line attaching them. Drag to another heading and a different kind of line will be used, to show it's not in the hierarchy, just a link.
  • Make a new heading in this view and it's added to the end of the word processor view
  • If a link in a section is followed to another Author view, it will open in Liquid | View, just like this and the name of the new document will be appended to the title, which then becomes a trail.
  • The bar at the bottom is empty in these mock-ups but here the user can apply global view-settings, such as show all people in the sub-sections or all links

 

 

​

 

 

 

Toggle Back
(when done, instantly toggle back to the word processor view)

 

The user will be able to instantly (through a very brief animation for spatial context) toggle back to the word processor view - and back again to the Liquid | View. This is a key aspect of this proposal - it's not enough to have a free workspace - it must be possible to toggle back into word processor mode and back again.

 

 

​

 

 

 

 

 

 

Alternative / Column Based

 

This way of working is not fit for all interaction need. Please see the blog post for this and how a ‘Column Layout’ came out of working on this issue. Whether we will mover forward with one or the other, or both, is yet to be decided.

 

wordpress.liquid.info/issue-with-the-logic-of-wp-to-liquid-view-layouts-and-back-again