Entre em Contato
contato@uxmotiondesign.com
Voltar

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

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 esse conceito possa parecer 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 nossas turmas iniciais de nossa Formação em UX Motion, eu encontrei alguns alunos demonstrando uma certa dificuldade em absorver esse conceito. Isso fez com que eu buscasse e estudasse mais sobre isso, para que eu pudesse trazer aqui um conteúdo valioso em torno deste tópico.

Como tudo que rege o Motion Design, timing e spacing são primordiais. O tempo que leva uma animação, sua aceleração e desaceleração são vitais para a experiência do espectador e para nossa percepção de que algo ali está “vivo”. Dentro do UX Motion Design, isso se torna ainda mais relevante já que a falha na aplicação desse conceito determina um impacto direto na percepção de performance e experiência de uma interface.

Vou falar um pouco destes dois tipos de problemas — rápido demais e devagar demais — para que você possa entender melhor como eles se relacionam com a experiência do usuário.

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, que pode consumir muita memória de seu aparelho, possuir uma resposta devagar à ações e fazer com que o usuário tenha que esperar(leia-se “perder”) muito tempo para executar uma ação.

Uma animação de 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 das animações muito rápido podem 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 — mesmo que de forma inconsciente — 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 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. Já 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 isso, 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.

Felippe Silveira
Felippe Silveira
Co-Fundador do UX Motion Design, da MOWE Studio (Estados Unidos) e Mestre em Motion Design pela BAU School of Design (Espanha) encarregado de projetos de Motion para clientes como: Google, Adobe, Pepsico, Pfizer, Zeplin, entre outros.