Interaction Design – 2009-12-09

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


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.

Read the rest of this entry »