Motion can assist in both functionality and aesthetics and creates another layer of character and polish that breathes life into an otherwise static experience.
Animation is no longer solely limited to promoting B movies on Flash websites. Rather, animation is quickly assuming a useful and important role in user experiences. Now, users can rely on animation instead of static visual cues to guide them through an app or web experience.
As designers, our job is to create a pleasant and positive experience for the user. To fulfill this goal, we have animation in our tool box. Motion can assist in both functionality and aesthetics and creates another layer of character and polish that breathes life into an otherwise static experience.
As original Disney animator Ollie Johnston said, “You’re not supposed to animate drawings. You’re supposed to animate feelings.”
This statement applies both to drawing and interface design. Though interface designs require text and button animation instead of drawing animation, the principle of inserting emotion into the design remains. After all, we’re not just making text move across the screen, we’re choreographing the hierarchy of the page.
Since the launch of Material Design, iOS 9, and others, there has been a surge in the implementation of motion graphics. Because of this increase, we believe animation should be treated with the same respect that we treat other aspects of interface design. Below, we’ve established several principles to illustrate animation’s importance.
3 Guiding Principles
Orientation
Easily the most obvious benefit of motion in user experiences, orientation connects apps from one state to the next. Animation visually links the app’s orientation using contextual transitions. Its use creates a sense of space to where the user currently is and where he/she will go. If done correctly animation provides additional context to users, rather than implementing additional graphics to explain a user’s location within the app.
This example shows how animation helps users navigate content without losing their bearings in the app. New information flows in and other content fades away smoothly. This format allows users to never wonder where the app took them and makes it easy to navigate back.
Perceived Speed
Motion can make websites and apps appear faster and more responsive than they actually are. To a certain degree, actual speed does not matter but perceived speed means everything to the user. If the user believes they are enjoying a fast experience, then he or she is likely to wait more patiently for content shifts.
These animations walk the user through the process while holding the user’s attention as it goes through the steps. If you think back to an instance where time felt like it was moving slowly, it was probably because there was nothing to hold your attention. Having something to do, or something to hold our attention, helps us pass the time by not thinking about the time passed. Holding our attention coupled with quick and concise easing leads to a perception of speed.
Emotional Response
Motion also adds another layer of depth to an interface’s character, which invokes a higher emotional response than static visuals. When one thinks about an individual’s personality, one thinks about body language and how the person moves. Movement and individual energy are integral to someone’s personality. The same can be said for how one perceives the motion in an interface. Bouncy, wiggly animations give a fun and quirky impression while concise and smooth easing gives the impression of a slick, calculated character.
The icons in this example have a bouncy follow-through, which gives the interface a fun and pleasant personality. This light-hearted motion best compliments a soft and rounded style but can be appropriately integrated into many different UI designs.
3 Keys to Success
In addition to animation’s guiding principles, we have outlined three key tips to executing successful interface animations.
Visually Connect Transitions
It is imperative to visually connect transitions to provide context and orientation for users. The user’s journey should always be apparent. Where the user came from, where they currently are, and where they are going, should be clearly outlined. If a user clicks on a button and something new appears, the object should be animated from the original object’s point of origin. If done correctly, animation will easily build a user’s mental map of the architecture without the need for additional explanation.
The content box in this example morphs into the next screen. This transition illustrates to the user that the item he/she clicked on becomes what it is going to be.
Animate Hierarchically
Designers can ensure that motion supports the information hierarchy to show what content is most important by creating a path for the user’s eye to follow. By choreographing the hierarchy of the page, users can easily identify the most important content in less time than it would take them with static designs.
This is a simple use of page choreography. Each item cascades in separately allowing the user to instantly focus on what is most important.
Keep it Quick and Concise
All motion should be quick, concise, and intentional. While motion can make an app feel faster, it can also have the opposite effect if it is poorly executed. Animations should complement the experience and not hinder or slow a user’s progress.
This example illustrates a simple open and close of a modal. The modal slides in quickly accompanied by a radial mask expand of the close button to call attention to it. All elements come in quickly with no unnecessary motion, efficiently guiding the user from one state to the next. If we were to draw this motion out or add in any extra animation we would be impeding on the user’s progress, especially in the case of a modal.
Interface animation, as it stands today, is in its infancy compared to industry standards for visual design exercised by today’s agencies. As interfaces become more complex, animation will become more important to simplify and enrich user experiences. Along with the rise of flat design, animation will play a bigger role in bringing out the voice and personality of a brand or experience.
Give your designs life and animate!
About the Authors
Nick Schiefer and Drew Hansen are UX Designers at EffectiveUI where they co-lead the Animation Department. Since receiving their BFAs from the New Media Design major at Rochester Institute of Technology, they have both been applying their expertise on projects for companies such as TIAA CREF, Comcast, MWI Animal Health, and Wells Fargo among many others. Utilizing their well rounded skills in visual design, animation, and interaction design, Drew and Nick continue to expand their design knowledge and hope to inspire others along the way.
About EffectiveUI
This article first appeared on the EffectiveUI blog.
EffectiveUI is the go-to UX partner for high-technology companies, including industry leaders within aerospace and aviation, biotech and healthcare, consumer and industrial electronics, defense, energy, financial services, software and telecom. In making technology more useful, useable and desirable, we help our clients reinvent significant aspects of their business, from the experience they provide to customers, to the tools used to streamline operations, to the products brought to market. We work collaboratively with clients to solve complex business problems and drive transformation through four tightly integrated areas of expertise: user research and insight, digital strategy, UX design and UI development and integration. Learn more at EffectiveUI.com.
