...
Multiple users are allowed to collaboratively annotate the same webpage. The UI for this "collaborative editing mode" is almost identical to the "private editing mode" from before. The only difference now is that the user can see a colored circle beside each result in the note page. Each color corresponds to a unique user, the one responsible for the marked results. This way all users sharing the annotated webpage can be identified.
1 | | The homepage is the same as the one in Design 1. When Jim loads the URL for the "Worse is Better" paper, he will see the screen on the left. Note that the note page on the right is not titled. Jim can rename it by typing over the word "Untitled Note Page." If Jim wants to perform an action on some text, he would first highlight it. In this case, he chooses "MIT approach." Then he right-clicks, which pops up a menu. The menu contains the two actions he can perform: copy and annotate. Let's say Jim decides to annotate the text, so he clicks "annotate." A cursor immediately appears on a new line in the note page, prompting Jim to type a note. Jim types "is AWESOME!" | |
2 | | Now the note "Is AWESOME" is associated with "MIT approach." When Jim hovers over "is AWESOMe!" a dotted enclosing box appears and the text "MIT approach" is highlighted, indicating the association. | |
3 | | Jim could also start by typing a note in the note page. Once he finishes the note, he hovers over the border of the note, the cursor changes shape. At this point, if Jim right-clicks, a menu pops up. In this case, Jim wants to associate the new note to the picture on the webpage, so he clicks "Associate." | |
4 | | Now Jim has to choose a section on the webpage to associate to the new note. Before he chooses one, the note page is frozen: no more edition can be done on it. In this case, Jim hovers over the picture. A dotted enclosing box appears and Jim clicks within the box. This associates the picture with the new note. | |
5 | | The UI for saving and giving permission to other users is the same as Design 1. Now Sam and Jim are collaboratively annotating the webpage. The only difference in UI here is the addition of colored circles. All note page results marked by red circles were performed by Jim and all the ones marked by green circles were performed by Sam. |
...