By Mark Di Sciullo

Done right, animation 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.

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.

“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 Haven’t Always Played Nicely in the Past

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.

Financial Services Application

Financial Services Application: This example ties in several animation best practices to create a seamless experience between devices. Apple Watch application concept by TandemSeven Principal Experience Architect Mark Di Sciullo

Animation Can Improve Today’s Multi-channel User Experiences

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). When considering the entire user experience, a well-planned “Skeleton Screen” animation will put the focus on the progress, not the indicator. Design expert Luke Wroblewski goes into detail about Skeleton Screens and other useful techniques to make an application feel faster through the use of animation.

Skeleton Screen Animation: Use skeleton screens to make applications feel faster loading content. Skeleton Screen animation based off of Luke Wroblewski's video, "How to Avoid Loading Indicators."

Skeleton Screen Animation: Use skeleton screens to make applications feel faster loading content. Skeleton Screen animation based off of Luke Wroblewski’s video, “How to Avoid Loading Indicators.”

Disney’s 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 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.

Disney Animation Principles – The Illusion of Life. This brilliant video 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.

Slow in and out principles of animation

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 the most meaningful motions are the most subtle. In other words, animation should be felt, not seen.

2data-menu-app gif

Data menu app: Financial services application design by TandemSeven Principal User 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.

Integrating Animation into your UX Design Workflow

Storyboard Sketch-principles in animation

Sketching: Simple storyboard sketches are a great way to start the animation process

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.

A

Animated Wireframes: Low fidelity animated wireframes can quickly illustrate possible interactions. This interaction was created in Adobe After Effects.

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).

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 CodePen.io. There are plenty of 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. Then, Adobe After Effects can be used to animate and composite the final motion concepts.

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 completing what they intended to do. Animation that seems excessive will obstruct app flow, decrease performance, and distract users from their task.

Gooey menu image

Looping Menu: This looping menu is an example of animation that enhances an app without being annoying. Gooey Menu interaction concept by Mark Di Sciullo.

Additional references and examples to learn more:

Employ the latest user-centered designs using our Experience Design Services.

Disney is a registered trademark of the Walt Disney Company.

Related Posts