Prototype Photos
1. Homepage: Paste the URL in the central text box and click "Annotate!". |
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. |
3. Clicking on the "Add Note" button makes the text box appear on top of the image. Type in the text box. |
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. |
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. 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. |
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'. |
8. Access control rights are shown on the top left bar. Now the 'View' right is given to Alex. |
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. |
10. When Sam finished editing the text, he went on to modify the notes on the image. Jim can now edit the text. |
