As interfaces de usuário animadas tornaram-se cada vez mais versáteis. Atualmente, a animação dos elementos na interface do usuário é mais comum e frequentemente usada para facilitar o onboarding. Veja abaixo regras importantes para criar animações eficazes em interfaces.
Comece com a prototipagem
Não importa se você é um iniciante ou um web designer experiente, criar animação do zero sempre requer prototipagem. Assim, você pode entender como sua ideia é implementada organicamente e fazer alterações antes que elas custem muito do seu tempo e esforço.
Siga as leis da física
Essa regra é criar uma animação que esteja de acordo com as leis da física, como a lei da gravidade, a lei da inércia, as leis do atrito, etc. Isso é especialmente importante para objetos animados que consistem em vários elementos — neste caso , cada um deles tem que se mover ao longo de sua própria trajetória, levando em consideração a forma, o tamanho e outras características físicas.
Lembre-se de que os usuários devem perceber os elementos da interface como objetos tridimensionais que pesam em proporção ao seu tamanho. Esse compromisso com os fundamentos da física ajuda os usuários a aplicar elementos de interface como se estivessem lidando com eles na vida real, não em um ambiente digital. Isso significa que manuseá-los será mais intuitivo do que no caso de objetos bidimensionais completamente fictícios.
Aperte e estique objetos animados
Ainda continuamos com as leis da física. Basta lembrar como os objetos se comportam na vida real sob a influência de fatores externos - eles podem encolher, expandir, mudar seu centro de gravidade ou fazer outra coisa em resposta a qualquer manipulação do usuário. Tenha isso em mente para tornar sua animação o mais realista possível.
Garanta um movimento suave
Na vida real, os objetos se movem suavemente, muitas vezes não em linhas retas, mas em uma parábola, por exemplo. Essa propriedade física pode ser usada para tornar as interfaces interativas mais próximas do que estamos acostumados a ver no espaço 3D. Este é apenas um daqueles recursos que dificilmente são perceptíveis para o usuário em geral, o que permite que a solução final pareça profissional e concisa.
Preparar o usuário para fazer a transição entre as telas
Em vez de mudar abruptamente de uma tela para outra, prepare o usuário para o que está prestes a acontecer. O exemplo mais trivial é mostrado em versões mais antigas do Windows — neste caso, uma ampulheta virada. No entanto, você pode usar toda a sua imaginação para tornar essa transição não apenas mais criativa, mas também divertida.
Adicione um pouco de drama
Para fornecer aos usuários finais uma compreensão clara do que acontecerá no próximo momento e fazer com que eles concentrem sua atenção nisso, você pode tornar essa espera um pouco mais empolgante. Essa regra funciona especialmente bem no caso de descrever ações erradas do usuário ou aguardar a confirmação de qualquer operação na interface. Por exemplo, você pode usar um ponto de exclamação saltitante ou um sinal 'x' para indicar aos usuários que algo deu errado e a interface espera que eles executem uma ação específica.
Repita a animação mais uma vez
Outro “truque” discreto para transições de tela é repetir a animação que os usuários acabaram de ver. Isso os ajudará a entender que estão fazendo tudo certo e que o passo que deram os aproximou da conclusão da ação desejada.
Lembre-se da hierarquia
Na verdade, o movimento pode refletir de forma bastante confiável qual dos objetos é mais importante e qual deles é secundário. Normalmente, os elementos mais importantes são trazidos para cima ou para a frente na animação.
Use animação apenas quando necessário
Talvez você possa se empolgar com elementos de interface animados e querer colocar o maior número possível de objetos para se mover. No entanto, transformar uma interface de usuário comum em outra obra da Disney definitivamente não vale a pena. Na verdade, a animação excessiva distrairá os usuários ao concluir as ações pretendidas e você reduzirá significativamente o nível de usabilidade do projeto em que está trabalhando.
Forneça dicas visuais
Dependendo da finalidade do seu produto, o processo de integração pode ser bastante difícil para alguns novos usuários. A animação pode reduzir significativamente o limite de entrada. Em particular, você pode usar dicas de ferramentas animadas para explicar aos iniciantes como lidar com os elementos da interface.
Seja inteligente
Uma interface animada de sucesso requer inteligência do designer. Se não causar emoções nos usuários finais, seu trabalho dificilmente poderá ser chamado de alta qualidade. Então, como dissemos acima, não se esqueça de adicionar um pouco de humor e diversão aos elementos animados, mesmo se você estiver trabalhando no projeto mais sério do mundo.
Verifique se a duração da sua animação corresponde ao seu público-alvo
Pense em quanto tempo a animação deve durar para que seus usuários não precisem esperar até que ela termine. Ao mesmo tempo, uma animação que termina muito rápido pode ser incompreensível para os usuários. Portanto, antes de lançar a versão final, teste várias opções diferentes umas das outras em duração em representantes reais do público-alvo do seu projeto.
Escolha a velocidade de movimento ideal
Também é importante manter um equilíbrio na velocidade da animação. Objetos animados que se movem muito lentamente, renderizando cada novo quadro a uma velocidade de um segundo ou mais, podem deixar seus usuários finais entediados. Por outro lado, movê-los muito rápido, em menos de 100 ms, não permitirá que eles entendam onde a mudança ocorreu. Em geral, os resultados de testes independentes mostram que a velocidade ideal de animação da interface é de 200 a 500 ms.
Considere a linguagem do movimento
A natureza do movimento dos elementos animados deve corresponder ao estilo do projeto em que você está trabalhando. Por exemplo, é improvável que elementos saltitantes sejam apropriados em um aplicativo corporativo e, vice-versa, uma animação muito discreta e simplificada tornará um aplicativo de entretenimento desinteressante e monótono.
Tente imaginar sua animação daqui a 50 anos
Embora as tendências de web design mudem na velocidade da luz, é importante tentar criar um produto que se torne exemplar por muitos anos. Para fazer isso, tente imaginar se sua animação ficará ridícula para os usuários que decidirem usar seu produto daqui a meio século.
Comments