Wiki source code of Annotations Proposal

Version 79.3 by Marta Girdea on 2010/03/10 17:59
Show last authors
1 = Annotations Proposal =
2
3 {{toc/}}
4
5 [[image:Annotations@proposalAnn.png||style="margin-right: auto; margin-left: auto; display: block;" width="900"]]
6
7 == Filters ==
8
9 === Standard View ===
10
11 * this mode is created for annotation contextual location **browsing**
12 ** the importance is on the location of the annotation inside the content and performing contextual actions on annotations
13 [[image:1.png||style="margin-right: auto; margin-left: auto; display: block;"]]
14
15 === Show All Filter Activation ===
16
17 [[image:2.png||style="margin-right: auto; margin-left: auto; display: block;"]]
18
19 === Annotations More Options ===
20
21 * adjustable to fit other options
22 [[image:3.png||style="margin-right: auto; margin-left: auto; display: block;"]]
23
24 === Filtering just an annotator ===
25
26 [[image:4.png||style="margin-right: auto; margin-left: auto; display: block;"]]
27
28 == Extensible Filters Panel ==
29
30 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:
31
32 {{info}}
33 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)
34 {{/info}}
35
36 === A Tabbed filters ===
37
38 [[image:filters-tabs.png]]
39
40 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".
41
42 * 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
43
44 === B Filter dropdwn ===
45
46 [[image:filters-dropdown.png]]
47
48 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.
49
50 * Pros: horizontally scalable, new filters doesn't mean more needed space, intuitive
51 * 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
52
53 === C Filters line ===
54
55 [[image:filters-line.png]]
56
57 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".
58
59 * 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
60 * 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)
61
62 === D Filters tree ===
63
64 [[image:filters-tree.png]]
65
66 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.
67
68 * 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"
69 * Cons: not constant vertical space, more criteria means more vertical space, more values when expanded means more vertical space
70
71 == Annotation Actions ==
72
73 === Hover on Icon ===
74
75 * Hovering an annotation icon shows the annotation selection
76 [[image:onHoverAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
77
78 === Click on Icon ===
79
80 * Clicking an annotation icon shows the annotation's options
81 * the overlay can be adjusted to fit other options
82 [[image:onClickAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
83
84 === Add ===
85
86 * Add: Ctrl + Select the text | Select the text + Press Add
87 [[image:addAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
88
89 === Edit ===
90
91 [[image:EditAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
92
93 === Delete ===
94
95 [[image:DeleteAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
96
97 == Annotation's Tab ==
98
99 * this mode is created for the **analysis** of the annotation vs. content
100 * also, it helps to see all the annotations on a document together, to have a view over the entire list of annotations
101 [[image:annTab.png||style="margin-right: auto; margin-left: auto; display: block;" width="900"]]
102
103 === Valid Annotation - Yellow Icon ===
104
105 * has a valid annotation and a valid annotated content
106 * Actions: Edit Annotation, Delete Annotation
107 [[image:validAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
108
109 === Modified Annotation - Blue Icon ===
110
111 * the annotated content suffered some modifications
112 * the annotation is approximated from the initial range limits
113 * Actions: Keep Annotation, Edit Annotation, Delete Annotation
114 [[image:modifiedAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
115
116 === Dangling Annotation - Red Icon ===
117
118 * the annotated content is not found
119 * 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.)
120 * Actions: Edit Annotation, Delete Annotation
121 [[image:danglingAnn.png||style="margin-right: auto; margin-left: auto; display: block;"]]
122
123 === Type Display ===
124
125 * the icon meaning is explained in a legend
126 * dangling icons appear at the end of the document, because they can't be placed anywhere else
127 [[image:annType.png||style="margin-right: auto; margin-left: auto; display: block;" width="900"]]
128
129 == Other Improvements ==
130
131 * color codification for the annotators
132 [[image:colorsAdmin.png||style="margin-right: auto; margin-left: auto; display: block;" width="900"]]
133 [[image:colorsRest.png||style="margin-right: auto; margin-left: auto; display: block;" width="900"]]
134
135 * bar integrated in the menu
136 [[image:integrated.png||style="margin-right: auto; margin-left: auto; display: block;" width="900"]]