Written by Mark DiSciullo February 2015.
“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.
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, 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.
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.
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.
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 amaturish, rigid and janky.
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.
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
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.
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).
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.
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.
Additional references and examples:
Interface Animation Workshop - Mark Geyer
Animation for Attention and Comprehension - Neilsen Norman Group
UI Animation and UX: A Not-So-Secret Friendship - Val Head, A List Apart
Smart Transitions - Smashing Magazine
12 Principles of Animation Examples - Cento Lodigiani
How to Avoid Loading Indicators- Luke Wroblewski
How to make Apps Feel Faster - Luke Wroblewski