...
- When the webpage is presented to the user, it tries to show affordances for editing by displaying section borders and the 'close' button on mouse over, but it is not obvious what editing tools are provided; the user has to click or select text in order for the editing buttons to show. A tooltip on mouse over saying 'Click to show edit options' may help, but may also be annoying if it is constantly showing and covering up the content of the webpage below it. A panel at the top or either side containing all possible editing buttons is another option that may improve learnability of the editing feature.
- In the collaborative editing mode, it may not be easy for the user to figure out exactly which part is not editable due to other's actions on the same page.
- The design does not provide user any help information or functionality. A quick help page for new users may be useful.
- The two shared modes in the Share Dialog Box, Publish and Collaborate, are not explained.
- The editing interface is implementing direct manipulation, where effects are immediately visible to the user, which helps learnability. It also is a familiar interface that can be related to many existing interfaces such as Adobe Acrobat, and in real world a metaphor of annotating with pen and making notes on paper.
Efficiency:
- 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 back to learnability
...
- , the knowledge of 'right click to cancel current active tool' needs to be learned somehow.
Safety:
Design 2
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.
...
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:
...
- This UI exhibits metaphorical consistency. The interface imitates a notebook, which is what most users use to take notes.
...
- When the user hovers over a note or a copy, the associated section on the webpage will be highlighted. This is good feedback.
...
- 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:
...
- 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.
...
- In the collaborative mode, a user can see his own results clearly. So he can easily avoid affecting the other users' results.
...
- On the other hand, there is no built-in mechanism to prevent a user from deleting another user's result.