2020
5 tips when animating for digital products
It's easy to get carried away with motion and overdo 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 won't 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. First the content on screen moves out, then in comes the new image and text and lastly the action button. 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 are no rules. Forget everything you know about classic UI. If you were 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.
