Fearless animations – moving users with motion

When I hear the word ‘web’ in conjunction with the word ‘animation’, I’m reminded of a more archaic web, one with Flash intros and ‘marquee’ tags – an era where animation was used rigorously to add ‘style’, as opposed to function or delight.

In moving away from such websites, we have a tendency to be fearful of adding animations and transitions, whether for delight, or to inform the function of the element.

It would be understandable to have this reaction, if we were not implementing the polar opposite on the fairly new medium that is designing natively for iOS, and more recently (with the new ideas surrounding Google Material design) on Android. This is not to say that we should be copying animation seen on native mobile apps across to the web, as simply replicating behaviours on two separate platforms seems inappropriate.

(By ‘animation, I should add that I am including small transitions, such as Apple’s ‘rubber band’ effect. In this context, animation is more closely linked to motion graphics than traditional animation in TV and film.)

The limitations of creating animations and transitions in the browser have been lifted considerably through the introduction of CSS animations and CSS transitions. What once required the use of JavaScript libraries to add animations, can now be achieved through pure CSS. This means that animations and interactions can be fully integrated into the web, assuming the user has a browser that supports the features needed.

Real-world interactions

Apple’s release of iOS7 championed animation as a supportive element to its design. Many of the animations and interactions on iOS enforce the tangibility of the device itself. Giving the user the ability to swipe down the ‘notification centre’, with its transition bouncing against the bottom of the screen, implicitly creates a structure within the phone – the phone becomes layered. Whilst the animation doesn’t wholly create the effect that the phone has ‘layers’, its addition supports the ability to simply ‘flick away’ the element, as opposed to running your fingers to the top of the screen. Not only does this interaction provide joy to those using it but it also supports the use of the feature without distracting or derailing its purpose – using the device becomes quicker due to the animation supporting the intended use of the feature. Small interactions such as this are present in apps we use daily.

Interestingly, simulating real-world interactions and animations that are familiar to us, such as the bouncing notification centre, tends to be, in my opinion, the most tasteful. One example of tasteful ‘real-world’ animation that adds value to a product is Jony Ive’s introduction of a sleep status indicator to the MacBook in 2008, where the blink rate was based upon the average breathing rate of an adult. Whilst not being inherently obvious, it adds familiarity and comfort that essentially shows to the user that whomever made the product cared.

MacBook Pro ‘breathing’ sleep indicator. (Image from MacWorld.com)

Delight for power users

Animation and transitions can also prove extremely valuable, and add delight, to power users. Here at Hassle.com, a recent project we worked upon was building a phone system using Twilio, to make, or receive calls to customers and cleaners. This piece of work is used every working day by the Customer Services and Recruit teams. One small piece of animation added was based around the ‘calling’ spinner when dialling out on the phone. The spinner took upon a real world type of interaction, referencing the phones of old with spinners being used to enter a number. Not only does referencing this real-world use make (I hope) the act of phoning more pleasant, but it also informs the user of the state of the app, showing that it is currently calling. Without this animation, the state would be much less obvious.

‘Calling’ animation used for Hassle.com’s Twilio interface

The experience of using a native app is one that is wholly richer and more enjoyable than how we generally experience the web. This is because we expect it to be so, both from a user perspective, but also to those those involved in developing and designing native apps and website – mobile is generally created to a higher standard of interaction and experience than the web. Bringing the quality of animation and transitions from mobile to web will be difficult, both from a technical perspective as well as ensuring appropriate standards and tastefulness.

Responsible implementation

There’s a certain level of responsibility that comes with implementing animations. Animations don’t have to always be functionally useful, as adding ‘delight of use’ adds value in itself – but there is the need to be appropriate, generally subtle and tasteful – we don’t want to add animations and transitions that overbear the user, and definitely don’t want these effects on every single element of a page as not only is it distracting, but animation then becomes purely aesthetic, without purpose.

As well as delight, animation and transitions can also clarify the use of elements. When both delight and support of use are combined and balanced well, it not only adds value but also also a level of quality to your website that shines through.
We should be adding small interactions and animations in our work where appropriate without fear of ‘adding too much’. Let’s transition to a web that is more appropriately interactive, with a level of rich experience on the web that matches that on mobile.