...
Making edit buttons just above cursor allows user to select an editing tool faster. It works especially well if the user is constantly switching editing tools. On the other hand, it may get tedious when the user is only using highlighting, and has to select the highlight tool every time after selecting text, which results in one more click per highlighting action. Making the most recent selected tool last until explicitly cancelled (by right click, for example) may help, but learnability-wise, the knowledge of 'right click to cancel current active tool' needs to be learned somehow.
Safety:
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.
The user can perform two types of actions to any section of the webpage: copy and annotation. 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 saves 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.
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.
2. When the user hovers over a note or a copy, the associated section on the webpage will be highlighted. This is good feedback.
3. On the down side, the UI is overly simplified and does not provide enough information scent. A new user might not know how to use it without playing around a bit.
...
Efficiency:
...
The user need to right-click the border of a note in order to bring up a menu. Locating the border is a pointing task, which goes against efficiency.
...
Safety:
...
1. The user can only perform two very different actions to the webpage. This shortage of choices makes confusion nearly impossible, and therefore eliminates the possibility of capture errors.
2. In the collaborative mode, a user can see his own results clearly. So he can easily avoid affecting the other users' results.
3. On the other hand, there is no built-in mechanism to prevent a user from deleting another user's result.