Liquid | Reader iOS

 

First Use (adding meta-information)

 

When users opens Reader they are  presented with an overview of their documents, where they can navigate to find their PDF directory, in what is called the Document Management View (see design below).

 

 

On '+' First Document Open to Assign Name and Authors for Metadata

 

  • The first time a PDF document is opened (by clicking the + button) it is shown full screen with a dialogue box asking the user to select the name of the document (to then enter 'OK' or 'Skip') which allows the user to select the name of the document in order for the document to be quickly citeable later.
  • The second question asks the user to 'Select Author(s)' which works the same way.
  • Once this is OK'd by the user, a search is performed of Mendely documents (their public API) and a dialog box with all relevant citation fields are shown (same as Liquid | Author citation), which will be partly filled in by Mendeley or empty if nothing is found.
  • This information is correctly saved in the PDF's metadata, making it accessible to any app.
  • The document will also receive the tag 'MetaAdded' so that the macOS version will also know what the meta-information for searching inside the document based on annotations and citation information has been appended.

 

 

 

Reading in Document View

 

The user may then tap to open and read the PDF document, including zooming, and turning pages, as default Adobe PDF app interactions. Note that there are no visible interface elements on the screen and the PDF documents appear with normal black text on a white background.

 

The user can tap in the margins:

 

  • Tap in right margin advances one page.
  • Tap in the left margin goes back one page.

 

 

Commands

 

The user can select text to produce the standard black iOS meny to issue these commands:

 

  • Show sentences with Selected Text which removes the PDF document (which is pretty much an image and shows (using black serif type on a white background) all the sentences in the document which contains the selected text/keyword. User can tap on any occurrence to jump to it or tap in the margin or pinch out to dismiss back to regular PDF view (still on same page), with a fade animation.
  • Copy As Citation takes the selected text into clipboard along with formatted citation information, as added to the document on First Document Open. The selected text will be instantly available on the users macOS machine if it is near the iPad (current iOS feature).

 

The user can tap and hold for a second without selecting text for a standard search dialogue box to appear with two options (or cmd-f if with keyboard), or pull the document down to reveal a search Dialogue above, as in iOS Mail):

 

  • Search Text which performs the same operation as 'Show sentences with Selected Text' above.
  • Search Highlighted Text which performs the same operation as 'Show sentences with Selected Text' above but only searches text which has been highlighted.

 

 

Annotation

 

To highlight text, the user selects text with Apple Pencil and the text is automatically coloured with a yellow background, just as drawing with a normal pen/pencil/highlighter. Tap again on the text to toggle to Red, which signifies an important highlight. To remove highlight tap and hold for a second.

 

Highlighting is the only annotation supported for the initial version, there is no means for the user to type text comments. Text Notes will be second phase of implementation. To add notes to the annotation, the user should simply start typing after selecting the text and a dialog appears, centre of screen, with your typed text, as fast as the system can produce it. Whatever character was typed first will be copied in to the dialog as well, so the experience is seamless. Same visual design box as the Notes dialog in Author. Once done, the user can resize the text box of the comment and place it anywhere on the screen.

 

 

View Annotations

 

User can interact to see only the highlighted text in the document. Method not determined so far.

 

 

Design & Layout of the Document View

 

The Document view features no visible interface elements, it simply shows the PDF as it was made by the author:

 

 

 

 

 

Document Management View

 

The user can move out of the Reading/Document view by pinching again after pinching to full-document view – to clarify – if the user pinches in and out while reading, the max out will snap at full document, the user will have to let go and pinch again to exit.

 

 

Transitions

 

Animation from Reading to Document Management View is document zoom down/smaller.

Animation from  Document Management View to Reading is document zoom up/larger.

 

 

 

Listing Layout

 

Each document is listed by name across one line, with authors names beneath it. Under that is each Red/Important highlighted section of text (line break after each) and after that each Yellow highlighted text. The annotation text is shown with a yellow or red background.

 

  • The user can choose to pinch to not see the yellow annotations – which only leaves the red, then again to not see the red.
  • The user can choose to tap on any annotated text to instantly open that document to that spot.
  • The user can choose to tap-and-hold on any annotated text to get options:
    • Copy As Citation (see above)
    • Remove Highlighting

 

 

Search

 

The user can pull the document down for search options (same as in iOS Mail), (or cmd-f if with keyboard), revealing a search dialogue box with two options under it:

 

  • Search Text which searches the body text of all the documents in the current directory with the results appearing as 'Show sentences with Selected Text' in the Reading section above, except adhering to the Document Management View design; dark background and white text.
  • Search Highlighted Text which searches only highlighted text of all the documents in the current directory with the results appearing as 'Show sentences with Selected Text' in the Reading section above, except adhering to the Document Management View design; dark background and white text.

 

 

Design & Layout of the Document Management View

 

The visual design of this document management view is dark grey with white text, to make it very clear that this is not a document view.

 

Shown with a few documents featuring highlighted text at the yellow and read level and most documents with no highlighted text:

 

 

 

User pulls down from top to reveal the Search Dialog, same as in Mail:

 

 

 

Search results are shown like this, with highlighted text first, then any other occurrences below (below all the highlighted text results). User can tap on the title text, which is the 'Search Term' to go into the same pull-down dialog as they had when entering the search term (above) where they can also choose to tap X in a circle to the right, to cancel the search, or pull down again to cancel the search and this then snaps away the heading and all documents are shown:

 

 

 

 

 

 

To Build

 

  • A system for searching and assigning document and author name on opening PDF
  • A PDF viewer
  • A PDF annotation system, including for for Apple Pencil
  • A document manager view which accesses the annotated text in each document