View Source

Prototype Photos

1. Homepage: Paste the URL in the central text box and click "Annotate!".
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto01.JPG

2. Edit page. Hovering over a section (div) makes a border appear. Clicking on the image will make the "Add Note" button appear just above cursor. Click on the button.

6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto02.JPG

3. Clicking on the "Add Note" button makes the text box appear on top of the image. Type in the text box.
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto03.JPG

4. Finished typing the box. The text box becomes transparent when the cursor is not hovering over it. Highlight text makes a row of buttons appear. Click on the first one ('Mark Highlight') to mark the highlight yellow.
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto04.JPG

5. Clicking on the 'Save' button makes the dialog box appear and disable the screen at the background. Type in the page name and click 'Save' to save the page and get back to the edit screen. Click on 'Jim's Saved Pages' to go to the next screen (see next photo).
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto05.JPG

6. Dashboard page. It lists all saved annotated webpages with thumbnails. Page name and access control rights are shown below the thumbnail. Clicking on the thumbnail to go back to the edit screen of that webpage.
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto06.JPG

7. Clicking on 'Share' to make the 'Share' dialog box appear. Enter usernames or emails at the left box for giving read-only access, at the right for edit access (possibly at the same time, i.e. collaborative edit). To give Alex read-only access, type Alex's email in the left box and click 'OK'.
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto07.JPG

8. Access control rights are shown on the top left bar. Now the 'View' right is given to Alex.
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto08.JPG

9. Give 'Edit' right to Sam. The div that Sam is editing is bordered and flaged with 'Sam' (the dark red bordered region). User Jim can edit the notes on the image.
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto09.JPG

10. When Sam finished editing the text, he went on to modify the notes on the image. Jim can now edit the text.
6.813/6.831 User Interface Design > GR3 Paper Prototyping - WebAnnotator > proto10.JPG

Briefing

WebAnnotator is a web application that allows users to annotate web-pages and to share the annotated pages with trusted parties. Standard annotating capabilities such as commenting and highlighting are supported.

For example, a student taking a class can annotate course materials that are on the Internet and share his notes with his friends. WebAnnotator greatly facilitates this annotation and sharing process by providing an efficient user interface.

There will be four different tasks in this testing.

Scenario Tasks

