Nem tão rápido, nem tão devagar. Encontrando a velocidade de animação correta para uma interface.

Velocidade de Animação - Original Illustration by Google — Resized by Felippe Silveira

Hoje vamos falar sobre velocidade de animação, principalmente quando falamos em interfaces animadas para vídeos promocionais ou explicativos.

O conceito de “nem tão rápido, nem tão devagar”, é muito presente dentro do UX Motion Design e até mesmo reforçado pelo conteúdo do Material Design da Google.

Por mais que pareça fácil de entender, ele causa grandes dúvidas à muitos Motion Designers quando estão animando para interfaces.

Principalmente quando representam uma interface animada em um vídeo explicativo ou promocional.

Durante a primeira turma do nosso curso de UX Motion Design, eu encontrei alguns alunos demonstrando uma certa dificuldade em absorver o conceito da velocidade de animação.

Isso fez com que eu buscasse e estudasse mais sobre isso, assim pude trazer um conteúdo valioso.

Como tudo que rege o Motion Design, timing e spacing são primordiais.

O tempo de uma animação, sua aceleração e desaceleração são vitais para nossa percepção de que algo ali está “vivo”.

No UX Motion Design, não aplicar isso corretamente pode determina um impacto direto na percepção de performance e experiência.

Muito Devagar = Aplicativo Lento

Um das sensações principais que uma animação mais lenta cria é a ideia de que aquele aplicativo é muito lento.

Ou seja, é um aplicativo pesado, vai aparentar ser uma aplicação que faça ele perder tempo esperando executar alguma interação.

Uma velocidade de animação para interface lenta pode transmitir ainda a ideia de que aquele aplicativo não está muito bem desenvolvido.

Que falta um aprimoramento de código para que ele funcione bem, mas principalmente, isso poderá gerar certo stress no usuário ao fazê-lo esperar tempo demais em qualquer interação, por mais simples que ela seja.

Muito Rápido = Experiência Fraca

Do outro lado da moeda, podemos ter aplicativos com animações rápidas demais.

Essas por sua vez podem chegar ao ponto de serem tão rápidas que parecem ter feito um “corte na cena”.

O impacto de uma velocidade de animação muito rápida pode fazer com que o usuário não identifique uma interação, não visualize o que aconteceu ali para mudar a página de um aplicativo, e ainda fazer com que tudo pareça muito “duro” e “rígido”.

Um corte, ou animação extremamente rápida, torna as transições entre telas e elementos algo imperceptível. Isso faz também com que o usuário identifique  consciente ou inconscientemente uma falta de cuidado e preocupação com os detalhes.

Isso faz com que pareça que aquilo está ainda inacabado, que ainda falta algum detalhe a ser inserido ali.

Chegando na velocidade de animação ideal

Sabemos que a animação tem um impacto direto na experiência do usuário.

Afinal, somos naturalmente atraídos pelo movimento e quando vemos este movimento ocorrendo em um meio virtual, conseguimos trazê-lo para mais próximo de nosso mundo “real”.

A animação muito rápida faz com que não percebamos a interação que ocorre na tela. Enquanto na animação muito devagar, parece que levamos uma eternidade para que um movimento se conclua.

Pense em um usuário navegando por essa tela. Qual a velocidade de resposta necessária em cada momento? Com que velocidade ele clica em um elemento e já parte pro outro?

Tenha isso em mente na hora de animar.

Sei que a preocupação de não fazer nada rápido demais as vezes é grande, porém não existe uma regra fixa com relação à velocidade de cada animação.

Temos apenas que pensar sempre no usuário como utilizador daquela interface que estamos representando, mas também como espectador do nosso vídeo.

Ao mesmo tempo que ele pode ser informativo, ele também precisa cumprir com a representação de um usuário humano em contato com aquela interface. Por conta disso, busque entender o tempo de resposta para cada ação.

Pegue seu telefone, e comece a usar aqueles apps que te remetem a uma boa experiência.

Identifique o tempo que demora cada elemento daquela interface para se movimentar.

Procure replicar isso em seus trabalhos e veja o quanto diferente sua animação se torna.

Somente por meio da observação e análise conseguimos chegar naquilo que consideramos a velocidade e tempo ideal de um movimento.