110 Interactions for Editing Annotations on Bounceapp.com

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.