Skip to content

Liquid | View Application (layout tests)

Last updated on April 5, 2019

Layout tests for a citation layout application.

Full Meta-Jacket

The user drags a PDF icon onto the workspace and the application checks whether it has full metainformation attached for citation. If not, it asks the user to select the name of the document and gives the user a list of a few places it can search for metainformation, including the ACM Digital Library or by the user pasting a Bibtex text or manually entering the data.


I experimented a bit with how to represent documents (as icons to make them take the same space or as text), people (bold), headings (san serif, same as Author headings) and comments (italic) and how ctrl-clicking could bring up different dialogs for options:

I also changed the canvas to a light grey and did some experiments with real documents, shown as two line serif type and headings in san-serif to see clustering:

I also looked at some different ways of showing active/selected documents, highlights and connection lines etc.:

Structure: Columns

I moved onto columns since we have tried that before in early Author dynamic Views and it seems to make sense to be able to anchor items to headings.

Here is a test where more annotations are shown (in yellow, as they would appear in the document) and there is green text above one of the columns (it seemed easier to skim when I used columns) designed to indicate an unread document:

However, based on how well the columns seemed to work, I then had the notion of having a column to the left for un-read and therefore un-categorized papers and the idea of having a column on the right for used or refused documents took too much space so refused documents now appear under the un-read column and used documents (copied for citation) are grey but this can be toggled).

I am really quite pleased with this layout, in it’s Trello like column style but I honestly don’t think it really adds much functionality beyond what normal citation managers do so I’ll pause this direction.

Published inHyperGlossaryInteractive Text Space DiagramPhD

One 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.