Transcription Use Cases and Mockups - ProjectMirador/mirador GitHub Wiki

Use Cases

  • Display transcriptions without any images associated with them. #7
  • Translation/transcription (reference) displayed below the line(s) #10
  • must be able to recover my place in the text. #10
  • Possible “workflow” or keyboard scheme for moving up and down, “locking”. #10
  • TEI, or some kind of locked schema. #10, #12
  • Submit for review, versioning (github) #10/morning call
  • Visually linked navigation of text and image (navigating one, navigates the other). #10, #15
  • More and less discrete views of annotations and the things they refer to
  • primarily text, show corresponding image
  • primarily image, show corresponding text
  • fully linked
  • Associating pre-existing text with regions of the image
  • Ability to select from multiple (whole book/gallery-level) collections (layers) and annotation lists, #12
  • Support for multiple annotation lists #12
  • Support for layers #12, #15
  • Select destination annotation list for new annotations, #12
  • Provide a count of annotations per page/indicate whether or not annotations exist
  • Provide a workflow that targets the whole page by default, #13
  • Display annotations with multiple targets #14
  • Provide a workflow to create/edit annotations with multiple targets #14
  • Let annotations use other annotations as targets (show this relationship) #14, #15
  • Annotations should be able to target a specific image in choice cases #15
  • Comparing annotations (along with their targets)
  • Restrict access to annotations that I have not completed yet
  • Mark as incomplete
  • Show status of transcription metadata/blank spots
  • Layout text in a similar manner to the image (when ALTO/”search within” annotations, or any annotations with - - - region data are available) (CSS? see spec)
  • Provide a way for the user to select the language of a translation/commentary annotation (dropdown?)
  • Drag and drop ordering of annotations in a sequence
  • Edit in place (contentEditable?)
  • User ability to export collections of annotations (layers?) in PDF, csv, text, json, etc.
  • Navigation methods (keyboard, workflow-based controls, etc.) for transcription (moving down when at end of text box, etc.) without losing place
  • Decompose page-level transcription with carriage return
  • Add author metadata to annotations
  • (Reading) workflow or navigation from translation to transcription to image
  • Flexibly rearrange tools, panels, etc. (above or below, big or small)
  • Limit eye movement and represent conceptual proximity
  • Limit going from mouse to keyboard and vice versa
  • Distinguish between power user and accessibility controls (bring them together)

Categories and User Tasks

####Reading/Viewing: As a user, I want to…

  • … see the correspondence between the transcription/translation and the image. by a layout that reflects the layout of the source image as closely as possible. by line numbers.

  • … select which transcriptions and/or translations and/or commentaries to view with the image.

  • … easily display and navigate from a transcription to image region(s) from a translation to image region(s) and/or transcription(s) from a comment to the thing(s) it is commenting on from an image region to the thing(s) that refer to it

  • … have my movement or change of focus in the image, move the transcription (translation) in the same way (and vice versa)

  • … see what the person who wrote this was looking at.

  • … peek (supplement my view) at the corresponding image when I am reading a transcription (translation)

  • … see all the things this comment (translation, transcription) is referring to.

  • ... display transcriptions even if no images are associated with them.

  • … know how many transcriptions, translations, etc. exist for this image.

  • … export content into other formats for use with other tools.

  • … see the status of a translation or transcription (is the page completely translated?).

Writing/Creating:

As a user, I want to...

  • … create a transcription or translation of an image: a page at a time a region at a time a line at a time (inter-linear - vertical or horizontal)

  • … create a translation of an existing transcription by referring directly to the transcription text by referring to multiple transcriptions (as in the case of translating a paragraph from multiple separate lines of transcription) by referring to both text transcriptions and image regions

  • … arrange the transcription and image panes: side-by-side above and below with the text overlapping the image

  • … not lose my place by accidentally swiping the image

  • … see the relationship between my translation and the transcription regions it is translating

  • … move the image while remaining focused in the transcription editor

  • … associate pre-existing text with regions of the image by adding line-breaks by drawing regions and associating paragraphs

  • … edit the text of of a transcription or translation in the same place it is normally displayed

  • … select a transcription/translation layer/list to work in, and stay there until I change it

  • … translate a sentence or paragraph that spans multiple transcription regions.

  • … to mark my transcription/translation as: incomplete ready for review

  • … order transcriptions/translations/comments in a sequence using drag and drop

  • … indicate the language of a translation/commentary annotation

  • … add semantic markup to my transcription

Guiding Design Principles

  • Limit eye movement
  • Represent conceptual proximity
  • Limit going from mouse to keyboard and vice versa
  • Design keyboard control as a core use case (avoid conflict between accessibility and power tools)
  • Flexibly rearrange tools, panels, etc. (above or below, big or small)

Mock Ups

These are the base mock-ups. More details about each segment can be found in the relevant github issues. In general the design centres around the addition of a new tabbed side panel that provides a text representation of manifest structure and related content (such as the table of contents, multiple sequences, detail and alternate imagery, and annotations from multiple lists), as well as the addition of a new, movable panel to house the contents of user-selected annotation lists and their editing tools.

Focusing on the transcription and translation use cases: lists of transcription or translation annotations in the "texts" or "annotations" panel may be clicked to open a bottom panel for easier reading and for editing. This transcription reading and editing panel may be repositioned to the right or to the bottom as desired, and multiple opened lists will be placed on top of each other or side-by-side in the moveable annotations panel. Editing is done "in-place" for an annotation, and new annotations or full page annotations workflows are initiated from the panel corresponding to the list that is open. A set of keyboard shortcuts were described to support a smooth (and accessible) transcription workflow. Again, more detailed information should be in the relevant github issues.

Feedback on Above from ConservationSpace Team

  • in general, there don't seem to be enough visual mock-ups to fully understand the intent behind all of the use cases
  • not opposed to any of it, although if it complicates the use of Mirador, the simple annotation use cases should still be simple to achieve
  • generally, when there are many annotations on one image, it can be difficult to consume all of them at once - showing the text (whether it be annotation or transcription) in a tab on the left would help and they agree that visual ties between the text and the annotation region would be helpful - one of them suggested drawing lines from the text to the region, for example
  • if the "text" tab could be thought of as a type of annotation filter, that might be helpful in serving both the simple and complicated use cases
  • it would be good for there to be a standard callback when an annotation text is selected in the text dialog - along with a set of standard behaviors - that would enable customization of Mirador behavior for specific use cases