line
Interaction Design – 2009-12-09

Roll Over Beethoven – Mouse Interaction, Hit Areas and the importance of good Timing

rollover_beethoven

As Ajax, JQuery and other technologies have enabled more dynamic states in our designs. The consequences of this is often overlooked. Changing states on mouse interaction and using varied forms of animation to guide users through these transitions requires planning and proper execution.

UI animations are good for clarifying what is happening, avoiding jerky/disruptive changes of state and allowing the user to comprehend the new state faster. To do this properly means setting the right values for your animation and defining good hit areas. This is not only crucial for the experience at the point of interaction but will also set the overall feel for your site as a whole. I have jotted down a few basic guidelines my work tends to follow.

Latency

As in many aspects of life waiting is not how we want to spend our time. Delays in our daily commute or waiting for images to load are seldom described as positive experiences. When it comes to webpages make sure you have your elements loaded and ready to present upon interaction. Milliseconds count.

Animation

Getting the length of animations right is important. A rule of thumb is to always strive for directness and never have the user feel like they are waiting for the UI to finish. Anything above point five of a second is really slow (unless we are talking entire page transitions). The same does not have to be true for an outro animation when the users focus has changed to other elements.
In some cases conveying messages through the behavior of the animation can further enhance the overall feel of the UI. This can be achieved by using different “easings”, algorithms that calculate acceleration and deceleration of the animation. Always use such sparsely and with good judgement. If you think it “looks cool” you have probably over done it. Setting these values and the proper timing requires restraint and practice.

Staying on target

Defining the size and location of the hit area when making a rollover action is a fine balance. On one hand you want to be generous so that there is not too much precision involved in triggering the event. On the other hand if the area is too generous it might be triggered unintentionally and become annoying. For example if your page contains multiple overlays of information you might not want use a roll over event to trigger them. The result could be a blinking mess of layers being shown and hidden. Look at how you can define and expand your hit areas with the css box model.
There is also some science behind doing this right. If you want to dive in at the deep end read up on Fitt’s law which predicts that: “the time required to rapidly move to a target area is a function of the distance to and the size of the target”. The time required to wrap ones head around that sentence should not be underestimated.

How do we go about communicating these details?

Annotating wireframes with animation data can do the trick for less complex projects. Though that approach can soon become messy, complicated and less than self explanatory. The best way to assure you get this right is by building interactive prototypes. A topic I intend to write more about in the future as I progress with my experiments and work.

We have also been looking at incorporating the behavior of animation into the brand identity manuals we produce. Defining some fundamental values of interactive elements on a strategic level is important. Leaving it up to every animator/programmer to define for themselves will not result in the holistic experience we want to achieve for our clients users. This is a interesting and so far quite difficult work in progress. I hope to be able to share more details about it at a later date.

Summary and conclusion

Taking these factors into account and following the guidelines should help your highly interactive webpage become a more pleasant experience to use. Remember to:

  • Not keep your users waiting.
  • Use your animations to help ease users into new states or UI elements.
  • Strive for directness in your animations.
  • Ask yourself what message your animations convey and if they should say anything at all?
  • Do these things properly or hire someone who knows how to do them.

Thats it and just in case you did not get the nerdy reference here is Chuck. Now go tell Tsjaikovski and your friends the news.


2 Comments on “Roll Over Beethoven – Mouse Interaction, Hit Areas and the importance of good Timing”

  1. 1: Jesper Bylund said at 12:49 on January 26th, 2010:

    Great post, can’t be said often enough. Though 0.5s is also quite slow.

    Btw I just have to say how much I love how Apple uses animation in OS X contrary to windows and linux. Win and Lin uses animation as a form of eye-candy while OsX uses animation to hide actual loading times.
    The effect is profound, but rarely used for some reason.

  2. 2: Fredrik Lindersson said at 13:56 on January 26th, 2010:

    Thanks for the feedback. I just saw another great example of animation guiding users through transitions. Check out how Chrome for mac animates new tabs on Command + T. It is fast, enhances the metaphor and makes all kinds of sense compared to adding new tabs in Safari. (which hogs cpu and freezes the window for a 3D-effect that adds absolutely nothing to the experience)


Leave a Reply