SXSW Interactive 11. – 15. mars i Austin I tillegg til å være musikk- og filmfestival, er South by Southwest også 5 dager med konferanse for kreative sjeler og teknologi-interesserte. Foreløpig er Bruce Sterling og grunnleggeren av 4chan.org på plass. Web 2.0 Expo 28. – 31. mars i San Francisco Årets konferanse vil legge særlig [...]
Animation: a little goes a long way 9
I’m a big believer in the details make the difference in how a product is perceived. One of these details is animation. “Animation” may sound like a dirty word to those wary of years of flash intros and websites with questionable, unnecessary use of movement, but used the right way can enhance your product in subtle but important ways.
These days of course we already see user interface animation used liberally in mobile apps and across the web, thanks to the ease of use of libraries such as jQuery and more prevalent support for CSS3 transitions. This post will be somewhat technologically agnostic, but rather concentrate on how to make good use of animation. Used well, a little animation can make your product feel tactile, solid and polished.
I see 4 key considerations when deciding if and how to use animation:
1) Should I use animation at all?
To answer this, I would first ask myself: does it help the user understand what’s happening in a specific interaction scenario? An example of this could be on a mobile device with a navigation list that opens up from a “hamburger” menu in the header. Maybe the menu button links to an open navigation at the bottom of the page. Without animating there, the page simply jumps to the bottom (view at mobile width) and the user might feel lost. A quick animation while scrolling down helps the user understand where on the page they are. In this particular case the length of the page might also be a consideration on whether to animate or not.
Will the animation get in the way or unnecessarily delay something the user is trying to achieve? I sometimes see simple hover states on buttons using an unnecessarily long animation to change colour or lift up, etc. Most of the time, I would prefer that these types of interaction would be better served with a simple on/off state.
2) Does the animation make sense?
Even though we design for the screen, if it doesn’t feel right physically, maybe it needs to be adjusted or taken away. An example of this could be on Paravel‘s site. Though nicely implemented, I feel the hover animation should “lift up” rather than “push in” as it currently does. The “pushing” could be reserved for when the user actually clicks.
3) How should an animation be implemented?
(Hint: this involves easing)
More often than not, I see animation implemented in a rudimentary way. For example, when opening an expandable menu on a mobile device, a linear animation (view at mobile width) might be used that lasts half a second. Yes, the animation explains what happens when you open a menu, but it feels wooden and somewhat awkward. All it takes to make an interaction like this feel really polished is some tweaking of the duration and “easing”.
For those of you who haven’t come across the term, at a basic level, easing describes how the animation speeds up or slows down over time — in my opinion this is critical to pulling off a nice feeling animation.
The scope of this post doesn’t encompass all of the different ways you can use these, but know that tweaking the duration of an animation from half a second to 300ms with an ease in and out can make a really big difference to the feel. In terms of my previous example of a drop down menu opening, this kind of easing in and out would make the interaction feel silky smooth. When hiding the menu, perhaps an “ease in back” could be used to pull the menu slightly in the opposite direction first, then send it out quickly. A masterclass in use of subtle, clean animation and easing can be found in the iOS game Letterpress.
There are many other good examples across the web, but a couple of recent ones that stand out to me are the open & close navigation on etchapps.com and the left & right page navigation on usatoday.com. On the latter example, you will notice the subtle difference between the left and right button animation. Pressing right to go forwards results in a smooth ease in & out, while left to go back presents a slight ease back first, emphasising the direction change.
I would consider the USA Today site as being on the edge of just enough/too much use of animation, as it is a fairly heavy site. This issue leads on to …
4) Performance & compatibility
There are some caveats with using certain types of easing, like “elastic” and “bounce” due to their processor-intensive nature they may not appear smooth on all devices & browsers, so some caution (and taste) should be used.
I hope this post has brought some awareness to the way animation is and can be used in web sites and apps. I haven’t gone into too much detail but would be happy to discuss further in the comments! Go forth and animate, responsibly.
Of course, I’m also a sucker for really nice little details that don’t necessarily tie into a particular interaction. I think it’s sometimes OK to go a little crazy, as long as we’re not distracting or delaying the user from their goals on the site.