A importância do Motion Design na usabilidade
Motion design em aplicativos, sites e softwares.
“A animação pode explicar o que a mente do homem pode conceber. Esta facilidade faz com que seja o meio de comunicação mais versátil e explícito já concebido para uma rápida apreciação de massa.”
— Walt Disney
Maria abriu um aplicativo, e para entrar nele precisava realizar o cadastro. Então começou a realizá-lo.
Após terminar, clicou no botão avançar — o mesmo ficou imóvel, sem fornecer nenhum feedback. Então Maria clicou várias vezes no botão até ele finalmente avançar e ir para outra tela.
Outro dia, Maria acessou outro aplicativo que também solicitava um cadastro. Começou a fazê-lo, e terminando clicou no botão avançar. No momento do clique o botão alterou e começou com um movimento de carregamento, direcionando Maria para outra tela.
Se você já passou por essa mesma situação, você percebe a importância que o movimento tem em nossas vidas.
Imagine o que Maria sentiu na primeira situação em que ao clicar no botão nada ocorria? Talvez raiva, impaciência, frustração, falta de confiança e segurança com o aplicativo? Esses ocorridos afetam diretamente a usabilidade do produto.
Já no segundo momento em que clicou no botão e teve um feedback imediato do sistema, Maria teve uma resposta cognitiva tão rápida que continuou a interagir com o produto tranquilamente.
Este artigo procura apresentar a importância do motion design na usabilidade.
Muitas vezes, pensamos que movimento e ilustrações são apenas elementos decorativos, porém, eles desempenham um papel fundamental na usabilidade e, quando bem utilizados, podem ser recursos excelentes para facilitar a experiência do usuário.
Qual a importância do motion design na usabilidade?
A animação tem como objetivo contar uma história envolvente e dar vida a elementos. No caso de aplicativos, sites e softwares, não é diferente, pois ao ser aplicada, por exemplo, em transições de telas, carregamentos de arquivos, em botões, ícones, ilustrações ou em cards, ela nos proporciona um rápido entendimento do que fazer e qual ação será realizada após o clique.
Observe a próxima imagem e responda mentalmente, qual desses cards parece ser clicável? 👇
O card em que aparece o movimento ao passar o mouse em cima, nos indica que o card pode e deve ser clicável. Já o card em que passamos o mouse em cima e nada acontece, fica mais difícil assimilar que ele é clicável.
Percebemos que o movimento não é apenas decorativo, ele nos auxilia a diminuir a carga cognitiva que o usuário teria e a diminuir as estatísticas de cliques equivocados.
“Uma boa animação pode contar a história muito mais rápido do que qualquer palavra ou ilustração. O idioma da animação é universal — , você não precisa traduzi-lo para russo ou japonês. As transições criadas adequadamente podem ser incorporadas e orientar seu usuário mais rapidamente do que qualquer cartão flash.”
⠀
Efeitos que auxiliam na usabilidade
Podemos inserir diferentes movimentos, e cada um deles auxilia de diferentes formas na usabilidade, como, por exemplo, podemos inserir o efeito parallax, usado para separar o conteúdo principal do conteúdo secundário ou de suporte, auxiliando na hierarquia visual.
Além deste efeito parallax, existem outros e como complemento, preciso destacar 2 artigos que são sensacionais sobre o assunto:
Eles narram sobre princípios do movimento e usabilidade, vale muito a pena a leitura.
⠀
Diminuir a frustração e manter o usuário informado sobre o que está acontecendo no sistema
Outra utilização do motion que auxilia na usabilidade é quando um sistema não está respondendo ou travou.
Podemos amenizar a frustração do ocorrido de forma mais lúdica, tornando o sistema mais amigável e diminuindo as emoções negativas geradas pelo momento.
Podemos também adicionar movimento em ícones. Na imagem abaixo foi pensado em um movimento overlay, auxiliando o usuário na compreensão dos elementos, visto que haveria um desafio na interface de colocar todas as nomenclaturas dos ícones à mostra. Com isso, é possível auxiliarmos tanto os usuários quanto os designer na construção da interface.
Podemos utilizar a animação para contribuir com a primeira heurística de Nielsen “Visibilidade do status do sistema”, fornecendo ao usuário qual o status do sistema, neste caso como exemplo, podemos utilizar uma animação para carregamentos de arquivos, que por vezes acaba sobrecarregando o sistema e demorando um pouco para terminar o carregamento, e com isso, mantemos o usuário informado sobre o que está acontecendo, a fim de diminuir a frustração da espera.
Um site para buscar referências de motion design, é o Godly. Lá você encontrará diferentes tipos de movimentos que irão inspirar a construir uma interface cada vez melhor e mais usual.
Ferramentas para fazer motion para um produto digital
Agora que já ficou mais claro a importância do motion nos produtos digitais, como podemos fazer isso na prática?
Alguns movimentos ou efeitos são sugeridos pelo próprio design para o time de desenvolvimento para que eles possam produzir. Alguns cards e animações nos ícones, por exemplo, são destinados ao time de desenvolvimento, vale sempre alinhar com o time o que foi pensado e a importância daquele movimento na usabilidade.
Há algumas ferramentas que podem nos auxiliar a realizar animações, como, After Effects, SVGator, Rive, por código, caso você seja desenvolvedor, softwares 3D. E aproveito e trago também alguns que vi no artigo do Arpit Agarwa, são eles: Lottie, Adobe Animate CC, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS). Em cada uma das ferramentas apresentadas, há vantagens e desvantagens, então sugiro averiguar qual melhor se adequa às suas necessidades.
É importante destacar que animações em GIFs muitas vezes acabam por sobrecarregar o sistema e a animação é afetada na responsividade da tela. Um jeito para exportar sua animação, é em SVG, pois ela terá qualidade gráfica e também responderá melhor nos diversos tamanhos de tela.
Já sabemos algumas ferramentas, e agora como fazemos a animação? Deixo para outra oportunidade o detalhamento de cada movimento, mas para não deixar você na mão, vou adicionar alguns links de estudo no subtítulo “para saber mais” que podem auxiliar nesse processo.
Espero que tenha contribuído para o seu processo de design, fico por aqui, e até a próxima.
“Continuamos seguindo em frente, abrindo novas portas e fazendo coisas novas, porque somos curiosos e a curiosidade continua nos guiando para novos caminhos”.
— Walt Disney
Referências
- Fiorine
- UI Animation — How to Apply Disney’s 12 Principles of Animation to UI Design
- Creating Usability with Motion: The UX in Motion Manifesto
- Godly
- Arpit Agarwal
- Principles of animation
- Animation principles for UX and UI designers
- Jedi Principles of UI Animation
- The ultimate guide to proper use of animation in UX
