Animation stands as a key differentiator between native and web-based experiences. As the lines begin to blur between “native” and “web” apps, animation is becoming more and more important to building a web that can meet user expectations. Many roadblocks have stood in the way of an animated web, but we are overcoming them one by one, and a host of new tools are now at our disposal.
In this talk, Rachel Nabors looks at how animation helps people interact with touch screens, how those same principles apply to the web, and where animation has been all this time.
Let’s play a game called “app vs site”!
Web apps have all kinds of stateful animation, but sites often vary from apps. They may have high fidelity of typography and colour but still vary a lot with animation, or the site may simply have no animation at all. AirBnB and Amazon are examples where the animation varies a lot.
It is possible to have a 1:1 app:site relationship with animation – Duolingo does a great job, even though the form factor is different the experience feels the same as well as looking the same.
Rachel runs webanimationweekly.com (and its slack channel) which are a good resource for getting started with animation.
Before we get to animation… let’s consider the brain! Well actually first a little grounding for animation, then the brain.
At its core, animation is the visual representation of a rate of change over time. It’s a visual doppler effect. You can get this effect by speeding up a sound (example video of a zebra crossing with beeps that speed up when you need to hustle).
Animation can be used to reinforce relationships, structure, cause & effect… in UI this helps the user understand the experience.
Meanwhile the web is working purely with jump cuts. No animation, things just appear and disappear. This makes sense because when the web was being built, computers didn’t have the grunt for lots of animation. But it hasn’t caught up in the decades since.
So, the brain. Cause and effect: when one thing follows another, we think the first causes the second. We also mentally fill in the blanks of transitions. Because we stare at screens all day, we can understand a jump-cut dropdown… but it makes the brain work.
If animation is provided, the brain effectively offloads it to the visual cortex. The brain’s GPU. It’s the high road through the brain. It means you can handle more information and tasks, because your brain is not actively processing as much.
(This is a simplified description, there are deeper details about the way the brain works – but just go with it ;))
Animacy: how “alive” something appears to be.
Human attention can be grabbed by two things: colour and motion. We are deeply wired to not eat the dangerously-coloured things and to notice the movements of dangerous things approaching. To abuse this, make an ad bright and jiggly!
We are more likely to notice a colour change in the centre of our field of vision; and more likely to notice animation at the edges. So in the middle of your app, it will be better to use colour. On the edges, animation.
But don’t overdo anything: New Yorkers do not notice the overwhelming amounts of animation at Times Square any more. When everything vies for our attention, nothing commands our attention.
A brief history of the web: in 1996 we had Flash, then in 1999 we had SMIL… then a decade passed… then in 2009 we got CSS animations and transitions. Then we got the infamous letter from Steve Jobs which basically killed Flash. Meanwhile Microsoft decided three APIs was too much and wanted to replace SMIL+animation+transition with the Web Animations API. It is good, but it took many years; and SMIL died out in the meantime.
The Web Animations API has awesome stuff in it like the ability to sync multiple animations; seeking fowards and backwards along a timeline…
rachelnabors.com/waapi for details…
Support? It’s happening, please keep voting for Edge features on uservoice… in the meantime there’s a polyfill (web-animations-js).
So animation is an official part of the frontend developer toolkit. Firefox and Chrome have good dev tools for animation.
- greensock.com (aka GSAP) – the big one, does DOM and SVG
- ibm.com/design – they went to the IBM museum and recorded the motion of old IBMdevices like typewriters”
What else can we take from animation to the web? Storyboards. They are used in film, why not for the web? Animatics – the frames from a storyboard just strung together with a soundtrack. Note they are not deliverables or good for user testing. They are great for buy-in and for explaining things. You need prototypes for that.
Great prototyping tools:
Systems like Material Design showed animation could and should be a core part of a design language.
Animation belongs to all of us now.
Let us set the web in motion together.