The Magic of Practical UI Animation

They say there’s magic in everyday things, and who knows that better than a typical web user? The most successful and engaging websites know how to leverage the right kind of animations to guide and communicate with users, without overwhelming them or alienating them from the overall experience; with quality, and not quantity.

 

It’s time to stop thinking of animations as the finishing touch to a nearly-completed website, but as a powerful and dazzling tool that enhances communication, engagement and overall user experience from the very beginning.

 

Let’s consider animations from a classically magical approach. In 1981, Walt Disney animators Ollie Johnston and Frank Thomas wrote The Twelve Basic Principles of Animation. Based on industry-leading techniques coming out of Disney studios throughout the 20th century, Johnston and Thomas broke down basic characteristics shared by the most successful and beloved animated moments in film.

 

These characteristics are absolutely still relevant to us today and serve as guiding principles for the most user-friendly and engaging of digital UI animations. To highlight just a few:

 

Ease In & Ease Out

 

 

Natural objects need time to speed up and slow down; they don’t just mechanically jump from one position to the next. Easing helps transition between states to feel more realistic and natural.

 

Timing

 

 

Timing is, well, everything. In order to help animations not feel instantaneous and rushed, timing allows us to set the overall “mood” for the animation and cultivate the proper emotion. Fast, zippy animations can help portray youth, exuberance and a contemporary feel, while slower and more gradual animations feel sophisticated and elegant.

 

Secondary Action

 

 

Sometimes an important action can benefit from a smaller, simultaneous expression to support and bring the entire experience to life. This helps engage the user and draw their attention positively to an overall experience.

 

Anticipation

 

 

Users aren’t always a patient bunch, even when waiting for the best content to load. Little distractions like these can help build excitement and keep their eyes on the prize.

 

When animations are rendered carefully and correctly, they become a helpful and evocative source of delight for your users. They invite an emotional connection to your product which can be effective in guaranteeing return visits.

 

However, like with most good things, we must be cautious about their usage and do so only when appropriate, unless you want your site to resemble a remnant from the 00s .com boom:

 

 

 

 

Sarah Drasner one of the web’s foremost and best UI designers & developers came up with a great checklist for practical and effective animations:

 

• • What information are you trying to convey that can’t be done with UI design alone?

 

• • What information does the user need to understand where they are going?

 

• • What is the most subtle effect (in this case, for the push of the button)?

 

• • What feelings are you trying to evoke (anticipation while the button loads, positive feedback when the form is successful, etc.)?

 

• • Are the pieces of the UI accessible to screen readers?

 

 

When we make the mistake of sprinkling animations on top of an existing design instead of incorporating them from the beginning, we ignore the needs of our users and our design lacks empathy. The best animations are engineered from the start, involving interactions with users from the first step until they leave satisfied at the very end. True magic can be found in the engineering of a successful and well-designed experience.