The eternal quest for fluidity
In a world where videos offer us 120fps, with screens that go up to more than 240Hz, we are more than ever looking for fluidity. And this in all areas, so the web goes there. A fluid site both in its loading and in the navigation itself will necessarily be much more pleasant.
So, what a joy when CSS3 features arrived! Transitions between states, animations, etc. But greedy that we are, we wanted to go further with webGL and other mysterious techniques to make things happen. Fantastic, we are not on the web to view static pdfs. So perfect, here we are equipped to do twerk all the divs of our web pages.
Everyone experiments little by little, takes new codes in hand, appropriates the principles of more advanced animations. It's nice. As with many things, you have to experiment to excess to realize what feels balanced. And this is still the case today. It is indisputable (or open the debate on our Twitter) that animation brings a lot to the user experience.
The animation guides, informs, keeps people waiting, supports certain elements, and does so without glitter or other big red arrows.
Sublimate waiting...
There are several ways to wait, depending on the context, but with a loader (degree 0) or a progress bar, a resize of the container to display all the content, a loading and therefore progressive display of the content... you can succeed in: either accompany or entertain the user while he is waiting, or to give him information about his wait.
Animating a stepper, making a focus effect that moves, automatic slider, are some solutions that can guide the user in his journey. Either by pre-chewing the work for him, or by accompanying him.
Sometimes, it is also used to gain credibility: some comparators feign a loading to display the results to thus make believe in a complexity in their task.
Consume with moderation ?
We also have the hover, which is added to the animations. As much as it's important to understand which buttons you're hovering over, there's no need to see the return animation, which kinda forces your gaze to stay on a button you've already left.
The appearance effects of modals, pages, cards, etc., are often good examples of animations that bring nothing, except a delay before accessing the content.
The human eye (and brain) is strong, but will not be able to concentrate if there are 7 simultaneous movements on the page, or if it considers that certain animations are unexpected (in the anomaly sense for this shot -this). If the eye moves everywhere, the user does not find his info quickly, and quickly goes back to competitors (no more afterworks paid by your startup).
find the balance, it gives meaning
Conversely, I think that we must also accept certain animations which may seem free.
#1 Those that serve as a “Wow effect” (not pancakes)
But they concern certain types of sites, which need to play on emotion to captivate the user (mainly event sites, portfolio). If your bank starts giving you home with 3D mouse movement animations, you might get scared.
#2 Those that add an emotional dimension to basic animations
Let's take an example, it will surely be more telling: a refresh of a list that is triggered when scrolling up. Whether it's a spinning wheel, or a rocket launch, you know that the requested action is taken, and that something is happening. The job is done in terms of understanding, but I think the rocket will have more impact, it's a pleasant little surprise, which can echo the identity. The nugget, the cherry, I almost bet you'll reload a second time to review.
They seemed free, because the added value is not in the meaning they can carry (although), but in the emotion they bring.
Animation makes sense, it is not this “new” toy that we absolutely want to use and test in all projects and situations. This is also why we find guidelines on animations with material. The animations presented are simple and support the meaning or meaning of reading, the hierarchy. It is even the first category of their site in the animation tab: “understanding motion” (“understandable animations”).
It is therefore part of good practice to have meaning. But Google doesn't tell us not to do too much. This does not seem to me a reason to abuse in this direction. Google also remains in the user aspect, and does not speak of the emotional aspect that certain animations can bring.
TAKE AWAY
For the most part, animations should complement the user experience, reinforce a hierarchy, provide meaning, and aid in understanding navigation without overshadowing functionality. However, the emotional aspect of a website and its identity shouldn't be neglected. It's important to be able to stand out through animations as well.
We will go slowly, like the little pepper that comes to spice up your new culinary creation. It takes a bit, but a little too much and it's the terrible stomach ache.
- The animations must accompany the experience, support the subject and give meaning
- Do not forget the emotional aspect that animations can bring
- When there are too many of them, or when they are too marked, they take precedence over the content, over the action. The eye is distracted and this breaks the fluidity of the experience, disturbing the main and essential functionalities.
Julien, UI-Designer @UX-Republic
