Stop Gratuitous UI Animation
This mini essay will explore the over use of animation in UI design, show comparisons with early visual design and offer some suggestions for effective GUI motion design.
If you liked this article you may also be interested in reading about
effective prototyping.
We’ll also briefly explore how to improve on the following interaction.
Click here to interact with a live version of this demo.
Sadly, this interaction is not a contrived example of bad design, it comes directly from a recent client audit!
Introduction
Attitudes toward (digital) visual design have been evolving since the first raster graphics illuminated the original CRT screens of the 70s and 80s. Unlike other artistic fields, the trends that emerge in digital design are tightly bound to the evolution of the tools we work with.
We’ve seen device capabilities improve from the CGA’s limiting 320x200 resolution through VGA (640x480), SVGA (800x600) with display technology now quickly moving to 4k and beyond.
Visual Design Parallels
Motion design is experiencing similar growing pains that visual design experienced in the 90s and 2000s. It’s worth looking back at the way that visual design evolved to help us understand the current state of motion design.
It’s only natural that designers initially abuse new capabilities before a more sophisticated design language evolves. Anyone who designed for the screen in the late 90s and 2000s (web and CD-ROM) will remember incredibly overwrought designs which featured drop shadows, bevels, lighting effects and of course no consideration for white space. This was all a natural consequence of designers wrestling with a new medium and reveling in the glory of all those pixels!
Flat Design
Love it or hate it, Flat Design now enjoys overwhelming mind-share among designers. All major computing platforms have embraced variations of this minimalist design language (Android, iOS, OSX, Windows, Windows Mobile). It also dominates the fast paced world of web design.
Flat design is a demonstration of the maturation of visual design thinking. It is a natural progression which is partly driven by trends and fashion and partly a reflection of an industry of professionals finally coming to grips with the digital medium.
Motion Design
The current state of motion design can be compared to the Drop Shadow Era of visual design.
Animation capabilities have improved dramatically across the web driven by CSS transitions, hardware accelerated transforms along with coming standards such as JS Web Animations
In addition to this, increasingly capable, multi-core, multi-gigabyte, high DPI mobile devices can now comfortably output 60fps animated UIs.
Given the early state of UI motion design, it’s only natural that designers are tempted to add animation as visual flair, not unlike, drop shadows or bevels.
I’m confident that, unlike visual design, it won’t take 15 years for motion design to mature.
Overuse of Animation
Gratuitous animation can be seen everywhere and it’s not only limited to amateur designers. As a user it’s easy to spot this kind of animation. It’s the animation that gets in your way. The animation that makes you furrow your brow in frustration as it stands between you an your intended goal. As a designer you need to realize that your UI is not entertainment. Nobody is firing up your app (or website) to delight at all its awesome popup animation wonder!
Example of Poor UI Animation
OS X Full-screen Animation
There are countless examples of poor UI animation across both desktop and mobile. The OS X transition animation used when moving from windowed to full-screen mode is one such example. It’s particularly baffling since it’s such a central feature of a flagship product produced by a company known for its cutting edge design sensibilities.
Some issues with this UI animation include
- It’s slow
- It’s unnecessary
- It’s not customizable (without command line hacks)
How do you know when your UI animation is annoying? People write blog posts complaining about it. There are countless posts and forum questions dedicated to how to speed up or disable this interaction which is a good indication that the animated transition serves no purpose other than to irritate users, i.e. a UI motion design cardinal sin.
Motion Design Case Study
We’ll use a simple design that comes from some recent client work I did. This interaction incorporated a number of poor design choices.
Issues with this design include:
- a mask that blocks the UI
- no indication that an operation is occurring in the background
- slow animation
- unnecessary animation
One of the most annoying aspects of this animation is that it occurs after the time consuming network request completes, thereby adding additional wait time for the user.
Is Animation Necessary?
The first question need to be: does animation add anything to the user experience?
The above interaction is a perfect candidate for the good use of UI animation. The interaction requires a network request which can take anywhere between 100–500ms to complete. It’s a perfect opportunity for us to use animation to mask this time consuming request.
Design Improvements
Click here to interact with a live version of this demo.
This is a very minor improvements that adds a loading indicator that tells the user they are waiting on additional data, however the popup animation is superfluous and only serves to slow down the user flow.
Click here to interact with a live version of this demo.
The user sees the data they want without any unnecessary animation getting in the way. The use of a mask to block the user’s view is unnecessarily intrusive.
Animation — Smoke and Mirrors
Delays, even with network applications, can be reduced or even eliminated with caching and aggressive pre-fetching of resources. This has its own issues however. Users on limited cellular networks don’t appreciate it when you pre-fetch large amounts of data which may never be needed.
Given that delays can’t always be entirely avoided, animation can be used to give the illusion of a more snappy application. Animation layering can be particularly effective in this regard.
Click here to interact with a live version of this demo.
The improvements are
- the use of a non-blocking loading indicator.
- overlapping animation which distracts the user from the data fetch delay
Progressive Loading
Progressive loading can be used to further reduce the perceived loading time of data. Users almost certainly cant make immediate use of all of the data that your application will present to them. By chunking data downloads and presenting information as it becomes available, users get the illusion of a far more responsive application.
Click here to interact with a live version of this demo.
A number of commenters, including Isak Falch from userexperiencedesign slack community recommended the “expand card” approach to this interaction which I’ve had a go at implementing here as another alternative.
Thank you to all the constructive comments!
Click here to interact with the live version of the demo.
The very real benefit to this approach is that users maintain a sense of context.
Conclusion
We should be careful not to repeat mistakes of the past which valued form over function. Animation can and should be used to enhance the user experience of your website or application, however it’s very unlikely that a purely cosmetic animation effect will make for a better product.
Long running network requests offer a perfect opportunity to use animation as a form of smoke-and-mirrors which results in lower perceived wait times.
If you liked this article you may also be interested in reading about
effective prototyping.
