Quando falamos de UX Motion Design, estamos relacionando duas grande áreas do design, o Motion, e o UX — a experiência do usuário. Cada uma dessas áreas do design possui inúmeros conceitos e princípios que são únicos entre eles. Quando juntamos o Motion e o UX, o que fazemos é utilizar dos princípios e aplicações do Motion Design para aprimorarmos a experiência do usuário.
Criar animações para interfaces é diferente de criar animações para outros meios. Neste artigo, vamos falar mais a fundo sobre como aplicar o pensamento do Motion dentro do UX, e o que você precisa ter em mente quando estiver animando para estas plataformas.
Animar Interface = Animar elementos e gráficos
Sempre que recebo alguma interface para ser animada, a primeira coisa que faço é visualizar cada elemento daquela interface como um elemento gráfico isolado. Isto significa não pensar na interface como um todo, mas identificar os detalhes que ela possui e trabalhar em cima disso.
Quando identificamos que, por exemplo, uma imagem de perfil pode ser representada por um círculo ou um quadrado, conseguimos atribuir animações de elementos já conhecidos à esta nova proposta. Isto serve principalmente para o Motion Designer que se sente perdido em meio à uma interface cheia de elementos.
Observar o mundo real
Outro ponto importante — não só em animação para UX — é observar o “mundo real”. Isso é algo que eu menciono sempre que converso com outros Motion Designers que estão preocupados em aprimorar suas animações. A forma como as coisas se movimentam e funcionam no mundo físico estão inteiramente ligados com aquilo que vamos representar de forma digital.
No caso de interfaces, isto não é diferente. O botão, o switch, o slider, e vários outros elementos destas interfaces, possuem referências com o mundo físico. Se você quer entender como animar um botão corretamente, simplesmente pegue seu controle remoto e pressione algum botão (sei que controle remoto pode ser algo muito confuso pra muita gente, mas relaxe, qualquer botão que você apertar já será o suficiente 😉 ). O mesmo se aplica a diversos outros elementos.
Muita das vezes essas referências pode ser até mesmo digitais. Em muitos projectos de UX Motion Design, recebemos interfaces de páginas Desktop (versão de computador) para serem animadas. Quando isso acontece, é quase certo que precisaremos usar um cursor de mouse pra mostrar a interatividade. Qual seria então a melhor maneira de entender como podemos animar isto? Exato! Pegar um mouse, um computador e mover o cursos pela tela.
Nunca deixa de prestar atenção naquilo que te rodeia. Seja no mundo físico ou no mundo digital, referências estão por toda parte.
Aplicar princípios porém sem exageros
Para quem já estudou mais a fundo os princípios básicos de animação, deve estar familiarizado com questão como exagero, overshoot, stretch & squash, e muitos outros termos. Todos esses princípios podem funcionar dentro do UX Motion Design, porém existe uma linha muito fina entre o que é exagero e o que é funcional.
Quando estamos replicando alguma interface de forma animada, estamos representando ali uma experiência que as pessoas terão ao usar aquele app. Se exageramos muito nos movimentos, podemos criar transições, por exemplo, que sejam demoradas, e isso vai dar a ideia de que aquele aplicativo ou software é lento, e isso pode afastar ao invés de atrair as pessoas.
Os princípios de animação servem para guiar nosso trabalho como Motion Designers. Entretanto, devemos sempre saber adaptar àquilo que estamos produzindo.
Não adicionar movimento apenas por adicionar, pensar no que ele representa
Por último, algo muito importante de se ter em mente é de não apenas adicionar qualquer tipo de movimento. Uma animação não precisa ter inúmeras coisas acontecendo para que ela funcione. Dentro da área do User Experience, o Motion Design exerce uma função muito essencial. Ele serve como um feedback da ação do usuário e também ajuda a aprimorar a experiência como um todo daquele aplicativo.
Quando animamos por exemplo um botão, temos que pensar no que acontecerá quando uma pessoa aperta ele. Neste exemplo, muita das vezes quando se aperta um botão ele “afunda” para representar o toque acontecendo. Esse “afundar” pode acontecer de diversas maneiras: podemos alterar as suas sombras para mudar a sensação de profundidade, podemos reduzir a sua escala, entre vários outros métodos.
Qualquer animação que pensamos para determinada função, tem que corresponder com o que ela representa. Falando de outra maneira, não é preciso “enfeitar” algo para que ele se torne bom.
Muita das vezes as animações mais simples são as melhores para adquirirmos um bom resultado.
