Annotations Proposal

Version 79.3 by Marta Girdea on 2010/03/10 17:59

Annotations Proposal

proposalAnn.png

Filters

Standard View

  • this mode is created for annotation contextual location browsing
    • the importance is on the location of the annotation inside the content and performing contextual actions on annotations
      1.png

Show All Filter Activation

2.png

Annotations More Options

  • adjustable to fit other options
    3.png

Filtering just an annotator

4.png

Extensible Filters Panel

We need to be able to define a complex filter for the annotations, on basically any criteria, or custom fields for that annotation. One should be able to easily customize the annotations application to add a new filter, which emphasizes the need of an elastic filters design. For the "integrated" version, with only one checkbox to toggle display or hide of annotations, we've devised the following approaches:

Note that in all the designs below,  the filter criteria will be combined with "and" and the values in of a criteria with "or". E.g. (annotator = Anca OR annotator = Administrator) AND mood="happy" AND (date = 10/03/2010 OR date = 09/03/2010)

A Tabbed filters

filters-tabs.png

To select a filter criteria the user would click the appropriate tab and toggle the values he wants active or not. In the image above, the filter is the annotator and the selected values are "Administrator" and "anca".

  • Cons: it's not horizontally scalable, if some filters have long names, not too many tabs will fit in, there's no good overview of the active filter

B Filter dropdwn

filters-dropdown.png

To add filtering  the user would select first the filter criteria from the dropdown, and then the new possible values will appear under, and the user would be able to choose the desired values.

  • Pros: horizontally scalable, new filters doesn't mean more needed space, intuitive
  • Cons: no good overview of the active filter, it's not clear whether choosing a new filter criterion in the dropdown cancels the previously selected values or it adds up to them

C Filters line

filters-line.png

All the criteria and their values are displayed in a line right under the display annotations checkbox, the user can remove one value by clicking the "x" sign next to a value and can add a filter by selecting the criteria and the value in the dropdowns under and hitting "Add filter".

  • Pros: it takes quasi-constant vertical space, scales well vertically for a large number of criteria or values for a criterion; good overview of the active filter
  • Cons: rather a lot of clicks to add a new value for a filter criteria, many clicks to remove a filter criterion alltogether (this could be done by adding a "delete" button next to the filter label, like it is done for the individual values of the filter), many clicks to add all the values of a filter (and then exclude only some, or something)

D Filters tree

filters-tree.png

The filter criteria are all displayed in collapsible panels, by expanding one the user can see all the possible values and check the ones he wants to include in the filter. The state of a criteria is suggested next to its title.

  • Pros: pretty good overview of the active filter, less clicks to compose a filter, intuitive hierarchy, easy to 'disable' an entire criteria, by hitting "clear"
  • Cons: not constant vertical space, more criteria means more vertical space, more values when expanded means more vertical space

Annotation Actions

Hover on Icon

  • Hovering an annotation icon shows the annotation selection
    onHoverAnn.png

Click on Icon

  • Clicking an annotation icon shows the annotation's options 
  • the overlay can be adjusted to fit other options
    onClickAnn.png

Add

  • Add: Ctrl + Select the text | Select the text + Press Add
    addAnn.png

Edit

EditAnn.png

Delete

DeleteAnn.png

Annotation's Tab

  • this mode is created for the analysis of the annotation vs. content 
  • also, it helps to see all the annotations on a document together, to have a view over the entire list of annotations
    annTab.png

Valid Annotation - Yellow Icon

  • has a valid annotation and a valid annotated content
  • Actions: Edit Annotation, Delete Annotation
    validAnn.png

Modified Annotation - Blue Icon

  • the annotated content suffered some modifications
  • the annotation is approximated from the initial range limits
  • Actions: Keep Annotation, Edit Annotation, Delete Annotation
    modifiedAnn.png

Dangling Annotation - Red Icon

  • the annotated content is not found 
  • annotation is kept for user validation (actually because it would be wrong to automatically delete content created by users (comments) just because the content could not be found, all the other users should be able to get this information somehow. It's the users who should decide if a dangling annotation should be deleted or not.)
  • Actions: Edit Annotation, Delete Annotation
    danglingAnn.png

Type Display

  • the icon meaning is explained in a legend
  • dangling icons appear at the end of the document, because they can't be placed anywhere else
    annType.png

Other Improvements

  • color codification for the annotators
    colorsAdmin.png
    colorsRest.png
  • bar integrated in the menu
    integrated.png