Our Interface

Our project aims to allow the collaborative evaluation of information on the web. Our entry point is a website annotation tool. At this stage, there are a few goals for the interface.

We must make it easy to annotate text

Just highlight the text you would like to annotate, and click on the pen icon to get started.

A sidebar slides out, showing the excerpt you highlighted and an empty editor. The editor shows the annotation as it will appear once submitted. The annotation as edited appears pretty much like it will when saved.

We must design for high volumes of annotation

Imagine the Bible after ten years of annotation by the world. There might be tens of thousands or millions of annotations on it. How would we navigate them all?

A large number of users must be able to annotate on a page without the display of all these annotations becoming confusing. This rules out the “sticky notes” style, where annotations are shown at the place on the page they were made. With thousands of annotations on a page, the notes would quickly pile up and become unintelligible.

Another approach that has been tried in the past is to show that a particular piece of text has been annotated by highlighting it on the page – then the user rolls over the highlight to see the annotation.

While interesting, this has the same fundamental issues as the stickies approach. If there are only a few annotations on a page, it’s easy to see what has been annotated and click on the highlight to view the annotation. If there are many annotations, it quickly becomes almost impossible to sort through the piled up highlights and find an annotation in a passage that has been annotated many times.

The heatmap

What we need is a way to allow the user to see what parts of a page have been annotated, and the relative density of annotations on a page. The solution we’re working with is a heatmap that is shaded to show annotation density with pointers overlaid in places where there are a cluster of annotations. Here’s how it looks:

The pointers show the number of annotations on any part of the page. Hovering over one highlights the annotated passages on that part of the page. A key advantage of displaying annotation counts in pointers is that they can easily scale from one annotation to thousands – and users can quickly see how many annotations there are in any place at a glance. This avoids issues of highlights or “sticky notes” piling up.

The bucket view

When a pointer is clicked, it displays all the annotations it references as summaries in a sidebar. We’re calling this view the “bucket view”.

Because it shows summaries of all annotations in one part of the page, you can easily get an idea of the discussion in that area. Right now, the annotation summaries are sorted chronologically, but we’ll quickly be adding additional sorts, and eventually when voting and reputation are incorporated, you’ll be able to sort by quality as well. The objective is to let users easily see the best annotations on any part of a page just by clicking on the associated pointer.

The detail view

If you’re interested in one of the annotations, one click slides out its detail view.

The detail view focuses on one particular annotation. The source excerpt is shown at the top, with the annotation and its discussion below. By providing a separate view for each annotation we give the discussion surrounding any individual annotation enough space to develop, without cluttering the bucket.

The distinction between the bucket view and the detail view is important for our interface to be able to handle high volume annotation. By inserting the extra step of the bucket view between the source page and the actual detail view of the annotation, we give users the ability to sort and preview annotations before opening the full detail view. This way, we can handle a high volume of annotations with a high level of discussion, without annotations getting in each other’s way.

Users must be able to find their past annotations

It is essential that people have a way to look back at the annotations they have made. The “my history” view lets you do just that. It shows all of your previous annotations from any page in a chronologically ordered list. From here, you can refer back to annotations you have made previously for your own reference.

Annotations must be shareable

We want you to be able to show friends and colleagues annotations, share them on social networks, or post them in a blog. Clicking on an annotation’s “Share” button exposes a link to that annotation. If someone clicks on this link, one of two things happens. If they have the Hypothesis extension installed, they will be taken to the source page with the sidebar open to the annotation and the page scrolled to the right spot.

If they don’t have the extension installed, the source page is displayed in an iframe with the annotation alongside it in a scaled-back sidebar (we are not able to do as much in this view as we can in our extension because of cross-site scripting restrictions).

If someone is referring back to their own annotations (or the annotations of others), they may want to export them into a simpler format. We’ve made it possible to view your annotations in a printable format with a minimum of styling and interactivity. We’ve left out everything but the context and the annotation itself. In this view, you can look back at annotations in static plain text. Print them out. Take them to the park!

What do you think?

We hope that this interface is a good starting point for the conversation, and will be moving to user testing early next year. In the meantime, feel free to get in touch about what you’ve seen here, or consult information for developers.