...
Sam finds most of Jim’s comments helpful, except towards the end of the page, he does not quite understand what the words ‘Common Lisp’ are referring to. So he searched online and find a good article explaining what Lisp is on Wikipedia. He then pasted a brief sentence from Wikipedia explaining what 'Lisp' is and attaches it to the words, while keeping Jim’s annotations.
Design 1
The This design is trying to be minimal. The core of the design is presented in the 'Editing Page' (collaborative and non-collaborative, screen 2 and 4). It lays out the original webpage as the starting point for annotation (or editing) and editing is done directly on the page. It divides the whole page into sections, and allows multiple users to collaboratively edit a page as long as no two of them are editing the same section at the same time.
...
This design is called the Notebook. Just as the name suggests, the design is based on the model of a notebook. The user cannot directly annotate on top of a webpage. Instead, a frame imitating a note page is attached to each webpage and the user can only change the content of this frame.
The user can perform two types of actions to any section of the webpage: copy and annotation. Both types will be demonstrated in the storyboard below. The result of each action (e.g., a copied picture or a note) will be added to the end of the note page. In the end, the note page can be visualized as a list of these results. When the user save his work, the webpage and the note page are saved together in our server.
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.
This design is called the Notebook. Just as the name suggests, the design is based on the model of a notebook. The user cannot directly annotate on top of a webpage. Instead, a frame imitating a note page is attached to each webpage and the user can only change the content of this frame.
...
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. |
|
|
Analysis
Learnability:
1. This UI exhibits metaphorical consistency. The interface imitates a notebook, which is what most users use to take notes.
...