For a presentation at CSSConf Australia 2015, Benjamin De Cock (no jokes, please) shared insights gleaned from years as an interactive designer with a penchant for animation.
In his current role as a User Interface Designer at Stripe, a popular payment processing platform, De Cock develops and applies best practices for animation that apply to fields beyond just UI design.
Developing best practices
After exploring the excesses of user interface animation in early projects, De Cock came to appreciate the power of subtlety. It’s a familiar pattern to anyone who’s discovered the joys of animation. At first, you just want to make everything move, never asking yourself if it should move.
So when should you animate something?
While good animation obviously adds professional polish to interactive experiences, De Cock believes there are two main reasons for animating UI elements:
- Animations help users understand the flow between two states.
- Animations can make your application feel faster.
In Stripe’s Checkout app, turning on “remember me” activates a completely new view in the interface. De Cock carefully animated the individual UI elements to ensure that the user doesn’t lose context during this shift in the application.
In another example, De Cock reveals a “lie” that the Stripe app tells users when they’re verifying their account:
Although it looks like the app is communicating with a server and verifying the successful transmission of a text message, in reality the animation is just buying time. Stripe has no way of knowing a text message has actually been received, so the animation is long enough that the probability of a text message being received by the end of it is very high.
This sort of benevolent lying goes a long way to making an app feel responsive, regardless of what’s actually going on behind the scenes. As De Cock says, “Actual speed barely matters. Perceived speed truly matters.”
Four rules for web animation
For user interface design, performance and speed are everything. As De Cock says:
Having just one part of your animation that doesn’t run at 60 frames per second is basically going to kill the entire smoothness of the animation — not just for that specific part. The human eye is unfortunately extremely sensitive [to] that.
De Cock has developed four simple rules for UI animation that take into account the current limitations of real-time rendering.
- Animate exclusively opacity and transform properties (animating other properties, like width or height, requires too much processing power and can slow things down)
- Keep animations fast (usually around 300ms)
- Animate things independently
- Always use custom easings
The last rule is one that applies to animation in general. De Cock says to avoid using “stock” animation easings and instead create your own. In the world of broadcast motion design, mastering the graph editor (in any animation package, not just AfterEffects) and learning how to numerically control your animation are crucial to breaking out of mediocre animation skills.
Skeuomorphism and animation
Skeuomorphism is the practice of emulating the look-and-feel of real-world objects in digital interfaces. Apple famously had a long love affair with skeuomorphism, as evidenced in earlier designs for apps like Calendar and Find My Friends.
Faux leather textures and photoreal stitching are both skeuomorphic design elements that attempt to create the illusion of analogue materials within a digital context. In recent years, designers have rejected skeuomorphism and moved onto “flatter” design languages like Google’s Material Design.
But De Cock warns that we shouldn’t throw the baby out with the bathwater.
In the real world, nothing is flat obviously. And I think that losing that component [of depth] in software design is an unfortunate over simplification. 3D actually helps a lot in understanding how objects behave and how they relate to each other. So it seems to be a good idea to get inspired by the real world to build our apps.
Good UI animation can be inherently skeuomorphic, since it often uses the principles of real-world physics to achieve a sense of familiarity with the user. And physics is timeless — it’s not a passing trend.
For example, the subtle 3D rotation in this Stripe interaction echo the same head shaking you’d expect from a human when you’ve made an error. This almost subliminal use of animation humanizes an application with skeuomorphic movement, adding warmth and friendliness at a subconscious level.
Diving under the hood
If you want to get into the nitty gritty of CSS animations, watch the entire De Cock talk. Around the 10-minute mark, he gets into specific coding practices for producing subtle, effective animations with the best performance possible. (He also makes the case for embracing JavaScript as a trigger/event framework in coordination with CSS-based rendering.)
In De Cock’s words, “Code shouldn’t hurt your creativity. It should enhance it.”