Back To Project Home

Scenario

Jim is a senior taking 6.033. If time permits, he usually does the assigned reading ahead of time. On Monday night February 6, he is sitting in his room reading the “Worse is Better” paper (http://dreamsongs.com/RiseOfWorseIsBetter.html) linked on the course website to prepare for tomorrow’s recitation.

He comes across a sentence ‘Unix and C are the ultimate computer viruses’, and he thinks it is a cool saying. He is intrigued to highlight that sentence and put comments along with it. He knows that WebAnnotator allows him to make notes directly on webpages, so he goes to WebAnnototar.com and loads the ‘Worse Is Better’ webpage. He scrolls to that interesting sentence he found and highlights it. Then he attaches some comments to the highlighted sentence. Later on as he reads he also highlighted some other important points in the webpage.

In order to be able to refer to his notes later, he saved the annotated webpage online in WebAnnotator. To refresh his memory the night before recitation, he returns to his annotated webpage in WebAnnotator.com to review the high-level ideas covered in the paper.

Unlike Jim, Sam is having a hectic schedule. He does not have time to read the assigned reading before recitation. An hour before recitation time, he makes an emergency call to his friend Jim for help. Jim tells Sam that he has taken some notes that could be helpful. So Jim goes to WebAnnotator.com, pulls out his annotated webpage and shares it with Sam.

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

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.

1.

Homepage.

It provides a text box at the center for user to paste the url of the webpage that they want to annotate. Then they need to hit 'Enter' or press 'Load'.

It also provides a 'Login' button that pops up a login prompt (not shown). When logged in, the user's username will be shown at the top right corner instead.

2.

Private Editing Page.

User (logged in as Jim) loads a webpage and is shown the editing page. The user is able to edit the webpage in the editing page. 

The top bar is showing the original webpage's URL, username, and three buttons: 'Save' (shown below), 'Reload' (discard all changes) and 'Share' (shown below).

The webpage being annotated is automatically divided up into sections (they can be high-level divs, for example).

Mouse behavior and actions user can take:
(Note: Although the delete buttons for made annotations are not shown, every annotations should be deletable by offering a delete button when the annotation is selected.) 

  1. Hovering over a section: A cross is shown at the top right corner of the section to afford 'deletion of the section'. 
  2. Hovering over section boundary: Cursor changes to 'move cursor' to afford 'moving the section around'. 
  3. Hovering over text: Cursor changes to 'text cursor'.
  4. Clicking on text: A row of buttons is shown just above the cursor to provide editing capabilities: 'insert text' and 'add notes'. 
  5. Selecting text: A row of buttons is shown just above the cursor to provide editing capabilities: 'add notes', 'hyperlink', 'highlight' and 'change color'.
  6. Clicking on an image: A button is shown just above the cursor to provide editing capability: 'add notes'.

2.1

Save Dialog Box. 

Pops up when 'Save' is clicked on the above screen.
Allows user to name the annotated webpage and save.
Clicking 'Save' brings the user to the screen below (dashboard).

Share Dialog Box.

Two share modes:

  • 'Publish': Allow invited users to see your annotated webpage, but they cannot modify it.
  • 'Collaborate': Allow invited users to collaborate in editing (described in screen 4, Collaborative Editing).

3.

Dashboard Page.

This is user's dashboard, showing thumbnails of all the user's saved annotated webpages. Below each thumbnail, name and access control of the page is shown. It also offers 'delete' by showing a cross at top right during mouse over.

4.

Collaborative Editing Page.

The editing capabilities provided are very similar to the private editing page, with one difference: The sections are not editable if other users are already editing in those sections, and are labeled with the editing user's username. (Sections are divided automatically when the page is loaded into WebAnnotator, as described before.) For example, when Jim and Sam are editing the page collaboratively, if Sam is selecting text in the middle section, the section and its subsection (containing the image) are not editable to Jim. But Jim can edit any other sections.

Usability Analysis
Learnability:
  1. 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.
  2. 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.
  3. The design does not provide user any help information or functionality. A quick help page for new users may be useful.
  4. The two shared modes in the Share Dialog Box, Publish and Collaborate, are not explained.
  5. 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 making notes on paper.
Efficiency:
  1. Making edit buttons just above cursor saves the user the distance she has to move the cursor. 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.
  2. In the collaborative or publish mode editing page (screen 4), the interface does not provide a summary of all edits and the user they belong to, the user has to select an edit to see its user. Which might be inefficient when the user wants to view just a single person's edits, or the differences between her edits and others'.
  3. No undo or history of previous actions are provided, so the user cannot easily undo their previous delete without finding them explicitly all over the page.
  4. In the dashboard page (Screen 3), the saved pages are displayed as thumbnails, which may not be efficient for multiple deletion, partly because it is not as compact as a list. A list with a check box may provide better efficiency for aggregate operations, but they may be lacking visual cues to help the user recall a saved page.
Safety:
  1. Displaying the original webpage's URL at the top right is very much like the web browser's address bar, which may confuse the user about her current location and create an illusion that she is actually on the original webpage. If the user follows a link on the original page, either because she thinks that the new page will also open in WebAnnotator or by accident, she will be redirected to the new page, exiting WebAnnotator, which may be unexpected and risks the user to lose her work on WebAnnotator if it is not saved. A prompt on redirection asking for confirmation ('By clicking on a link you are about to leave WebAnnotator. Do you want to continue?') may help.
  2. If the user forgets to click 'Save' and either accidentally close the page or experiences a browser crash, she will risk losing her work. This could be mitigated by auto-saving once in a while.

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.

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.

Usability 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. 

Design 3

The underlying philosophy of this design is to allow maximum annotation flexibility by imitating standard text editors. In both the edit mode and share mode below, the right subwindow is dedicated to this editing functionality whereas the left one facilitates fast viewing by displaying the original webpage/shared annotation. This enables users to easily compare their annotated webpages with the original easily. To further support this philosophy, the middle bar marks the differences between the versions of the left and the right.

This does not seem to be much useful if there are just a few annotations. But in a long webpage like the ones for 6.033 papers, users may make many annotations and having an overview of them will be helpful for various reasons, e.g. one can view all annotations without scrolling from top to bottom.

1.1


To use WebAnnotator, Jim first logins by entering his username and password.

1.2


He then gets to the Summary Page, in which there are two separate sections showing his previously saved pages and pages shared with other users. The pages are labeled by their titles and other properties.
To start a new annotation, Jim clicks on “New Page” which directs him to the following screen.

1.3


He types/pastes the URL of the page to be annotated into the text box (labeled by “pale” URL) and enters/clicks on the “refresh” button. In this case, the URL links to the “Worst is Better” paper for 6.033.

1.4


He then has entered the edit mode. The window is divided into two sections. The left one is just the webpage (Worst is Better).
The right subsection is editable and initially shows the original version of the webpage. WebAnnotator supports a wide range of annotation features such as (in the same order as in the picture) highlight, font color, popup comment box, SHARE!, copy and paste. It works just as any standard text editor like Microsoft Word.

1.5

Jim begins to annotate by highlighting some text and inserting a popup comment box as shown in the picture. To facilitate viewing, WebAnnotator automatically reveals the difference between the webpage and the annotated version by drawing red squares to the middle bar.

2.1

To return to his previously annotated page before recitation, Jim logins again and clicks on the page labeled by “Worst is Better” on the Summary Page.

2.2

This brings him back to the annotated version he made last time.

3.1

To share his annotation with Sam, Jim simply opens his annotated page again and clicks on “SHARE!”. A popup window will then appear.
Jim then enters the usernames of the people he wants to share with and clicks “OK”.

3.2

Sam will receive an email notification of this, with a hyperlink linked to Jim’s annotation. Once he follows the link, he will be able to view Jim’s annotation in share mode, which is highly analogous to edit mode, described above. On the left side is Jim’s annotated version. The version on the right is editable and identical to the left at the beginning.

3.3

To add his own new annotation, Sam uses the toolbar described previously to insert a new popup comment box. Again, this change is indicated by the red square (at the same height) shown in the middle bar to make newly added annotations more easily traceable.
Once he is done with his (hasty) annotation, Sam clicks on “Save” and is happy to have something to say in tomorrow’s recitation.

Usability Analysis
Learnability:

This design contains an internally consistent conceptual model, namely that the raw version is always displayed in the left subwindow and the annotatable version is always displayed on the right. With the aid of externally consistent standard editing tools, new users can quickly discover how to use this UI relatively quickly. The editing tools and the comparison middle bar also provide good affordances to help users explore this new application.

However, this design does not perform well in terms of feedback and information scent. For example, currently there is no mechanism to notify a user (Jim) that his annotated page has been viewed by another user (Sam) with whom he shared his page. Moreover, due to the inherent limitations of sketches, this current design also lacks adequate information scent for other actions, e.g. to share an annotated page, one must open it and click “SHARE!”. However, there is no information about this in the Summary Page.

Efficiency:

With standard editing tools and shortcut keys, users can quickly format their annotations. There are no steering tasks associated with this design. Having a Summary Page also makes retrieval easy and fast if they are not many saved pages as users can readily select their intended pages.

One possible improvement in efficiency is to design a better UI to display saved pages and shared pages in the Summary Page. A user with more than 100 pages saved may experience difficulty in finding a particular one to be retrieved. The same is true for sharing: if a page is to be shared among many people, entering each of their usernames is an inefficient task. Constructs like user groups can be a solution to this. Finally, the editing icons like highlight have not been optimized in terms of their locations in the window. Based on user statistics, the frequently used icons should be placed in easily clickable region, minimizing the time needed to complete the pointing task.

Safety:

The standard editing interface provides maximum user freedom in terms of annotation flexibility. They can annotate in whatever way they want and hence is less likely to make errors. Furthermore, most errors are easily recoverable by invoking the standard “undo” instruction. As a new design substantially different from PDF annotation tools, our design is free from capture errors that would otherwise be caused because of similar interfaces.

One possible drawback of the consistent conceptual model presented above is that users may be confused whether they are in edit mode or share mode. The indication to this is currently minimal. One other sources of errors is that sharing is currently an irreversible action. Thus a user cannot “un-share” a shared page.

  • No labels

1 Comment

  1. Victor J Wang

    Good - identified important tasks like highlights, commenting, sharing, review, and editing. Good diversity in designs. Appreciate the "summary" paragraph right at the beginning of each design. Design 2 summary section is repeated..