User interface design: Why motion matters

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.

2

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:

  1. Animations help users understand the flow between two states.
  2. 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.

  1. Animate exclusively opacity and transform properties (animating other properties, like width or height, requires too much processing power and can slow things down)
  2. Keep animations fast (usually around 300ms)
  3. Animate things independently
  4. 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.

skeuomorphism

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.”

Links

Tags: , , , , , ,

About the author

Justin Cone

/ justincone.com
Together with Carlos El Asmar, Justin co-founded Motionographer and F5. He currently lives in Austin, Texas with is wife, son and fluffball of a dog. Before taking on Motionographer full-time, Justin worked in various capacities at Psyop, NBC-Universal, Apple, Adobe and SCAD.

Join Motionographer on Patreon!

For as little as 7 cents a day, join our Patreon community and shape Motionographer's future!

  • I love the idea of the white lies that make the app feel more responsive. It reminds me of this old piece about Instagram’s UI:
    http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed

    • Great article! I hadn’t seen that before. Thanks for the link.

  • Check this talk from Marcus Eckert.

    I really hope dev kits include more bezier support so we see more sexy interactive motion design.

  • There are cases where CSS rendering can only get you so far as switching between some views there are non-deterministic cases (e.g. clicking on a list item and animating that into the header of the new view, how do you from from A to B, where A could be anywhere?).

    Paul Lewis introduced the FLIP animation technique:
    https://aerotwist.com/blog/flip-your-animations/

    The technique is about pre-calculating animations.

    You do that by triggering relayout for the starting view A and the final view B, you can then calculate dimensions and positions, then you reset to A and animate/transition into B using that information.

    (E.g. I know where the clicked list item is versus the final position of the header element, I can now animate a copy of my list item into the header element and achieve a clean Material Design esque animation)

    Currently working on a library called Choreography that makes use of the technique and the new Web Animations API combined.

  • User would love to look and browse when the interface design is comfortable and responsive. They found it easy each time they use it. It is where there’s an interaction with the user and the apps.