WebdesignNão abusa das animações na sua comunicação digital

Website animations dos and don’ts

Animations can breathe a new life into a webpage. An animated loader will soothe your waiting while a page loads, preventing you from leaving immediately. It shows that things take time, but they’re happening.

But what are animations, how can they be used and, more importantly, how should they not be used?

GIFs came back with a vengeance, and the memory of a perpetually flashing Internet, and low resolution animated sequences. Do you remember Geocities? All elements were in motion, and each page was a shrieking scream for attention. Sometimes even with 8 bit background music.

Fortunately, we have come a long way since then. Animations became a functional part of webpages, improving user experience.

There are two types of animation:

  • Dynamic – function oriented, mostly visible in transitions or new visual features in page elements like buttons, slideshows, images, menus, etc, reacting accordingly to user actions (by activating those elements on hover or click);
  • Static – standalone animated elements, with a enclosed narrative, not affected by the user. Usually they have a display function, like walkthrough GIFs, or ornamental, for visual effect.

Dynamic animations help to navigate from scene to scene, providing a more fluid experience between the different sections of the webpage, instead of a clean, direct curt. Static animation can be less resource straining than video, and helps to create a more engaging visual narrative and setting the overall tone of a webpage.

The result is a more organic experience – the webpages resemble a living creature, reactive to touch, shaping itself with a touch of a finger, breathing in dead air like when new content is being loaded.

But, to be effective, we must have to consider a few questions.

How long should an animation last?

Any animation implies the utmost important factor of time. If it’s too long, we’ll lose focus. If it’s to short, it becomes invisible. The purpose of the animation will define its duration.

não abuse das animações - tempo
não abuse das animações - mobile first

How many resources will it take?

Webpages are seen in mobile devices, so they’re built for speed and programmed to comply with their specifics. Flash disappeared because it took overwhelming resources and was too heavy for mobile networks and devices. Animations shouldn’t bog down your users’ experience.

In order to have animations the programming and design of the webpage must be taken into account, and how it will affect the overall performance. No matter how flashy, fun and pretty, if it doesn’t perform well, your page is useless.

Where to use them?

Only where they’re needed (see previous question). Loaders are the simplest type of animation there is, that have the only purpose of having something working while we wait. It is a clear example of a functional animation. Navigation and interactive elements can also benefit from minimal animation.

não abuse das animações - esteja onde é preciso
não abuse das animações - centradas na narrativa

Whom are they for?

Not for the customer, nor other designers. Animations are made for the users to have a fluid experience while navigating your page, minimizing attention breaks. As we know, the slightest distraction and they’re gone.

What not to do?

Well, as previously mentioned, Geocities. If you don’t remember how the Internet was before the development of the science known as User Experience (UX), have a blast from the past. Fortunately, in the last two decades, good taste and function became the motto of webdesigners. No more Star Wars GIFs, or black and yellow “Under Construction” banners.

animações em excesso na página

Should a webdesigner include something like that in a webpage proposal, have a laugh and comment how funny that was. If the webdesigner doesn’t laugh with you, look for a new one.

Hey, we’re easy to find and know how to keep the animation going for your users. With time, looks, and function in mind. And with a great sense of humor.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment