What animation taught me about UX design
An animation is a process of making movies with drawings, computer graphics, or photographs of static objects, where animator creates multiple images, known as frames, which give an illusion of movement called animation when displayed in rapid sequence.
Animation magic and reality
Animation is one the most magical worlds you could think of, yet animators are crazy to make it realistic. To create believable emotion. Imaginary reality might be highly stylized but realistically recognizable. Animators create the worlds not necessarily matching the real world, however, some aspects are way more real. To create perfect motion, in collaboration with physicist, animators deeply analyze the motion of a particular object or movement. How physics principles affect the coat of a landing superhero. For example animators of The Megamind have tested various coats and landings. Different thickness and length of fabric fall differently, for this reason they have collaborated with professors of physics. The Megamind world might not match our world but it definitely creates believable emotion.
In my bachelor thesis, I was looking for answers to how imagination and reality correlate in animation. Why the smallest unrealistic detail distracts us and may lead to abandoning the creator’s work because some not realistically displayed motion distracted our unconscious reality and hence believable emotion has vanished. No one questions flying pig in the animation world, but if pig flies not in the way we perceive flying, hmmm…
Back then professor told me: imagine your room, you could cross it with your eyes closed in the dark, knowing all the smallest objects around you. Now imagine someone has changed the setting of your room. You have suddenly been brought back to reality. Suddenly I am questioning flying technique.
Inbetween and usability testing
In university, my most demanding and joyful classes were animation classes. Demanding because of complexity (you will see) and details you have to look over. Joyful, well, because of the magic moment you create and nothings is impossible feeling.
To better understand complexity I feel the need to give a quick overview of technicality. There are 24 frames (still images captured that still looks smooth enough to look real) required for a second of film. Typically animator doesn’t draw 24 images. Animation movement can be done in 12 drawings. Apart from 4 main key poses, it’s up to you how many inbetweens you will draw. Inbetweens are drawings that create an illusion of motion. However, too little inbetweens brings danger of losing realistic movement.
A walking cycle in animation has 12 steps. Key contact points, passing, high points (take a look at the image above) and the rest are inbetweens (missing numbers 3,6,9,12). After many hours of working, the walking cycle takes overall 1 second. Sounds familiar?
You as UX designer may happen to design experience of a few seconds, for a user to complete the task or reach the goal. You act as an animator knowing exactly how to draw 12 steps before and test in between to bring seamless realistic artifact to a user. Despite that, key steps are the most important but without inbetweens, it looks unrealistic, exaggerated, unbelievable.
In parallel with UX, you should conduct usability testing iteratively as much as it takes to bring the best seamless functional experience to the user.
Besides, it’s important to draw two guidelines at the beginning. Two parallel horizontal lines. These lines will guide character not to drift too low or too high.
Here is my first walking cycle. Looks like the character is having hiccups, I know, but I was pretty proud of it. Obviously, something went wrong with inbetweens and character lost guidelines at some points. There you go, visual representation to your stakeholders of what happens when you decide not to follow or set guidelines from the beginning. Just kidding, but they say visual language is more powerful than words.
Animation character and a persona
Animation does not stop at perfect believable movement. Animators breathe in life to their characters by creating emotion and personality.
When designing a character, we were asked to divide characteristics to three lists: actions he does, physical and character features. To which list would you place the sentence: my character smiles a lot? Physical, action, feature? I used to mix this and place in character feature, however, this is physical characteristic because animator has to draw it. Smiling is a physical appearance of being happy therefore correct way to say is my character is happy (character feature).
As for the UX world, personas are fictional characters, which you create based on your research to represent the different user types. Could you relate to animator when you are listing attitudes, motivations, goals, pain points of your user persona? I hope you do :)
UX designer as animator
For me, UX people are like animators. Creating a walking cycle of UX, knowing where to draw key contact points, empathize with the user, finding characteristics. How many inbetweens, usability testings are necessary to create functional design. Being able to brainstorm like anything is possible, later bringing all the ideas down to earth.
So what animation taught me about UX?
Test test and test. Turn back, find a flaw and improve it so that flaw doesn't disturb the user at the end.
Draw and follow guidelines for a smooth project cycle.
Innovate. Use imagination, make it visually appealing but always, always integrate the solution with the user’s natural environment.
Be patient and care for the viewer (user). One second of smooth animation will take hours of your time.
Research your character. Why he smiles, how he smiles, what his smile brings to the story.
It’s been awhile from my last drawn walking cycle, but the experience still goes in hand when walking the UX project cycle.
References:
physics in animation: https://www.youtube.com/watch?v=h6iu7e7jS1o
Images and recap www.angryanimator.com
