Animation and the User Experience

Animation and the User Experience

Written by Mark DiSciullo April 2015

animation and the user experience

“We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content”.- ZURB Foundation

Animation and UX, strange bedfellows.

In the past, animation and UX have never really been on good terms with each other. Many of us still recall the dark ages of animation on the web. Obscure navigation interactions, annoying banner ads, Flash intros (remember the “skip intro” button?), and the infamous <BLINK> tag were all the rage.

Today, huge advancements in technology and a more thoughtful approach to human centered design, have sparked a renewed interest in the use of animation to improve the user experience.

Why Animation…now?

With the increase in native applications, robust motion UI frameworks and an ever increasing browser support for 2D and 3D transforms in CSS, now is the time to consider leveraging what motion can add to the user experience. Done right, micro-interactions can improve the user experience. It can influence behavior, communicate status, guide the users attention, add affordances, and help the user see the results of their actions.

Animation also can have very practical purposes too. It can make the experience feel faster by convincing users that things are loading when in fact they might not be yet. Animation can be used in replacement of an annoying spinning loading indicators (which basically just reminds reminds the user that they are waiting). A well planned “Skeleton Screen” animation will put the focus on the progress, not the indicator. Luke Wroblewski goes into detail about Skeleton Screens and other useful techniques to make an application feel faster through the use of animation.

skeleton screens for faster feeling applications
Use skeleton screens to make applications feel faster loading content. Skeleton screen animation based off Luke Wroblewski video “How to Avoid Loading Indicators”

The Principles of Animation

To animate is “to bring to life”. By breathing additional life into our designs through the use of animation, we can add meaning and function to the experience. Apple’s iOS Human Interface Guidelines state that when animation is done well it can:

  • Communicate status and providing feedback
  • Enhance the sense of direct manipulation
  • Help people visualize the results of their actions

There are a few basic concepts that one must understand in order to make animation feel convincing. Two Disney animators, Frank Thomas and Ollie Johnston wrote an amazing book called “The Illusion of Life”. Within this book they define the “12 Principles of Animation”. These principles show us the subtleties that make the difference between a very mechanical movement and one that feels real and authentic. What’s amazing is these fundamental principles, which were originally intended for animating characters for film, are applicable for properly animating objects within the digital user experience.

This brilliant video from Cento Lodigiani provides an overview of the 12 animation principles outlined in the book “The Illusion of Life”.


Walt Disney and team spend a lifetime expressing how the most minute detail of motion should be analyzed and understood in order to make a movement feel believable. Objects in the real world have mass and weight. These objects also must follow the laws of physics in regards to inertia, speed, bounce or velocity. People can easily tell the difference between mechanical movement and something that mimics the behavior in the real world. Animation that lacks this attention to detail, detracts from the overall user experience and makes the UI feel amateurish, rigid and janky.

Comparing easing
Slow In and Out: Often referred to as “easing” in the digital world (ease-in, ease-out), this is how to make objects appear to follow the laws of inertia. It’s nearly impossible for an object to move at a constant rate of speed from start to finish and them abruptly come to a stop.

How to Animate a UI like a pro

Within a digital user experience, motion should provide meaning and should not break the continuity of the experience. Even as objects transform and reorganize on the screen there should always be a seamless, natural flow. Sometimes of the most meaningful motions are the most subtile. In other words, animation should be felt, not seen.

iWatch Concept
Financial Services App – As objects transform and reorganize on the screen, there should always be a seamless, natural flow. Apple Watch application concept by TandemSeven Principle Experience Architect Mark Di Sciullo


Google’s Material Design guidelines do a great job of explaining the role animation can play in context of a digital user experience.

  • The motion of a UI element should always feel authentic – Accelerate objects swiftly and decelerate them slowly to avoid abrupt changes in velocity. Physical objects have mass and move only when forces are applied to them. Consequently, objects can’t start or stop instantaneously.
  • Animations should be used to provide feedback – Buttons and objects on the screen should respond to the users input to build confidence that the application is responding. Responsive interaction elevates an app from something that delivers information to the user upon request to something that communicates with the user in a tangible way. It also encourages deeper exploration of an app.
  • Transitions should be meaningful – A well-designed transition enables the user to clearly understand where their attention should be focused. Think about how the user’s attention should be directed. Be discerning about the animation you decide to add: consider how moving a certain element adds clarity and delight to a transition. Just as important, consider if the motion is just plain distracting, if so, remove it.
  • Attend to the details – Users do notice the details. Attention to fine movements can delightfully surprise the user, increase a brand perception,convey an emotion, and create a sense of superb craftsmanship.
Financial Application: Using Animation to tie the entire UX together across various devices.
Financial Services App – This financial application for a TandemSeven client uses animation to tie the entire UX together across various devices.


Integrating Animation into your UX Design Workflow

The best place to start with animation is to sketch out a simple storyboard of the motion. This can be on paper, on a whiteboard or in an app such as Sketchbook Pro. This is typically done in conjunction with other design activities such as while creating wireframes. A storyboard used in conjunction with a set of annotated wireframes will help explain the motion to a client and how it will be incorporated into the over all UI experience design.

ui animation storyboard
Simple storyboard sketches are a great way to start the animation process.


Prototyping is the absolute best way to convey how you intend to use motion in your design. Tools such as Invision and UXPin include built in collections of basic transitions and movements. Prototypes created in Axure can also simulate motion through the creative use of the “Wait Time (ms)” action in conjunction with the wide range of included events (OnClick, OnPageLoad, OnMouseEnter, OnDrag, OnSwipeRight, etc).

Animated wireframes Mark Di Sciullo

For more robust animation prototyping, the Foundation for Apps framework from ZURB includes a Motion UI library for rapidly prototyping UI motion in a more realistic and responsive development environment. Also, another great place to get started animating UI components with CSS and Javascript is at There are plenty of UI animation samples that you can play around with, copy and fork and use in your own projects. It’s a great place to poke around and get inspired while learning some code.

When creating high fidelity compositions, tools such as Adobe Photoshop, Adobe Illustrator, Affinity Photo or Affinity Designer can be used to create the initial design elements. From there, Adobe After Effects can be used to animate and composite the final motion concepts.

Menu interaction concept
Menu interaction concept by Mark Di Sciullo.

The Final Frame

Animation is powerful when used in a sophisticated ways. But with great power comes great responsibilities. When deciding to use animation in your application, strive for realism and credibility. Your users can easily feel disoriented or ill when they experience motion that doesn’t make sense or appears to defy physical laws. They will be completely annoyed when it’s overused. Use it only when it will have meaning and will not distract the user from successfully complete what they intended to do. Animation that seems excessive will obstruct app flow, decrease performance, and distract users from their task.

Gooey Menu Concept
Menu interaction concept by Mark Di Sciullo.
Additional references and examples:

2 thoughts on “Animation and the User Experience

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s