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.
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.
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”.
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.