When viewing a document, a major aspect to Annotare is the ability to highlight and annotate the document. Currently the user experience works as such:
Creating a Highlight or Annotation
Workflow:
The user selects a range of text with their cursor.
The user then navigates to the toolbar at the top of the page and chooses to either just highlight the selected text, or highlight the selected text and create a note.
If the user chooses to highlight the selected text, then their selection disappears and the previously selected text gets wrapped in a <span> tag which has a CSS class of highlight associated with it.
If the user chooses to create a note to associate with the selected text, then a small modal window slides down with a textarea which they type their note in. Upon completing their note, the modal disappears, the previously selected text is now wrapped in a <span> tag which has a CSS class of highlight associated with it -- notice, the same styling as single highlight -- and an aditional <span> tag is inserted into the document with a class of note-detail which contains the annotation entered by the user.
The reason I've documented the process like this is for two reasons:
It shows that if a user adds a note to a part of the document, he also highlights the text.
It also shows the modal experience of entering a note.
I'd like to change both of those things.
Proposition:
From the user's perspective, he should be able to create a note without also highlighting the text if he so chooses. They should be separate options that a person can choose independently. Now, I feel that some visual feedback that a section of text has a note associated with it is important as well, but it should be different from the visual styling of a highlight.
I also want the experience of annotating to be more inclusive to the reading experience. Referrign back to the document they're commenting on is a key part of the way a person takes notes. So pulling them out to a modal interface is unnecessarily jarring, especially in a mobile or tablet context.
When viewing a document, a major aspect to Annotare is the ability to highlight and annotate the document. Currently the user experience works as such:
Creating a Highlight or Annotation
Workflow:
<span>tag which has a CSS class ofhighlightassociated with it.<span>tag which has a CSS class ofhighlightassociated with it -- notice, the same styling as single highlight -- and an aditional<span>tag is inserted into the document with a class ofnote-detailwhich contains the annotation entered by the user.The reason I've documented the process like this is for two reasons:
I'd like to change both of those things.
Proposition: From the user's perspective, he should be able to create a note without also highlighting the text if he so chooses. They should be separate options that a person can choose independently. Now, I feel that some visual feedback that a section of text has a note associated with it is important as well, but it should be different from the visual styling of a highlight.
I also want the experience of annotating to be more inclusive to the reading experience. Referrign back to the document they're commenting on is a key part of the way a person takes notes. So pulling them out to a modal interface is unnecessarily jarring, especially in a mobile or tablet context.