The job of a visual designer is not just to make a website or an app functional; but also to make it enjoyable for the user. The advantage of an animation is that it can solve problems in design by showing relationships between various elements, thus making it more understandable for the user.
Think of every web or app designer as a movie maker, screenwriter, and the director all in one person. Then, think of your company, product and your idea of what your website should look like, as a book based on which a movie will be made. That movie is the website or an app. The designer has to put the whole book into a 3-hour movie that will cover the story, impressing the audience without confusing it. Designers have to highlight all the important features of the website, or an app and animation is the tool that can reduce the confusion of the user when using a new app or its features. Animation can also be used to attract a user’s attention towards important features of an app.
According to Kit Oliynyk and his Jedi Principles of UI Animation, there are three types of animation — Functional, Material and Delightful. The combination of all three will make your app achieve its user experience objectives, making the user interface look real and consistent, while the user is visually pleased with what he is experiencing through your app.
“Animation can explain whatever the mind of a man can conceive.”
Functional animation is guiding the user throughout your app. It helps him/her understand new features and makes the user feel that the app is fast and easy to use. Functional animation is crucial because it grabs a user’s attention and shows him the right path.
Laws of physics apply on planet Earth, but it also applies for designers. Therefore they have to use material design/motion. It keeps the app consistent, real and it makes its usage intuitive because it is familiar and easily predictable. Remember, users are new to your app, so they need to understand it first. To be consistent, less is sometimes more.
Whether it is a website, app or a car, people rely on their emotions first. The old “love at first sight” speaks about how people decide emotionally first. That is why the delightful animation is as important as functional and material. People love to laugh, they want to be entertained, so it is the designer’s task to make the user experience of your app memorable through animations.
Before you add any animation to your app, ask yourself some of these questions:
- Where is the user’s attention focused, before you add an animation?
- What is the goal of your animation? Is it to grab the user’s attention? Show functionality of some important elements? Show new features?
- How often do you want to repeat the animation?
- How will the animation be triggered?
“Animations have to attract, guide and please the user.”
If we combine the principles mentioned above, with the answers to these fundamental questions, the result will be — three functions of an animation in an app:
- To attract a user’s attention
- To show your user what to do
- To visually please your user
Attracting a user’s attention
If an animation is used effectively, it will grab the user’s attention. If a person sees a movement in his peripheral vision, it will attract his attention, because of our ingrained recognition of potential danger. You can use animation to show your user where he has to focus when using your app, show him the hierarchy of the screens and all the elements of your app. However, be aware of the amount of animation used at the same time. Too much animation can lead to banner blindness ( a phenomenon in web/app usability where visitors to a website/app consciously or subconsciously ignore banner-like information, which can also be called ad blindness or banner noise) and your user will subconsciously ignore the important features of your app.
Showing your user what to do
Animations are not only, about grabbing the attention. Their purpose is to guide your users through the app and show them what to do. Simple or complex transition between the elements in your app can show your users continuity through the whole app. Animations that are created and placed well are guiding the user through the whole app, and they can also help him make better decisions.
Animations help the user of your app discover all of its features. When a user is aware of how every element of your app works, he feels more comfortable using it and will use it more frequently.
Visually pleasant
It is not simple for an animation to be visually pleasant. For an animation to be visually pleasant, a designer has to deal with many variables that affect visual pleasure. First of all, it has to be clean, modern, natural. In addition to the design aspect of visually pleasing the user, proper animation has to have a certain frequency, duration, and speed.
If a user sees your animation for the first time, he might be pleased, but after some time it can get boring and what’s even worse annoying. Even the best looking animations are bad if they last forever. According to Val Head, animations have to run between 200ms-500ms. Anything longer looks unnatural to the users. On the other hand, if the animation goes too fast, the user might miss it.
The speed of the animation also plays an important role. Do not confuse it with the length of an animation. From a user’s point of view — a slower animation equals a slow app. Users will perceive the whole app to be slow, if the animations are slow and vice versa. Clever designers can hide delays in the app with animations. If users have to wait, either remind them how much they have to wait or entertain them.
Use animations with caution
Animations can be a powerful tool, which can enhance or completely shatter user experience. On the one hand it can attract, guide, and delight the user, but on the other hand, it can bore, confuse, and disgust your user. Try to use animations carefully and wisely. Think of it as an attraction seeking guide that is pleasant to look at.
