Reading between the lines

When my very good friend Holger approached me about creating a software that would ultimately help him to finish his PhD, I had no idea of the journey ahead of us. It was a string of challenges that eventually turned into Annotations — a Mac app that helps you collect and organise your thoughts on documents.

Working with numerous documents as part of your research, assessment or just as way to give feedback usually involves highlighting various sections of text. Often you’d put notes alongside, too. This quickly turns messy. Hence the question was; what is the best way to display all this information the user adds to these documents, so they can focus on their actual tasks?

As a designer and software developer, I have always been interested in understanding other people’s workflows to look how they can be improved. This was the perfect challenge.

Welcome to the world of everyone working differently

Before we started designing the first screen we talked to many people who could potentially benefit from Annotations. They work in different fields, use different methodologies but as it turned out, they have one problem in common: they often spend a lot of time creating (sometimes adventurous) workarounds to make software work for their needs.

This was similar to Holger’s initial problem. For his PhD in the social sciences, Holger had a large body of interviews he had conducted and transcribed, which he needed to analyse. In the past he would have printed the transcriptions, underlined and highlighted many lines, adding comments in between them. This quickly turned messy and using post-its hardly helped.

He looked for software that could assist him. Of the ones he found, some provided a vast amount of functionality he didn’t require and none seemed to go well with his workflow.

Instead he had come up with a — in my opinion very impressive — workaround using Microsoft Word, putting the entire interviews, copies of the relevant interview parts as well as notes into one document. I watched him work this way and noticed he spent a lot, and I mean a lot, of time scrolling up and down the Word document. Needless to say, he wasn’t satisfied by this system.

Where should they go?

Every single person we interviewed typically uses one or a combination of three ways to annotate documents; colour-highlighting, assigning a keyword and adding notes to a particular bit of text. As soon as we started exploring how to display annotations the key question became: where do we put them? After all, we wanted to make sure it’s always clear which parts of a document have been annotated and what’s associated to a given text range.

The initial approach was to keep them in line with the text. We positioned each annotation alongside the text.

But once two keywords were added to the same line of a document plus a note for good measure, it quickly looked like the messy desk with piles of post-its still fresh in our memories. It got worse once the notes become more comprehensive, making them very hard to read and edit.

So we started experimenting. We drew connecting lines between the highlighted text and the annotations on the right. In another approach we stacked them and adjusted their location while the user is scrolling the document. At some point we made the annotations snap to some invisible grid to avoid confusion. It wasn’t our finest hour.

Despite many iterations of this approach we just weren’t getting anywhere. The main problem with positioning annotations inside the document’s margin area was that it didn’t help to figure out which words they belonged to. It also distracted from reading the text.

Cutting loose

Eventually, we worked why putting annotations alongside a text was a messy affair. A document’s structure in no way indicates where and how many annotations will be added.

This was the moment when we scrapped our previous attempts and made an unusual move. We cut loose the annotations from the document. They were no longer aligned to the text. Instead, they form an entity of their own; a simple list that sits next to the document — each row representing a single annotation.

To make it easier to understand which bit of text is associated with an annotation, a small preview is included in every row, too. This way there’s no need to manually cross-reference every single annotation while browsing them. In the final interface we also added an icon to indicate the annotation’s type — highlight, keyword or a note. Tooltip-like overlays appear above the text when the mouse moves over a highlighted section, providing further assistance to quickly identify the corresponding annotation.

We moved the annotations to the left of the document to give a clearer sense of information hierarchy. Selecting one will jump to the corresponding part of the document. If required, documents can take a backseat and the annotations can get the user’s full attention.

Coming together

Deciding to pull the annotations out of the text and put them separately fundamentally shaped Annotations’ user interface as we know it today. Though seeming counterintuitive at first, we found this approach is the clearest, simplest way for users to store and find any number of highlights, keywords, short or wordy notes — or any combination of — without cluttering any documents.

The way of to display annotations was only one piece of the puzzle. Making it easy to organise and filter annotations or creating summaries was equally challenging. But try Annotations yourself to find out more. We would love to hear your feedback.