Why Animate
You’ve probably heard that web animations can improve the user experience of your Vue application. But do you know what you should be animating, and how to do that in Vue? In Vue Mastery’s Animating Vue course, we’ll explore what makes an effective web animation and learn the simplest ways to start animating your interfaces so your users can better navigate, and enjoy, your application.
Before learning how to animate in Vue, let’s understand why we should, by exploring how we can use animation to improve our user experience.
Directing Focus
In today’s world, the human mind is constantly bombarded by information. We’re sending emails, receiving texts, scrolling through feeds… our attention is pulled in an endless amount of directions. So when a user arrives at your app, it’s likely their brain is already swirling with information they’ve been processing throughout the day. Our job, as user interface builders, is to quickly orient and direct our users’ attention, guiding them on how to effectively use our app.
We can harness the power of animation to focus our user’s attention. And once we have it, we can direct it where we want it to go.
Inspiring Action
What is the first thing you want your users to do when they reach your application? It may be a line of copy you want them to read, or a button you want them to click… some first step you want them to take. By effectively utilizing animation, you can remove distraction and inspire that specific action.
In this example, our call to action is a button we want the user to click. By using motion, we have removed distraction and eliminated any confusion in the user’s mind about where they should be focusing, and how they should start engaging with our app.
The reason motion is so effective at drawing attention is due to a primal human instinct. Whether for hunting down dinner, or avoiding becoming another animal’s dinner, visual sensitivity to motion is a core process of the human brain that has helped us survive and evolve throughout our time here on this planet.
As developers, we can tap into this sensitivity to visual motion in order to direct our users’ attention to the elements we want them focusing on so they’re more likely to take the action we want them to take. But with great power comes great responsibility, so we should be using motion in a graceful way that mimics nature.
Creating Flow
If I begin telling you what the next reason to animate is, and I end up telling you there are 100 billion stars in our galaxy, that’s called a non sequitur. Where I ended up abruptly shifted away from where I started. Unfortunately, non sequiturs are very common in poorly designed web interfaces. What does that look like? Have you ever clicked on a button or link, and everything you were just looking at disappeared in a flash, only to be replaced with an entirely new page? This can be disorienting and cause your user to have to re-orient to your site every time something like this happens. Over time, this causes cognitive fatigue in your users.
Instead of breaking context, we can harness the power of animation to create a seamless flow as the user navigates around our application. We can morph elements into one another, we can transition between pages and components in a way that feels natural.
We can show the user where that menu they just had open went, by animating it into its collapsed state. We can use animation to create a sense of physical space and time within or application, where elements transition between positions and states over a predictable duration. When this is implemented well, the user gains a sense of familiarity with the “world” of our app. They understand where things live within it so they better remember how to find what they need when they need it, and they understand how the app behaves so they don’t get disoriented , frustrated, or exhausted by it.
Instead, they can be delighted, which brings me to the last major reason I believe we ought to be animating our interfaces.
Delight & Surprise
With an endless amount of apps out there, many of which may be rather routine and dull, our users will appreciate thoughtful touches that make your app more fun and pleasing to use. If you make your user smile, you’ve just gained a fan.
These thoughtful touches could be anything from a customized loading spinner, to a super clean and helpful form that eases the burden of filling in a bunch of fields, to a button that communicates a success or error state.
When done well, these delightful touches will make your app more memorable, can differentiate you from your competition, and can even help you hold your user’s attention for longer than if you hadn’t gone that extra mile. But it’s worth sharing a word of caution here: it is easy to go overboard and animate too much. Animations are like adding spice to a dish. Too little, and the dish is bland; too much, and the dish is ruined. Like any good meal, an effectively animated interface must be well balanced.
Let’s ReVue
In the following lessons, we’ll look at several ways we can harness the power of Vue to create animations that just about any web app can use. While there are many ways to animate in Vue and it can get quite advanced and complex, the goal of this course isn’t to show you every one of the many options out there. The goal is to provide you with the tools and insight you’ll need to start adding simple, practical animations to your Vue apps that direct focus, inspire action, create flow, and delight and surprise.
