Just a decade ago, user interfaces that used animations were avoided, being most often associated with websites with pop-ups and flashing ads, but this has changed in the meantime. Today details of interaction design and animation make a fundamental difference on modern websites and in modern apps. This mindset shift is clearly expressed in the Zurb’s quote:
“We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content.”
If we are to design better digital products, then we need to embrace the interactive nature of the app and websites from the very beginning.
Why Animation Works?
Motion, by its nature, has the highest level of prominence in a user interface. Neither text copy nor static images can compete with motion. Our eyes are hardwired to pay attention to moving objects—it’s almost a reflex. We can take advantage of this with this functional animation group.
What is Functional Animation?
A functional animation is a subtle animation embedded in the UI design as a part of the functionality of that design. It has a very clear and logical purpose:
- Reduce cognitive load
- Prevent change blindness
- Establish better recall in spatial relationships
In a human-centered design approach, where the user is the prime focus, a user interface needs to be intuitive, responsive, and human. Functional animation helps you achieve these goals.
How Functional Animation Helps You Improve UX
Our experience and impression of an app or site are shaped by a combination of factors, with interaction playing a fundamental role. Adding motion to our design can be meaningful and functional—when we find the right circumstances. Well thought-out and tested functional animation has the potential to fulfil multiple functions including:
Visual Feedback on User Actions
Good interaction design provides feedback. Feedback acknowledge that the system has received a user’s action and demonstrates the result of the interaction (whether it was successful or not). The animation in this group needs to be very subtle and should be designed responsively.
In real life, buttons respond to our interaction, and this is how we expect things to work. In order to be predictable for the user digital interface should act in the same way.
iOS7/8 Toggle button. Source: Jaron Pulver
Visualize the Result of an Action
By following the principle “show, don’t tell”, you can use animated feedback to:
- Highlight that something went wrong. For example, visual shake animation on incorrect passcode entry. It’s like the shaking of the head as if to say ‘no, try again’. User notice the animation and instantly understanding the current status.
- Reinforce the actions a user is performing. In example below, when the user clicks “Submit”, a spinner briefly appears before the app shows the success state. Checkmark animation makes user feel like the process is finished successfully.
Image credit: Colin Garven
Softening State Changes
Other good places to add animation in design are at moments of change. State changes in the user interface (especially on the web) often involve hard cuts, which can make them difficult to follow. Nothing feels more unnatural than a sudden change. Abrupt changes in an interface are hard for users to process. These moments of change should be softened by adding some animation to the UI.
Animated transitions should act as intermediaries between the different states of the user interface, helping users to understand what is going on when the screen state changes. The user simply follows the motion and understand how the two UI states are related.
Animation can help user maintain context. Image credits: Anish Chandran
It also works well for associating thumbnail and detail views:
The card animates from its original position into a position in the modal, making it clear that it’s the same item, just with more detail. Image credits: Charles Patterson
Call Attention To Changes
Animation can help the eye see where a new object comes from upon its reveal or where a hidden object goes (and likely can be found again). We can use it to call attention to changes that hide or reveal information, such as opening side drawers of content. In example below, the main navigation slides out of the way when you click on hamburger icon. That movement lets you know the main menu hasn’t disappeared.
The motion helps create a mental model of where items are located. Image credits: Tamas Kojo
Visibility of System Status
As one of the original 10 Jakob Nielsen’s heuristics for usability, visibility of system status remains among the most important principles in user interface design. For user it’s very important to know and understand their current context in the system at any given time.
Data uploading and downloading processes are great opportunities for a functional animation. Animated loading bars sets an expectation for how fast the action will be processed. The animation is helpful in the movement of failures. Even a not pleasant notification such as a data downloading fails should be delivered in a nice way.
Animation enables the user to quickly understand when an action began, the time remaining and exactly when it has ended. Image credits: xjw
Pull to Refresh
A user’s wait time begins the moment they initiate an action, and the worst case is when they don’t have any indicator the system has received it. Pulling to refresh action should have an immediate reaction. It’s essential to give some visual feedback immediately after receiving the request from the user to indicate that the process has initiated. The animation will help you with that.
Pull down to refresh action initiates a process of content updates on mobile devices. Image credits:Tony Babel
Sometimes users need a little extra help to understand the user flow or how to interact with certain interface elements. This is especially true for user interfaces that contain new or unfamiliar features/interactions for user.
User onboarding demands a flawless UX, and animations in an onboarding flow has a tremendous impact on how first-time users will engage with the app. Animation gives you limitless freedom to convey anything, no matter how complex or how dry the subject matter, in an entertaining way.
Using animation you can convey complex concepts. Image credits: Anastasiia Andriichuk
Animation can offer up some useful visual cues. Explanatory animation is most often seen when a page is opened for the first time and the animation shows how certain elements of the page are supposed to be used. This type of animation can be found in games which often deals very well with progressive disclosure, revealing game mechanics as you move further into a game. Such hints are only triggered when the user reaches the appropriate point in their experience. For example, Pudding Monsters uses an animated hand to explain a sliding motion and it becomes clear for users what to do next.
Animations provide cues making the interaction obvious for user
Animation is powerful tool when used in a sophisticated ways. We need to embrace the motion from the very beginning and think of it as natural part of our design, because design is more than just about visual presentation. As Steve Jobs said about design:
“It’s not just what it looks like and feels like. Design is how it works.“