Our experience and impression of a product are shaped by a combination of factors, with interaction playing a key role. In fact, the details of interaction design and animation make a fundamental difference in modern mobile apps.
“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
Well thought-out and tested interface animation is able to support fast and easy interaction, and has the potential to fulfill multiple functions. In this article, we will consider the role of animation in modern mobile user interfaces, as well as its functions and usability.
You might also like: 4 Trendy Visual Design Techniques.
Why is animation important for mobile user experience?
Animation has a special role in interface design, as one of the most important tools of successful interaction. It can be said that without animation, there cannot be interaction. People are mostly visually-driven creatures, meaning the force behind the picture, which is worth a thousand words, gets even stronger with the help of animation.
Animation breathes life into the process of interaction, and is especially good for mobile apps that have to be developed with limited screen estate, while providing an informative and functional interface.
Major types of animation
There are two major types of animation in modern user interface: functional and delightful.
Functional animation is subtle animation that we embed in a user interface design, as part of the process. The goal of functional animation is to help the user better understand what’s going on and how to use your app most effectively.
Delightful animation is focused on user emotions. The goal of this type of animation is in entertaining the user, and bundling a brand’s values into a product.
Functional animation tells users a story about how the app works. It suppose to:
- Build meaningful transitions
- Provide visual feedback
- Show system status
- Help the user get started
Let’s take a look at these in more detail.
1. Build meaningful transitions
Transitioning between two visual states should be clear, smooth, and effortless. A well-designed transition helps the user clearly understand where their attention should be focused.
User interfaces are often based on static displays — a series of displays that each show a new state of the system. State changes in such UIs involve hard cuts by default, which can make them difficult to follow.
In cognitive science, this is called change blindness — when sudden change prevents users from noticing new information. With all these complex interactions and possibilities in mobile apps, users can quickly lose context; if visual changes in the user interface are sudden, users can lose an understanding of the interface. This problem can be seen in the example below.
It is unclear how the new view is related to the old, because no transition occurs and there isn’t a clear focal point.
Functional animation fills the comprehension gaps. Animated transitions work as intermediaries between different UI states. Designers can use animation to smoothly transport users between navigational contexts, and explain changes in the arrangement of elements on a screen.
Zoom-in (or parent-to-child)
Most transitions are hierarchical in nature. Zoom-in transitions are movements between a high-level view, to a detailed view.
Such interaction is commonly seen in lists, image galleries, cards, and item selectors. A user selects an item, and they immediately see the detailed screen that is associated with that selection. Animation for this interaction allows the user to maintain context: when elements lift up and expand, the visual change indicates a shift in focus, from parent to child elements.
In certain cases, designers are forced to design an action button whose functionality changes under certain conditions. Due to the fact that mobile screen estate is limited, we often see icons that serve dual functions in designs. “Play”/”Stop” and “Hamburger”/”Back” buttons are probably the most common example of switchable buttons.
Animation in this case shows how an element changes when a user interacts with it. Transforming the menu icon into the back arrow, in example below, signifies that the two actions are connected, and that one cannot exist while the other is present.
2. Provide visual feedback
Visual feedback is crucial for any user interface. It makes users feel in control, and for the user, control means knowing and understanding their current context, in the app, at any given time.
Enhance the sense of direct manipulation
In the physical world, buttons, controls and other objects respond to our interactions with them. People expect a similar level of responsiveness from user interface controls.
User interface elements, like buttons, should appear tangible, even though they are behind a layer of glass. To bridge a gap, visual and motion cues should acknowledge input immediately and animate in ways that look and feel like direct manipulation.
Visualize the result of action
Visual feedback is also helpful when you need to inform users about the results of an operation. Animation is able to reinforce the actions a user is performing.
In the example below, when the user clicks “Submit”, a spinner briefly appears before the app shows the success state. Checkmark animation makes users feel like the process has been completed successfully.
3. Show system status
There are always a number of processes happening backstage in your app (e.g. data is being downloaded from the server, calculations are taking place). Such operations always take some time.
As a designer, you should let a user know that the app isn’t frozen and indicate the status of its ongoing process. Visual signs of progress give users a sense of control over the app.
Loading time is an unavoidable situation for most digital products. But when we can’t shorten the line, we can certainly make the wait more pleasant. While animation won’t solve the problem, it definitely makes waiting less of a problem.
A well-designed animation, such as a “Skeleton Screen” in the example below (left), can be used to replace an annoying spinning load indicator (right), which basically just reminds the user that they’re still waiting.
A well-known animation for this group is the “pull down to refresh,” which initiates a process of content updates on mobile devices. Pull-to-refresh animation should match the design outline of the app — if the app is minimal, the animation should be as well.
If an interface features a lot of elements, it can be desirable to shift the attention of the user to a specific element on the screen. Motion, by its nature, has the highest level of prominence in a user interface. Neither text paragraphs nor static images can compete with motion. Designers can take advantage of this property to grab the user's attention.
You might also like: [Free Webinar] Meaningful Animation for User Experience.
4. Help the user get started
Animation can guide and teach the user how to interact with the interface.
User onboarding demands a flawless user experience. Some apps have a complex structure, and if you don’t want to frighten users, you should explain how an app works at the very beginning.
Good animation throughout the onboarding flow has a strong impact on how first-time users will engage with the app. It teaches users how the app works in a much more interactive way than a text description or video tutorial.
Good user interfaces never rely on the user’s intellect to figure out how to operate with it. Functional animations can be used as cues, guiding beacons, or visual hints that assist users to better understand how to interact with a app’s interface. Visual hints are especially needed in designs that contain a unique navigation method.
For example, a quick one-time animation can demonstrate how certain functionality in the design is suppose to operate.
What is user experience? Many believe that user experience is all about usability (how a product works), but actually UX is about a lot more than the “ability to use” something. UX is in fact all about feelings.
“Delight” is a word that we’re hearing and using more often to describe pleasurable moments in our products. Delight is the magic that makes us fall in love with a product. It’s a core element to strive for when designing. And animation can make user experience truly delightful and memorable.
Let’s look at a few ways animation can help create delightful moments on mobile.
1. To demonstrate polish
With so many best practices in mobile design, things start to look awfully similar. Nobody likes boring design. When everything looks the same, animations can make the key difference. Users do notice the details. Details make your app or website interesting — they are powerful little things that make your design stand out and create truly memorable experiences.
2. To reward the user
Focusing on user emotions plays a huge role in UI interactions. As Aarron Walter said in his book Designing for Emotion: “Personality is the mysterious force that attracts us to certain people and repels us from others.”
Make the interface experience feel like there’s a human on the other end, not a computer. Reward the user with an animation when they accomplish personal goals. For example, when a user reaches inbox zero, create deeper engagement with app features using animation.
Rewarding is a truly emotional interaction: positive emotional stimulus builds a sense of engagement with the user. People forgive the app’s shortcomings when you reward them with positive emotion.
You might also like: 6 Animation Libraries to Save Time and WOW Clients.
3. To bring personality and humanity
Personality is key in creating memorable experiences. It’s personality that helps drive brand awareness. When there is a personal connection, there is an emotional connection. Users are able to like the brand, because those subtle animations let me see the people — the real human beings — behind the app or website. Interfaces that can tap into emotion effectively not only create a broad fan base, they build an army of evangelists.
Animation can also help users express different psychological moods.
4. To entertain users
Animations have the power to encourage users to actually interact. It can transform familiar interactions into something much more enjoyable. Attention to fine movements can delight and surprise the user, and create a sense of superb craftsmanship. Well-designed animations make the experience feel crafted.
What you should remember when designing you animation?
Animate with purpose.
Animation is powerful when used in a sophisticated way. But with great power comes great responsibility. When deciding to use animation in your app, use it only when it has meaning, and won’t distract the user from successfully completing what they intended to do. Remember that the best animations are those that seem natural, and don’t draw attention to themselves.
You can easily test the animation. Michael Villar suggests the following testing method.
“If you disable animations, the flow should feel broken; if it is not, this might mean your animations are superfluous. ”
Unfortunately not all animation can pass this test. The animation in the example below is a bit superfluous, in that it could be removed without breaking the flow.
Keep longevity in mind
Keep interactive content simple and design for repeated use. Ask yourself a question: “will the animation get annoying on the 100th use, or is it universally clear and unobtrusive?”
Done right, animation has a huge impact on user experience. It can turn a digital product from a sequence of static screens, into carefully choreographed dynamic experiences.