Annotation, Highlight, and Comment Creation

The goal here is to greatly simplify the workflow for creating annotations, highlights, and general comments. This will serve to reduce complexity and improve ease of use. We also need something that works for mobile and screen readers too.

Highlight and Annotation Creation

Popup button (Desktop Only)

Rather than having a highlight mode there should just be a quick way to make a highlight. We could remake the pen popup to support two buttons:

Here is a drawing of the basic idea:

Keyboard Shortcut

Another way to create annotations and highlights could be keyboard shortcuts. This would be good for accessibility as screen readers won’t have to navigate the dom looking for the button.

Making annotations (Mobile only)

For mobile we can’t use the desktop adder since Android and iOS present their own popup menus. Instead we can have the highlight and new annotation button pop out of the toolbar when a selection is made.

This behavior would only happen on mobile.

On Hover Toolbar (Desktop only)

On desktop, the toolbar could still be hovered over. But would only show the “New note” and “Show Annotations” buttons. Note the highlight button is gone because it doesn’t make sense to show it in this context any more.

Comment Creation

Toolbar

We keep the toolbar method of creating an annotation.

Keyboard shortcut

Again, with accessibility in mind it should be easy to create a new note with a keyboard shortcut.

Turn a comment into an annotation, and vice versa.

An important change to the editor: being able to add or update a selection

Many applications have multiple ways of achieving the same result. In order to make everything one workflow there are different ways a new annotation can be started:

  1. Make a selection, click the popup adder.
  2. Start a new note and then add a selection.

The later will be new. In essence we add the ability to add a selection to a note. Based on previous user testing, I noticed some people actually clicked the plus button rather than the popup adder. They then wondered how to create an annotation.

With the ability to add or change a selection, they can never get to a state where they have to delete their annotation and start over.[1] 

Comment Creation with add selection added to the editor

Annotation with ability to remove selection

It then reverts to a comment, with the ability to add a selection.

How others do it…

Windows 8.1 Reader app annotation--essentially the same two buttons as proposed above but in reverse order + copy (because touch focused).

2015-01-26 10_36_24-Greenshot.png


[1] There is already an issue open for being able to change the selection. This approach improves our workflow and solves this issue.