Task One: Your user name is Jin and your password is 1234. Use WebAnnotator (http://webannotator.com) to annotate the webpage, http://en.wikipedia.org/wiki/Lisp_(programming_language)\
1. Highlight the first sentence "Lisp(historically, LISP) is a family of computer...".
2. Add a note saying "Awesome!" to the picture of LISP machine.
Task Two: Save, Review Saved & Reopen
1. Save the annotated webpage.
2. See all your saved pages. (Suppose you have saved two other pages before. So in total you now have three saved pages.)
3. Open the one you just saved.
Task Three: Share your annotated Wikipedia article on LISP with Alex (user name: alex, email: alex@gmail.com) so that it is viewable by Alex, but he cannot change anything on it.
Task Four: Collaborative Edit with Another User
1. Share your page with Sam (user name: same, email: sam@gmail.com) to allow him to edit at the same time on the page.
2. Highlight the person that first implemented Lisp (Steve Russel, in the 4th paragraph of "History").
3. Change your previous note on the picture from "Awesome!" to "Broken."

Special Note: For Task four #2 above, druing the first 10 seconds, a tag saying "Sam" is shown near this paragraph, indicating that another user is currently annotating this. Any other user thus won't be able to edit or add annotations until Sam has finished. This was only simulated in real time and was not included in the task card given to the tester so that the testing better approximates the actual application.

Observations

First Iteration

User One:
- Confused the icon for popup note with highlight.
- Unable to scroll down to locate the LISP machine picture because a scroll bar was missing from the prototype.
- Task four #2: the simulating doesn't work very well as the user didn't understand why he couldn't annotate while the tag "Sam" is present.
- All other tasks successfully completed with ease.
- Suggested to support annotation deletion.
User Two:
- Confused the icon for popup note with highlight.
- Not sure how to save popup note (even though it's automatically saved).
- Not sure clicking on "Jim" will bring him back to the Summary Page (but still did it anyway).
- Not sure what "privilege" means (even though it's not required to complete tasks).
- Task four #2: somewhat confused; not sure why annotating doesn't work.
- All other tasks successfully completed with ease.
- Suggested that annotation tools need improvement in general, e.g. icon for popup note is not clear, highlight doesn't support multiple colors, great if can drag annotations around.
User Three:
- Confused about annotation icons.
- Tried to click on a pre-existent hyperlink on the annotated webpage; and was expecting to see a new page opening up in a separate tab.
- Thought the word "publish" implied the meaning of broadcasting to the entire world (instead of selectively sharing).
- All other tasks successfully completed with ease.
- Suggested that saved webpages in Summary Page should be organized in a list (i.e., how emails are organized by Google) to save space. Organizing them by thumbnails is difficult to search if there are many saved pages.

Second Iteration

User One:
- Clicked the highlight icon to leave this mode in Task 1 even though clicking the popup note icon right away will already do the job.
- All other tasks successfully completed with ease.
- Suggested that collaborators' information (e.g., names) should be displayed on the top bar.
User Two:
- To accomplish the sub-task of highlighting, tried to select the text first (the right order is first clicking the "highlight" button and then selecting the desired text).
- Not sure clicking on "Jim" will bring him back to the Summary Page (but still did it anyway).
- All other tasks successfully completed with ease.
- Suggested that collaborators' information (e.g., names) should be displayed on the top bar.
- Suggested that the cursor can change to indicate the current mode (highlight, popup notes, etc.)
User Three:
- Scroll bar not visible enough as he could not locate the LISP machine picture.
- Was expecting to see user profile information after clicking the button "Jim."
- Was annoyed that there was no feedback (e.g., an pop-up message) when he tried to annotate over another user's section in collaboration mode and did not succeed.
- All other tasks successfully completed with ease.
- Suggested that the user should also be able to share from the homepage, without the intermediate process of opening the saved pages.
- Pointed out that our current interface looks like a browser and the functionality should hence be consistent with this affordance. But our application currently does not support most of the standard browser functionality.

Prototype Iteration

First Iteration	Second Iteration	Reason
The edit buttons (highlight, add notes, etc.) appear when clicking on the page.	All hyperlinks on the original webpage are disabled when it's loaded to show in our app.	Clicking may result in redirecting (or at least create the confusion that it may redirect) if the clicked area is a hyperlink. The edit buttons appear when some text is highlighted by cursor or when an image is clicked on.
There is no way to delete the made annotations.	Clicking on the annotation makes the delete button appear.	This was a bug in the first iteration.
The edit buttons are icons with no tooltips.	All edit buttons display tooltips during mouse over.	Users have different understandings of what the buttons will do. It is helpful to clarify them by words.
An address bar is displayed at the top showing the URL of the current webpage the user is editing. It also accepts a new URL that will bring up a new page for the user to annotate on.	The address bar is removed. A +New Page button is added.	It gives WebAnnotator an unintended resemblance to a web browser. The address bar is confusing over its behavior: would the current page being edited go away if the user types in a new address? When user sees an address bar, they are tempted to think that it behaves like it does in a web browser: that the new page will open possibly overriding the current page, and that there should be 'back', 'forward' and 'refresh' functionality, none of which are what we are trying to support.
The button at the top that allows user to go to their dashboard (which shows all the saved pages) is labeled with the username of the user.	The label is changed to '<username>'s Saved Pages'.	Some users tested on the paper prototype are not sure about what the button is for.
The 'Share' dialog box contains one text area for emails/usernames with a radio button choice of either 'publish' or 'collaborate'.	It now contains two text areas, one for each type of access control rights (prototype photo 7). And the names of the two access control types are changed to 'View' and 'Edit'. It also displays the current status that the user set for access control. (i.e. the previous setting is shown in the two text areas.) This allows the user to change the access control rights later by opening the dialog box again.	One user was not sure about what the original names mean. There was no way for them to disallow a given access control to others once set.
No showing of other users who are currently viewing or editing the page.	This information is displayed on the left hand side of the top bar.	It gives user feedback, especially in the collaborative editing mode about the state of the world.