As we develop websites and web apps, part of the design for UI (user interface) and UX (user experience) is how we use animations. Animation is neat – it draws the eye to important elements and it looks really cool – but it can be overused. Often we are Goldilocks, having to taste the UI to figure out whether this app has too much animation, this app has too little animation, or this app has its animation just right.
In Stop Gratuitous UI Animation, Sophie Paxton offers a wireframed demonstration of a user interface that overuses animation, with a series of improvements that make the demo app work much more quickly.
She offers guidelines to help determine whether animation should be used:
* UI is not entertainment!
* Does animation add anything to the user experience?
* Does animation slow down the flow of your app?
* Do people complain about your UI?
The example below is Ms. Paxton’s demo for animation that interferes with the flow by masking the entire screen while information is loaded.
A clickable interactive demo is available in her article.
Animation can help change a user’s perception of a delay while the app loads information, but there are additional methods we can use to change that perception without adding distracting resource-hungry animations.
* Cache or pre-fetch data, as appropriate
* Load information in smaller “chunks,” and display each “chunk” as soon as it’s available
By using these guidelines and methods, we can find that just right sweet spot, where animation doesn’t interfere with using the app but adds that bit of polish to make a nice UI beautiful.