The Magic of Practical UI Animation

February 26, 2018 Alexa Tuskey

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

Easing

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 animation example

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

Secondary Action Gif

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

Anticipation animation

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:

Animation for your website

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.

Subscribe

The One North Ideas Update delivers each month’s latest posts on digital for PSOs—including industry trends, news and our latest research—directly to your inbox. Although it’s our goal to always include thought-provoking and compelling content, you can unsubscribe at any time. 

See our Privacy Policy to learn more about how we protect and manage your submitted data.

Alexa Tuskey Front-End Designer & Developer

As a Front-End Designer & Developer at One North, Alexa creates innovative and engaging digital designs for clients and One North marketing materials through creative insight and cross-department collaboration. Alexa brings an open-mind, an unbeatable attention to detail and fearless creativity to her role at One North. She enjoys being able to help her clients tell their story by interpreting their vision and bringing it to life within functional and creative designs.

  • Fun fact: I did my senior thesis on the evolution of hip hop music.
  • What did you want to be when you were little: The President of the United States

One North Interactive 
222 North LaSalle St, #1500
Chicago, IL 60601

+1 312.469.1740