Como masterizar o timing de UX motion design?

Você sabe como o timing de UX motion design afeta a experiência do usuário? No artigo anterior, “Nem tão rápido, nem tão devagar. Encontrando a velocidade correta na animação de uma interface”, detalhamos como a velocidade da animação pode influenciar a percepção do usuário sobre a performance de um aplicativo. Concluímos que uma velocidade muito lenta pode transmitir a sensação de um aplicativo pesado e lento, enquanto uma velocidade acelerada pode resultar numa experiência de usuário pobre, com transições abruptas e difíceis de seguir.

Além disso, abordamos a preocupação comum de muitos designers em encontrar a velocidade ‘certa’ para suas animações, equilibrando a necessidade de ser informativo com a de representar de forma fiel um usuário humano interagindo com a interface.

Neste artigo, vamos continuar com o assunto para que você possa dominar esse conceito importante.

Menos é Mais

Provavelmente você já ouviu falar do ditado “menos é mais” no universo do design. A ideia é que “mais” muitas vezes gera ruído e, quando falamos de experiência, devemos sempre pensar em reduzir ao máximo qualquer tipo de ruído.

Assim, mesmo vale para a animação centrada na experiência do usuário. O motivo principal pelo qual o usuário está navegando por uma interface é para encontrar a solução para um problema e, de forma fluída, concluir a jornada sem frustrações. Se durante essa jornada ele encontra qualquer tipo de obstáculo, a conexão emocional é reduzida e a experiência comprometida.

Acontece que muitos iniciantes no mundo do timing de UX motion design ficam tão empolgados com a ideia de implementar movimentos na interface que acabam exagerando na quantidade e complexidade das animações, e também na duração delas.

Fenômeno “Areia Movediça”

Vamos pegar como exemplo abrir e fechar o menu do app. Quando você toca no ícone de hambúrguer, a única coisa que você quer é que o menu abra. Se ele abrir, conquistamos um ponto. Mas, através do movimento, podemos fazer com que essa simples ação se torne frustrante.

Imagine que você clica no ícone do hambúrguer e temos uma animação ali transformando os três traços em um xis. Se o tempo de interpolação entre um estado e outro for muito lento, o usuário vai sentir a experiência da areia movediça, o fenômeno de querer seguir em frente mas ser impedido por algum motivo.

Imagine que não só a microinteração do hambúrguer seja lenta, mas a abertura do próprio menu demore em torno de um segundo para ocorrer. Aqui, juntamos dois momentos que de fato poderiam melhorar a experiência através do movimento, mas se tornaram comprometedores da experiência geral.

Aqui vai uma dica para não deixar que isso aconteça: deixe a sua animação reproduzindo em loop e você vai reduzindo aos poucos a duração daquele movimento. Vai reduzindo enquanto a animação está sendo reproduzida até você encontrar um momento em que a animação pode ser facilmente notada, mas sem qualquer vestígio de “espera” para finalizar.

A Interface Super Veloz: Entre o Impacto e a Confusão

Agora, vamos para o cenário oposto: uma interface super veloz.

Um dos propósitos de incluir o motion como uma das peças para a boa experiência do usuário é fazer com que ele sinta que existe um movimento fluido ocorrendo durante a navegação. Mas, se o timing da animação for rápido demais ao ponto de o usuário não conseguir entender o que aconteceu, a proposta do motion desmorona. Isso pode gerar confusão no usuário, além de transmitir uma sensação de “pressa” e “estresse”.

Teste do Equilíbrio

Uma dica que gostamos de dar aos nossos alunos da Formação em UX Motion Design é mostrar as animações para uma pessoa comum que não entende absolutamente nada de animação.

Da mesma forma que para chegar em um produto final a interface passa por diversos testes para receber feedbacks dos usuários, você pode reproduzir um pequeno teste com o seu círculo social.

Ao criar animações de interface faça duas versões: uma que você considera mais direcionada ao rápido e outra mais direcionada ao lento. Mostre as duas animações para as pessoas e pergunte se elas perceberam alguma diferença. É um teste super interessante e você vai perceber que a maioria não faz a menor ideia do que é animação, mas sabem o que sentem. E o sentimento é uma das peças-chave para uma boa experiência.

Conclusão

Tá vendo como algo que parece simples pode ter muita ciência por trás? O timing de UX motion design é uma ferramenta fascinante que nos permite utilizar o movimento para aprimorar a experiência do usuário e aumentar a emoção e o engajamento.

Se tem uma coisa que espero que tenha ficado clara é que encontrar o equilíbrio na velocidade das suas animações não é um detalhe qualquer – é um fator chave para determinar se seu usuário vai ter uma experiência frustrante ou satisfatória. Animar demais pode parecer lento e maçante, enquanto animar de menos pode parecer apressado e confuso.

Agora é com você! Pegue estas dicas, aplique no seu trabalho, teste, refine e teste de novo. Não esqueça de envolver pessoas que não são especialistas em design nas suas avaliações – o feedback delas será um termômetro valioso para entender como sua animação é percebida. Afinal, nossos usuários finais não são designers, são pessoas comuns que só querem uma experiência fluida e agradável.

E lembre-se: a beleza do UX Motion Design está nos detalhes e no impacto que esses detalhes podem ter na experiência do usuário. Então, vá em frente, experimente, erre, acerte e aprenda com isso. Esse é o caminho para se tornar um grande UX Motion Designer.