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:
- One creates a new annotation, and opens the sidebar.
- One makes a highlight.
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:
- Make a selection, click the popup adder.
- 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]
- A highlight can become an annotation or comment.
- An annotation can become a comment or highlight.
- A comment can become an annotation or highlight.
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).
