Use Cases/Graffiti (Web Clipper)

Graffiti / Web-Clipper use case.

Scenarios

Scenario 1: Web Clipping

User Adrian sees an interesting section of a Web page, and wishes to save that for posterity and to share it with their friends. Adrian selects the relevant portion of the Web page, using a selection marquee. Adrian then chooses the appropriate options for sharing, including a name for the saved files, a specific directory in a predefined location on a cloud service Adrian has an account with, and reader access options (in this case, public).

Adrian's UA creates a duplicate of the whole page, and also makes a raster snapshot of that specific selection area; the UA saves these files to the chosen location, and provides Adrian with a URL to these saved files.

Adrian writes a comment about the selected part of the Web page, and adds some tags, and shares that on a public social networking service, along with the link to the archived versions of the site.

(Note that the final paragraph is the part that defines this as a Web Annotation use case, and not simply a generic archiving use case.)

Scenario 2: Graffiti

User Bernie is doing research across several sites, regarding the structure of the documents themselves, using a pen tablet. Bernie uses the pen to draw circles around relevant parts of the document, in different coded colors, with lines joining different circles; for example, Bernie draws a blue circle around a part of a bar chart, then connects that with a blue line and a circle around the text that accounts for that bar in the chart, and creates a sticky note explaining that connection, positioning it between the circles. The text note is hand-written, but converted and stored as digital text as well.

These drawings and notes are saved on Bernie's local device; nobody else can see them on the original page. When Bernie returns to the page using that device, they see the drawings and notes overlaid again on top of the page. When Bernie zooms in on the page to read some fine print, the drawings and notes scale up as well, keeping their position on the page.

If Bernie chooses, they can sync the annotations across different devices, or share them using a publishing service.

Scenario 3: Art Director

User Caroline is reviewing a Web page design by a colleague. Caroline is the senior designer on the project, tasked with correcting or approving the final design, and works with the client to get their feedback.

While discussing the Web page design with the client, Caroline draws red lines, circles, boxes, and arrows around different design elements, to make suggestions for moving elements, changing fonts, altering text, resizing images, tweaking document structure, modifying layout, and making other stylistic changes to the document design; these drawings and highlights are applied to the overall page and its visual layout, not necessarily to specific selections within the page. For example, a suggestion to change the margin of a block of text is not about the text itself, but about its rendered position.

Caroline also highlights several good design elements in green, to encourage their colleague, and to approve and lock in those design elements for later revisions.

Caroline's annotation UA creates a raster snapshot of the whole page, and applies Caroline's annotations to the original document and to the raster snapshot version (or "web-clip"); the UA saves these annotations and the web-clip to the company's annotation server.

Later, Caroline discuss each change with their colleague Dale. Caroline iterates through each annotation or set of annotations independently, not all of the annotations at the same time, and shows both the live version and the snapshot, in case their is confusion; because the annotations were stored independently and not just as a single snapshot, Dale can look at them one at a time, and make individual adjustments which Caroline approves.

Scenario 4: Sticky Notes

User Elias creates a sticky note on a Web page, making a funny illustration of a passage of text on the page; Elias positions the sticky note right next to the text, and highlights the text. Elias then shares this note with two friends, Ferrad and Gil.

Ferrad uses the same annotation client as Elias, and sees the sticky note illustration just as Elias created it. Gil uses a different annotation client, which doesn't support sticky note display; instead, Gil sees the illustration in a sidebar, with the context text included as a caption; the same text on the page is highlighted when Gil taps the illustration.

Scenario 5: Instructor's Manuals

User Harper works for an educational publisher creating Instructor's Manuals for textbooks; Harper takes a snapshot of each page of a book, and adds arrows and overlays with additional information for the teacher. This additional information is created and stored as individual annotations, grouped into collections of books, chapters, and pages. These annotations are stored on a password-protected site for teachers.

User Indrie is a teacher; they have a digital copy of the textbook, and they download the instructor annotations for that book using their teacher credentials. Now, Indrie's copy of the textbook has all the additional instructor annotations, which they can toggle on and off.

Requirements

1. must be able to indicate the location of a user-archived version of a webpage
2. should allow arbitrary archiving URLs, formats, and protocols (e.g. should not require Memento protocol)
3. must provide a mechanism for representing and reproducing symbols or drawings on the rendered area of a document, with considerations for relative positioning of the drawings to the content of the page, to x-y scroll position, to zoom level, to rendered dimensions, to viewport, and to other relative rendering factors
4. must provide graceful fallback for annotations in UAs that don't support drawing or archiving

Proposals

The requirements for the major variations on this use case can be satisfied with a couple of new motives (motivations/roles), and a new selector type. Below is a strawman solutions set.

Area selector

This should be somewhat similar to area selectors for images, but perhaps with added characteristics for viewport, dimensions, scroll, and zoom of a document. It should indicate that it's a Web page, and not necessarily a traditional image, that it's pointing at.

Motives: Archiving and Drawing

These (possible) motives would capture the different aspects of this use case (1+2 and 3); they are orthogonal, and could be used independently, together, or with other motives.

archiving would satisfy requirements 1 and 2. It's most likely to be used on a target. The corresponding property value would be the URL of the archived version of the document/resource. I think the date of the archiving action could be derived from the annotation timestamp, so it wouldn't necessarily need its own timestamp, though could be an optional addition.

drawing would satisfy requirement 3. I don't know whether it makes the most sense as a target or a body; as a target it makes sense because it's highlighting specific sections of a document; as a body it makes sense because it could be additional new content, like handwritten notes or symbols. Opinions welcome.