...
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.)
- Hovering over a section: A cross is shown at the top right corner of the section to afford 'deletion of the section'.
- Hovering over section boundary: Cursor changes to 'move cursor' to afford 'moving the section around'.
- Hovering over text: Cursor changes to 'text cursor'.
- Clicking on text: A row of buttons is shown just above the cursor to provide editing capabilities: 'insert text' and 'add notes'.
- Selecting text: A row of buttons is shown just above the cursor to provide editing capabilities: 'add notes', 'hyperlink', 'highlight' and 'change color'.
- 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. |
Analysis
Learnability:
- 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 is good for learnability.
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 learnability-wise, the knowledge of 'right click to cancel current active tool' needs to be learned somehow.
...