110 Interactions for Editing Annotations on Bounceapp.com

wrote this on in . 5 reactions

Inspired by Bill Scott's talk here at ZURB we decided to use his Interesting Moments Grid to try and communicate part of Bounce's annotation feature.

After creating an annotation there are a number of interactions required to facilitate adding text and editing its position and size. We need to communicate both the available functionality and provide a means to use it.

Design Through Iteration

We started by taking the existing image annotation from Notable and implementing it again with the absolute minimum feature set. We then added the features needed for Bounce and played with it. There were clearly some interactions that we were missing so we added them and played with it some more. We repeated this until every moment of the interaction felt good and communicated what we wanted it to.

The Interesting Moments Grid

To better visualize all these moments we mapped them on an interesting moments grid. This method involves taking the actors and the events, and then defining what happens at all the intersections of the two sets. Once a annotation has been created in Bounce there are ten actors:

  • The entire annotation
  • Mouse cursor
  • Annotation shadow
  • Overlay border
  • Resize nubs
  • Number
  • Note bubble
  • Note text
  • Note textarea
  • OK button

And eleven events (because you can't just make ten louder):

  • Mouse hover inactive annotation
  • Mouse hover off inactive annotation
  • Click inactive annotation
  • Click off inactive annotation with text
  • Click off inactive annotation without text
  • Mouse hover active annotation
  • Text area populated
  • Text area emptied
  • Click OK button
  • Annotation removed
  • Delete icon clicked

That gives us 110 possible Interesting Moments of which only 29 have that truly interesting quality we're looking for. We mapped them all out in this grid for you visual consumption.

Minute to Learn, Lifetime to Master

Keep in mind that these are just the interactions for an existing annotation. We also had to consider how an annotation is created by a click versus a drag. The size of the drag also warranted some attention since a really aggressive mouse click could potentially be registered as a drag.

The grid may look a little sparse in some areas but that's OK. The goal is not to try and fill in every box but to provide a methodical way of thinking through all the potential interactions.

Screen shot 2016 08 15 at 4.40.25 pm
Transforming the Lives of Adults With Disabilities Through 24 Hours of Design
Zurbwired2016 zurbwired
#ZURBWired 2016: We Are Live!
Every Day Is A Great Hair Day for Our New Video Producer

It has 4 comments.

Bryan (ZURB) says

This is an incredibly useful technique for engineering teams to show the rest of their team all the decisions need to be made for a "simple" feature.

Mike (ZURB) says

I like it. A great way to make sure you are thinking about overall senarios and impacts... now if i could only get meebo to load on a VPS without it crashing all the time..

Fred Almeida (ZURB) says

I really like Bounce. Will share it. Its a brilliant app that just satisfies a need - especially at a creative agency! Thanks guys! Awesomeness!

Mario (ZURB) says

This one's pretty nice too, http://markup.io/