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
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:
Commands
The user can select text to produce the standard black iOS meny to issue these commands:
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):
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.
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:
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
© Frode Hegland 2020