5 tips when animating for digital products

It's easy to go get carried away with motion and over do it. Here are a few helpful tips to keep in mind when animating for digital products.

1. Meet users expectations

We want to minimize the gap between what the user expects and what they experience. How users perceive what an object is when it comes to weight, position, rigidness and how it behaves. If motion is made well in terms of timing, speed, easing and how it feels, it becomes invisible and seamless. If it doesn’t make sense; if it’s too fast or linear, it breaks expectations and distracts. This is a place where skeuomorphism still lives, in the easing, behaving according to real world physics. Linear easing looks weird and unnatural if I swipe very quickly. If I throw a ball with full power, the ball wont fly through the air in a steady slow speed, it will have easing to it.

2. Don't distract or make the user wait

Sometimes there is room to do elaborate animations with longer loops, like empty states and splash screen. Then there is other occasions where we don't want to distract the user, or make them wait for an animation to finish. The loader is one of those examples. The loop shouldn't be longer than 1.5 sec or something like that, preferable shorter. Think about what mode the user is in, do they want to be dazzled and delighted, or are they in the middle of completing a task or solving a problem.

3. Every keyframe should tell the user something

Every choice you make in your animation will convey something to the user. Even before the user registers what these objects are, the designer has already communicated through motion. If element are moving into the screen, how you group them will effect how to user perceives what is clickable and what belong together.

4. Treat it like a choreographed dance

Think of a transition like choreographed dance move. First the content on screen moves out, text goes first them image a bit slower, then in comes the new image and lastly the new text. The last thing to move is where you want the users eye to land. Aim to remove as many steps as possible or combine steps to make the motion less messy and the transition faster. Plan your animation by sketching it on paper in steps; use classic storyboarding. Then you can start removing or merging steps, decide what steps are very fast and what steps are slow.

5. Be creative

Try to imagine there is no rules, forget everything you know about classic UI. If you where to invent the new rubber band effect, or the new dropdown menu, what would it be? Motion is not only easing and bounces, it's a whole new layer to UX and it opens up for new ideas. When you start to think about not only the static pages, but what happens in between them in transitions, everything appears in a new light.

For all inquiries

© 2020 by Hanna Edghill AB