Entramos na era do Functional Animation! Mas prepare-se para consequências.

Quem pegou o auge do flash sabe bem a sensação de dores de cabeça ou vontade de vomitar ao navegar em alguns sites, mas sem dúvida que quando era bem utilizado ficava super legal (Super legal no contexto da época, não me julguem).

O ponto principal é que movimento faz parte do nosso contexto cotidiano e é algo que nos atrai. Existem explicações científicas sobre a reação do cérebro em relação ao movimento captado pelos olhos e só isso daria uma publicação a parte, mas não será o foco deste texto.

Crédito: Kreativa Studio

É bem provável que você já tenha se deparado com um site nos últimos meses que movimenta alguns elementos quando rolado para baixo ou ao clicar em um botão, isso é animação. A animação funcional (Tradução livre) compreende em trabalhar esse movimento de maneira sutil, proporcionando uma melhor experiência do usuário e não somente para ficar “bonitinho” ou atrativo. Essas funcionalidades costumam ser mais comuns aos aplicativos de dispositivos móveis, mas já estão aparecendo em websites há um tempo.

Veja um pouco sobre como a animação funcional constrói essa experiência:

Guiando o caminho

Crédito: Victor Erixon

Existem sites com tantas informações, opções, elementos e possibilidades que não sabemos por onde começar para encontrar o que queremos, dificultando a navegação. Utilizar animações para aparecer o conteúdo na ordem certa, de acordo com a rolagem do site, pode ser um bom guia para o usuário compreender melhor o que ele está vendo.

Expressando à reação

Crédito: Vadim Gromov

Se você pressiona um botão físico, ele vai afundar ou brilhar (elevador), reação que já temos costume. Da mesma maneira tende a acontecer em uma interface digital. Existir uma animação do botão sendo pressionado é uma ótima maneira de dizer ao usuário que a ação dele funcionou e teve resultado, pois o caso contrário pode ser demorar para carregar e você continuar clicando com a impressão de que não foi.

Mostrando o status

Crédito: Jona Dinges

Guias práticos de usabilidade indicam a importância de mostrar ao usuário o que está acontecendo ou em que pé está a solicitação dele, assim como a barra de carregamento de um download ou processamento de uma função no site.

Sou entusiasta dessa funcionalidade, porém como tudo tem um “MAS”, o segredo para uma utilização eficaz e não exagerada da animação funcional está em planejar muito bem quais serão os pontos que necessitam ser animados, qual será o tipo de animação e dosar muito bem essa experiência, caso contrário o mundo entrará no caos (Me ajuda a te ajudar!). Em outras palavras, é preciso estar no lugar certo, na hora certa.