[annotator-dev] UX/UI improvements

Marc-Antoine Lemieux marc at marcantoinelemieux.com
Thu Sep 25 20:14:26 UTC 2014


Here's the behavior I am talking about for the overlapping bubbles (
https://dl.dropboxusercontent.com/u/11784435/Selection_021.png). To be
clear, there's always only one Editor bubble shown. It's the interactions
with the Viewer and the Adder that are problematic. I also made sure it was
instantiated only once.

As for the disappearing selection, I don't know what I can show you... it's
only that the selection is "lost" when entering the comment and we had user
that came back to us saying it was confusing and they'd prefer to have the
selection there while they enter a comment.

About the jumpy experience, we also had feedback from our users saying that
when they hover an annotation and they mouseout and mouseenter against, the
Viewer is just jumping from one place to another instead of staying in
place. We had a similar comment about the Adder that appears where the
cursor is instead of on a relative position to the annotation. We currently
have a fix that is not working <= IE9 but it provides us an experience
similar as the one on https://medium.com/. (gist of our solution:
https://gist.github.com/lemieux/9470dcf998bfe90d4a45) Basically, it display
the Adder icon always on top center of the annotation.

About the display manager, it was only an idea on how to manage that stuff.
Currently, it seems to me that plugins are "fighting" against each other
for mouse events, display, etc. and I'm not too certain on how one plugin
should tell another to hide or to move.


Marc-Antoine Lemieux

2014-09-25 15:30 GMT-04:00 Randall Leeds <tilgovi at hypothes.is>:

> On Wed, Sep 24, 2014 at 1:07 PM, Marc-Antoine Lemieux <
> marc at marcantoinelemieux.com> wrote:
>
>> Hi guys,
>>
>> we are currently using Annotator for one of our features at Radialpoint.
>> We are currently using code in the master branch (I know I know we are
>> crazy...) and we are currently on a UI/UX polishing blitz and obviously,
>> AnnotatorJS is in the scope of that blitz.
>>
>> We observed some quirks in the way the lib is displaying the bubbles. For
>> instance, when I try to create a new annotation and I hover an existing
>> one, if it is close enough they will both overlap. Also, displaying the
>> bubble when the cursor ends up make the experience "jumpy" and
>> non-consistent. We have also noted the fact that the selection disappears
>> when you enter edit mode (which I understand since it is a native browser
>> selection) and we have feedback from our users that it is kind of annoying.
>>
>
> I'm having trouble understanding. I thought only one bubble could be
> visible at a time. If I'm not wrong about that, then it sounds like maybe
> you're instantiating Annotator multiple times? That makes sense if you're
> doing it on separate elements, but then I'm not sure how you could trigger
> a mouseover on both.
>
> Can you provide a jsfiddle or something that demonstrates what you're
> seeing?
>
>
>>
>> What I'd like to know is if you guys have anything on your roadmap to
>> tackle these things, like some sort of display manager to ensure that
>> bubbles are not overlapping and maybe some sort of temporary highlight to
>> keep selection during creation. If it is not on your roadmap, we'll
>> probably take action immediately and implement the fix ourselves.
>>
>
> I'm not aware of any plans like this, but I'd be happy to talk with you
> about the issues more. I'm hesitant to say that some sort of display
> manager is necessary to accomplish what you want, but I could well be wrong.
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/annotator-dev/attachments/20140925/0d0c0cb2/attachment-0004.html>


More information about the annotator-dev mailing list