UI Animation
A CASE STUDY OF USING
Paper, pencil and scissors to concept an animation
Shridhar Reddy
Role: Animator
Role: Animator
This is an example of a single day's work in problem solving. I was given an animation by the agency. From a UX perspective, it was quite functional - with the right amount of emphasis on customer input. However, it was deemed quite impractical from an implementation perspective - too many moving parts. I was asked to think through the animation and simplify it.
This animation was originally created in AfterEffects and shows the sleek native-app like richness of interaction. However, it was deemed impractical from an implementation perspective - too many moving parts that would slow down our mobile web experience. I was asked to think through the animation and simplify it.
I started by breaking down the animation into its core essence - a set of cards that are moving in Z-height. The first card has to rise up, move across and settle down while the other 2 cards move upwards.
This paper animation was really very useful in understanding the complexity and choices.
I tried various combinations of motions to judge the best way to simplify the motion across the foreground and background.
Working in my favorite animation tool - Principle, I worked out 2 rough concepts that minimized the motion while retaining the richness of interaction. The underlying assumption was that the 3 choices needed a single unifying background. This eliminated a lot of complexity for the developers so they could focus only on the motion of the text.
In this concept, I eliminated the motion of the selected card rising up and moving across.
In the second concept, I momentarily hid the unselected cards while they moved up into place, thus giving prominence to the selected card's motion.
The final concept was an adaptation
of the first concept at full resolution and with the timing mostly worked out.
The second and third cards were directed to their respective destinations.
By the end of the single day, I went from breaking down the problem with paper and pen, working out 2 concepts, got quick feedback from my boss, and moved into the final concept. It was an exhilarating experience in a state of flow.
Tools matter. Early in the day, I tried to work out the concepts in the original tool - After Effects. I gave up in frustration at its complexity and went back to Principle - it was the right tool for fast iterations and UI animation.