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

Não abuse das animações

Bem usadas, as animações dão vida a uma página. Um contador animado faz-vos esperar enquanto a página carrega, em vez de saírem imediatamente. Está a dizer que demora o seu tempo, mas está a acontecer.

Mas o que são animações, como podem ser usadas e, mais importante ainda, como não o devem ser?

Os GIFs voltaram, e com eles a memória de uma internet carregada de cores berrantes, e sequência animadas em má resolução. Lembram-se das páginas do Geocities? Nenhum elemento era estático, cada página era um grito constante por atenção. Às vezes com música de 8 bits em fundo.

Felizmente, avançámos muito desde então. As animações passaram a ser usadas numa perspectiva mais funcional, de forma a melhorar a experiência dos utilizadores.

Existem animações de dois tipos:

  • Dinâmica – mais funcional, em que são adicionadas transições ou novas características visuais a elementos de páginas, como botões, imagens, menus, etc, de acordo com a interação do utilizador (activando os elementos ao navegar por eles);
  • Estática –  os elementos têm uma narrativa própria que não é afectada pelo utilizador. Normalmente são expositivos, como GIFs a demonstrar um passo num processo, ou decorativos, como um elemento que tem movimento, mas apenas para efeito visual;

As animações dinâmicas ajudam a navegar pelos vários elementos e a criar uma experiência mais fluída na transição entre seções de página, em vez de um corte direto. As estáticas usa menos recursos que um vídeo, por exemplo, e ajuda a criar uma narrativa visual mais interessante e a definir o tom da página, por exemplo.

A experiência torna-se mais orgânica – a página parece viva, pois reage ao toque, reconfigura-se na ponta dos dedos, respira nos pontos mortos em que o conteúdo novo está a ser disponibilizado.

Para que seja eficaz, é preciso ter em conta algumas questões.

Quanto tempo deve durar uma animação?

Qualquer animação implica um factor importantíssimo: tempo. Se for demasiado longa, perde a nossa atenção. Se for demasiado curta, torna-se imperceptível. O objectivo da animação define a sua duração.

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

Que recursos deve usar?

As páginas são vistas em dispositivos móveis, logo têm que ser programadas para eles. O Flash desapareceu porque era demasiado pesado para os telemóveis e exigia recursos que não estavam disponíveis. As animações não devem tornar as páginas mais lentas.

Para usar animações é preciso ver como a página está construída, em que linguagem de programação foi feita, e qual a sua performance. Por mais animada e bonita que seja, se afectar o desempenho da página, não capta ninguém.

Onde usar as animações?

Nos sítios estritamente necessários (ver ponto anterior). As animações de carregamento (de vídeo, página, etc) são o tipo mais simples de animação, e aquele que nos faz esperar mais tempo do que o normal. É um exemplo simples e muito claro de uma animação funcional. Os elementos de navegação e interactivos também podem beneficiar de animações simples.

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

Para quem são as animações?

Não são para o cliente, nem para outros designers. As animações servem para os utilizadores navegarem melhor na vossa página, para que a sua experiência tenha fluidez e não haja cortes na sua percepção. Como sabemos, a mínima distração e perdemo-los.

O que não fazer com animações?

Bem, Geocities. Se não se lembram de como era a Internet antes do desenvolvimento da ciência conhecida como experiência do utilizador (UX), visitem esta página. Felizmente, nas últimas duas décadas, o bom gosto e a funcionalidade tornaram-se o mote no design dos websites. Não há GIFs do Star Wars, ou avisos a amarelo e preto a dizer “Página em Construção”.

animações em excesso na página

Se alguém vos propor algo deste tipo para a vossa página, riam-se e digam que é uma boa piada. Se não se rirem convosco, procurem um novo designer.

Nós somos fáceis de encontrar e sabemos animar a experiência dos vossos visitantes. Com tempo, estética e função em mente. E melhor sentido de humor.

Deixe uma resposta

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

Post comment