To understand animation we need to know a little bit about how animation was discovered and how it evolved into today’s moving images. An animation is the illusion of movement by arranging still pictures over a certain amount of time. In the 1800s a gadget called phenakistoscope was invented, a disk with narrow slots that could spin on a stick. These disks were used in front of mirrors. The reflection made it seem like the illustrations on the disk were moving. It allowed users to experience these short animated clips, just like today’s animated gifs. Think as this circle being a timeline, every square is a keyframe and as we spin the wheel with a certain speed as a result we see an illusion of a moving picture.

A timeline is a visual representation of a sequence of frames on a horizontal line. Every frame is a part of the motion so, the more frames you have in a timeline the smoother and slower your final motion will be. Fewer frames produce quicker and sharper motion. We can animate pretty much any visual property on the screen that would serve our purpose. Like an objects position, color, shape, opacity and size.

Just like crafting a good experience, letting the user know what your UI is doing inside the structure of your product is an important part of digital design.

See the moving shape above? what do you see when you look at it? Probably a ball bouncing on the ground, a ping-pong ball maybe? But it feels heavier, then maybe a basketball? What we actually see is a digitally created shape moving up and down with a certain amount of velocity. It‘s not a ball, but our mind deceives us into thinking as one. It relates to the objects that we see in the real world around us, constantly comparing and trying to make a meaning. Giving that familiar feeling of feedback is an essential part of what we do as designers, since we’re designing a digital world that we otherwise can’t feel and relate to.

The visual feedback we get from the -ever so subtle- glowing blue hue of our screens affect our understanding and our interactions. If we enter our password wrong while we’re unlocking our phones, it’ll shake it’s head telling us we made a mistake, giving us fast and helpful feedback. We immediately understand this because we see this gesture in our everyday lives and we can relate to it.

When an object in the real world starts to move, it will not reach it’s top speed instantly. It will gradually build up speed and continue moving. Something as simple as adding ease to an object that stars to move actually mimics the real world. It makes the movement seem realistic and we as users relate to these interactions much easier.

In the example below, during an incoming call, the button is struggling to move up, this visual feedback guides the user to swipe up. we would understand this even if there were no text.

Animations aren’t necessarily meant to make things look cool, when used thoughtfully, animations can add contextual information where there is none. It can hint what is going to happen after an interaction, help guide the users focus, distract them from the events happening backstage and give visual feedback when an interaction is made.

Depending on how we interact, these actions can engage or confuse a user. To send our message in a clear way we should consider minimizing the gap between what the user expects, and what they experience. These interactions can be happening in, during or after an interaction has been made.

Although the idea sounds very tempting, motion should be mainly used to deliver a message, strengthen an idea or make the interface more usable. It’s a tool that captures the users attention and provides visual feedback that guides them in the flow. If used efficiently it can help users relate to our product and make it feel unique.