O que são animações web e quando usar?
As animações web tornaram-se uma grande parte do web design, ajudando os designers a criar engagement com o utilizador na navegação do site, mas, se não forem utilizadas com cuidado, também podem ser prejudiciais à UX (User Experience) tornando o site lento e pouco funcional.
Como surgiram as animações web?
As animações web começaram a ser implementadas nos anos 2000 com a utilização dos ficheiros Flash. Na altura foi revolucionário ter um formato que não tinha ficheiros tão grandes como os GIFs e que não perdesse qualidade quando era redimensionado. Tudo isto foi graças ao formato SWF, um formato baseado em vetores criado pela Adobe.
Com a evolução das linguagens de código e o crescimento do responsive design, surgiram novos formatos de ficheiro e novas formas de animação para a web, tornando o Adobe Flash cada vez mais obsoleto. Com isto, a Adobe acabou por descontinuar o flash e mudar o nome para Adobe Animate.
Quais são os tipos de ficheiros para animações web?
O formato do ficheiro e os tipos de animações são extremamente importantes porque podem afetar a velocidade de carregamento do nosso site e consumir uma grande quantidade de dados.
As animações de hoje em dia baseiam-se em código, isso pode ser: CSS, SVG (animadas com SMIL) ou JavaScript. Mas, das profundezas, surgiu um tipo de ficheiro que permitiu com que os designers se tornassem mais independentes a criar animações web. Esse ficheiro é conhecido como 
Lottie
O que são Lotties?
Lottie é um tipo de ficheiro que foi desenvolvido por Hernan Torris com a ajuda da Airbnb.
São baseados em javascript e têm um tamanho extremamente pequeno, sendo útil para uma boa velocidade de carregamento. Podem ser redimensionadas sem perder qualidade, permitindo uma adaptação fácil no responsive design.
Uma das grandes vantagens dos Lotties é que permitem com que os designers tenham controlo total em criar e exportar animações sem a necessidade de saber programação de linhas de código ou ter de passar a animação a um developer. Isto é possível utilizando uma extensão dentro da Adobe After Effects que permite exportar um ficheiro .json (javascript) ou um ficheiro .lottie, que permite juntar várias animações num único ficheiro.
Quais são os principais tipos de animações web?
Ao contrário de quando apareceram, as animações web de hoje em dia são utilizadas com propósitos muito práticos e tornaram-se uma forma de guiar o utilizador. Alguns dos principais tipos de animações web, utilizados atualmente, são:
• Mensagens de boas-vindas e animações de carregamento
• Micro-interações
• Motion de página e de scrolling
• Animações de menu
• Animações de notificação
• Animações de hover
• Animações de storytelling
Como manter os utilizadores interessados?
Um dos aspectos mais importantes e por vezes o mais desafiante da animação para web é a duração. Se a animação for demasiado rápida, pode fazer com que a navegação seja abrupta e pouco suave, prejudicando a UX. Por outro lado, se for demasiado longa, o utilizador pode ficar cansado e abandonar o website.
Queres saber como melhorar a UX para daltónicos? Aconselhamos-te a ler este artigo: Navegação a preto e branco: como melhorar a UX para daltónicos
Felizmente, temos um estudo realizado pelo Grupo Nielsen Norman que mostra que se uma animação tiver 0,1 segundos de duração irá aparecer de forma instantânea ao olho nu. Isto pode acabar por confundir o utilizador se aparecer muita informação de uma só vez. Se a mesma animação tiver 1 segundo de duração, o utilizador sente que está a navegar na página de uma forma mais livre e suave. O utilizador pode sentir um atraso na interação, mas vai saber que o computador está a gerar uma ação, fazendo com que este se sinta em controlo da experiência geral e que está a navegar de forma natural e livre. Este nível de resposta é essencial para uma boa navegação.
Se a animação tiver 10 segundos ou mais de duração, o utilizador pode aborrecer-se ou distrair-se e, nestes casos, é melhor usar uma barra de progresso para mostrar ao utilizador que a página ou ação está de facto a carregar, gerindo assim a sua expectativa e mantendo uma boa experiência de navegação.
Claro que estes números não são regras fixas que têm de ser seguidas à risca, mas são um bom ponto de referência para contribuir no planeamento da animação e quanto tempo esta deverá ter.
Devo utilizar animações web no meu próximo projeto?
As animações web são uma área onde deves andar com cuidado.
Se forem aplicadas corretamente, vão ajudar imenso a UX e até podem ajudar a criar uma ligação com o utilizador. Quando aplicadas com menos congruência, estas podem causar frustração levando o utilizador a sair do nosso website.
O principal objetivo das animações web é captar a atenção do utilizador e fazer com que a navegação do website seja a mais intuitiva e suave possível. Além disto, estas podem ainda ajudar os utilizadores a perceber o que está a acontecer no site com a ajuda de feedback visual, como interações e alertas, e até cativá-los com storytelling à medida que faz scroll.
Então, antes de adicionares animações ao teu website, considera quem é o teu público-alvo e se para eles, faz ou não sentido adicionar animações.
Nota final! Não te esqueças da importância de perceber se podes integrá-las no teu site sem confundir o teu user principal e sem afetar a UX.
Junior Designer
