As animações deixam as nossas atividades mais interessantes e menos tediosas. Afinal de contas, tudo está em movimento. Nesse sentido, a animação em UI Design está se tornando essencial para chamar a atenção do usuário.

No entanto, as animações vão muito além de ser apenas um chamariz. Elas estão relacionadas a boas experiências e ajudam o usuário a entender como utilizar a interface.

Mas como podemos criar elementos animados que ajudam o usuário?

Continue a leitura porque te mostraremos como!

Por que usar animação em UI Design?

Falar sobre animação em UI Design, obviamente, não se trata apenas de desenvolver recursos para levar prazer visual aos usuários.

Na verdade, as animações em UI devem ser utilizadas para auxiliar a experiência e tornar a jornada do usuário mais intuitiva e agradável.

Nesse sentido, uma animação em UI Design deve levar em consideração a condução do usuário pela interface, proporcionando dicas e metáforas ao longo das interações.

Dessa forma, os objetivos das animações em interfaces são:

• Atualização de estado/modo;
• Atrair a atenção do usuário;
• Proporcionar feedback;
• Proporcionar alívio;
• Melhorar a navegação do usuário;
• Ensinar interações.

Atualização de estado/modo

As animações podem ajudar na comunicação sobre mudanças de estado/modos da interface para o usuário.

Nesse sentido, uma animação em UI pode trabalhar de duas formas:

1. Tornando a mudança em algo perceptível ao usuário;
2. Utilizando de metáforas para indicar a mudança de modo.

Por exemplo, o ícone do mouse pode se transformar em lápis ou mão, indicando as mudanças entre modo de edição e visualização, em determinadas interfaces.

Dica de Leitura: Leis de UX e os Princípios Básicos do UX Design

Atrair a atenção do usuário

As animações também têm o objetivo de ajudar o UX/UI Designer a colocar o foco do usuário em determinado elemento ou região da interface.

Esse tipo de atenção é importante para indicar o que o usuário deve fazer em seguida.

Proporcionar feedbacks

As animações também ajudam a dar respostas aos usuários sobre suas ações na interface.

Por exemplo, ao selecionar um objeto, ou clicar sobre um menu, o usuário entende que sua ação foi validada ou não. Nesse sentido, utilizar animações é uma maneira de proporcionar essa resposta.

Proporcionar alívio

O usuário pode se sentir ansioso quando uma operação na interface demora mais tempo do que o esperado.

Nesse sentido, uma animação indicando o progresso da operação ou o tempo que falta para ser concluída, ajudam a aliviar as tensões do usuário.

Melhorar a navegação do usuário

A animação em UI também ajuda a indicar ao usuário em qual estágio da interação ele está e para onde ele deve ir depois.

Comunicar a hierarquia de informação dentro de uma interface pode ser algo bastante complexo e que exige bastante da cognição dos usuários. Nesse sentido, utilizar animações como transições com zoom in e out podem ajudar o usuário a entender em qual nível da interface ele se encontra.

No entanto, é importante utilizar as animações como um suporte à jornada do usuário e não como um substituto de outros elementos visuais — como menus e diagramas, por exemplo.

Além disso, as animações evitam que o usuário se sinta desorientado, sem saber se a interação foi para o próximo estágio ou não. Essa vantagem é importante principalmente no mobile onde os espaços são menores e os contextos podem se perder facilmente.

Dica de Leitura: Qual a Importância da Jornada do Usuário?

Ensinar interações

As animações também ajudam ao usuário entender como devem interagir com certos elementos visuais da interface.

Por exemplo, se um card aparecer na tela vindo da esquerda para a direita, significa que ele pode ser fechado deslizando o dedo da direita para a esquerda.

Dessa forma, o usuário intuitivamente aprende a como interagir com os elementos.

Quais as principais características de uma animação em UI Design?

O desenvolvimento das animações de uma interface devem contemplar 4 características principais:

1. Responsividade: os elementos e animações devem responder rapidamente e com precisão ao input dos usuários;
2. Naturalidade: a física e o mundo real devem inspirar as animações da interface;
3. Consciência: as animações devem ter consciência dos outros elementos ao seu redor. Dessa forma, conseguem responder e interagir apropriadamente com cada um deles;
4. Intenção: as animações precisam de um objetivo e intenção. Nesse sentido, elas devem guiar o usuário pela interface e colocar foco em elementos importantes para ele.

Dessa forma, para contemplar esses princípios ao criar uma animação em UI, você pode se basear em 3 perguntas:

1. A animação tem um objetivo lógico?
2. Ela reflete as regras do mundo real?
3. Ela propõe melhorar a experiência para o usuário, facilitando suas interações?

Tipos de animação de interface

Antes de entender como criá-las, é importante saber quais são os tipos de animação em UI que existem.

De maneira geral, listamos 4 tipos de animações:

• Animação para microinterações;
• Para apresentação de status de um processo;
• Para explicar/ esclarecer;
• Animação para decoração.

No entanto, apesar desses 4 tipos estarem separados, é bastante comum que os designers desenvolvam animações contemplando mais de um tipo ao mesmo tempo.

Animação para microinterações

As animações para microinterações talvez sejam um dos tipos mais importantes.

Nesse sentido, elas contemplam as animações de botões, menus, abrir e fechar caixas e janelas, e qualquer outra imitação do mundo real.

Dessa forma, essas animações garantem informação sobre as ações dos usuários nas interações com a interface. Ou seja, os usuários são informados se o botão foi pressionado, se as lacunas foram preenchidas ou se qualquer ação foi validada ou não.

Portanto, apesar de serem pequenas, as animações para microinterações são bastante úteis e importantes para o usuário. Contemplá-las na interface talvez não lhe garanta elogios, mas a falta delas com certeza proporcionará uma má experiência para o usuário.

Dica de Leitura: Design de Ícones

Apresentação de status de um processo

Esse tipo de animação, assim como anterior, também fornece feedback para o usuário.

Nesse sentido, as animações para apresentação de status se resumem a diferentes tipos de barra de progresso mostrando a evolução de um processo.

Dessa forma, o usuário consegue criar expectativas realistas sobre o tempo que deve esperar para a ação se completar.

Pode parecer algo simples, mas esse tipo de animação em UI faz bastante diferença na experiência do usuário com a interface.

Animações para explicar e esclarecer

Esse tipo de animação é bastante usado em tutoriais ou no primeiro acesso do usuário de um aplicativo.

Nesse sentido, é bastante comum animar personagens, textos e detalhes que proporcionam explicações de comando aos usuários.

Dessa forma, esse tipo de animação é importante para criar mais engajamento dos usuários e informá-los sobre os recursos e estágios da interface que talvez não estejam tão claros, em um primeiro momento.

Animação para decoração

A animação para decoração é um tipo puramente estético para chamar mais a atenção do usuário.

Nesse sentido, não possui um objetivo funcional bem determinado.

Dessa forma, é importante tomar cuidado ao usar esse tipo de animação para não tirar o foco do usuário ou, ainda, poluir a interface.

O que considerar ao criar uma animação em UI Design?

Como visto, as animações devem ajudar o usuário, de diversas maneiras, a interagir com a interface, garantindo-lhe uma melhor experiência.

Mas o que devemos considerar ao desenvolver animações para que esses objetivos sejam cumpridos?

Nesse sentido, Hazwani e Bernard (2016) listaram 4 questões importantes sobre o assunto:

1. Mudanças simples: ao invés de desenvolver animações de transição de telas inteiras, pense nas animações de pequenos componentes. Dessa forma, a construção da estrutura total da interface será mais fácil;
2. Explique as relações entre os elementos: os elementos de uma interface interagem entre si porque, muitas vezes, são complementares. Dessa forma, as animações devem contemplar essa relação. Se um pop-up surge da interação com um botão, a animação deve expressar isso;
3. Evite múltiplas representações: um elemento não deve ser animado de formas diferentes em um mesmo lugar. Esse princípio segue o conceito de padronização de UI;
4. Mantenha a lógica dos espaços: se uma animação fez o menu deslizar para a esquerda, o usuário espera que ele se mantenha a esquerda. Seria muito estranho esse mesmo menu reaparecer vindo do lado direito.

Adicionalmente a esses conceitos, listaremos 5 outros fatores que você deve levar em consideração ao desenvolver animações para a sua interface:

1. Duração e velocidade;
2. Easing;
3. Coreografias;
4. Ações secundárias;
5. Follow Through e Overlapping.

Dica de Leitura: Padronização em UI Design

Duração e velocidade

A duração e velocidade das animações são dois fatores que andam em conjunto.

Nesse sentido, é importante entender que o usuário precisa de certo tempo para interpretar e entender as animações da sua interface.

Portanto, tome cuidado para que as animações não se movimentem rápido demais — causando falha na comunicação — ou devagar demais — causando tédio para o usuário.

Mas então, quais são os números ótimos para a velocidade de uma animação?

De maneira geral, a velocidade ótima fica entre 200ms e 500 ms. Esses números são baseados na capacidade de processamento do nosso cérebro. Desse modo, animações com menos de 100ms não são percebidas por nós.

No entanto, existem alguns fatores que influenciam a velocidade ótima das animações:

• Tamanho da tela: os tamanhos influenciam a velocidade por questões físicas — há menos espaço para movimentos. Dessa forma, para telas de celulares as velocidades devem ficar entre 200-300ms e para tablets entre 400-450ms;
• Animações para Web: por estarmos acostumados com transições instantâneas em sites, esperamos que as animações sejam mais rápidas nessa plataforma também. Portanto, para websites as transições e animações ficam bem entre 150-200ms.

Os números acima são boas práticas e não regras cravadas na pedra.

Se você esta desenvolvendo uma animação decorativa, a velocidade e duração podem ser maiores e mais longos.

Além disso, lembre-se de todos os fatores que envolvem a sensação de velocidade e duração dos objetivos animados, inclusive o seu próprio tamanho.

Elementos menores, como mudanças rápidas, tendem a ser mais rápidos. No sentido oposto, elementos maiores tendem a se mover mais devagar.

Todos esses fatores fazem com que as animações se apresentem com mais naturalidade e realismo.

Easing: Suavização do movimento

O easing é a técnica utilizada para deixar os movimentos das animações mais naturais.

No mundo real, as velocidades não são constantes — a não ser que estejam no vácuo. Ou seja, há sempre acelerações, desacelerações e suavizações dos movimentos.

Nesse sentido, o easing determina as diferentes velocidades que acontecem durante um movimento completo.

Desse modo, considere os seguintes tipos de easing:

• movimentos lineares;
• ease-in;
• ease-out;
• ease-in-out.

Movimentos lineares

Os movimentos lineares acontecem quando um objeto possui velocidade constante. Ou seja, não há forças físicas que atritam o movimento.

Por conta disso, esses movimentos parecem um pouco estranho aos nossos olhos.

Nesse sentido, seu uso é aconselhável para mudanças de status e modo de um objeto, e não para mudanças de posição.

Dica de Leitura: Hierarquia Visual em UI Design

Ease-in

O ease-in corresponde a uma curva de aceleração dos elementos.

Nesse sentido, essa técnica é utilizada geralmente quando um objeto parte do repouso e sai do campo de visão do usuário.

Na curva, podemos observar que a posição inicial do objeto muda devagar e a velocidade aumenta gradativamente.

No entanto, utilize o ease-in apenas quando você deseja que os elementos saiam da visão do usuário de forma definitiva.

Ease-out

O ease-out corresponde diretamente ao oposto do ease-in.

Dessa forma, essa técnica deve ser aplicada em objetos que aparecem na tela e vão desacelerando até atingir a posição desejada.

Ease-in-out

Ease-in-out também é conhecido como curva padrão.

É a junção do ease-in com o ease-out. Dessa forma, representa a aceleração a partir do zero, de um elemento, e a sua desaceleração até sua parada.

Nesse sentido, essa técnica é bastante usada para animar elementos que mudam de posição em uma mesma tela.

No entanto, perceba que uma curva padrão assimétrica deixa os movimentos dos objetos mais naturais. Logo, ao usar essa curva, preocupe-se em enfatizar mais a desaceleração do que a aceleração. Isso fará com que a duração do começo do movimento seja menor do que a duração do final, chamando mais a atenção do usuário para a nova posição do elemento.

Coreografias

Movimentos coreografados são mais agradáveis de se observar do que movimentos descoordenados.

Nesse sentido, a ideia dessa técnica é guiar a atenção do usuário através de movimentos mais fluidos durante as transições.

Existem dois tipos de coreografia dos elementos:

1. de igual interação;
2. de interação subordinada.

Dica de Leitura: Acessibilidade nas Interfaces

Coreografia de igual interação

A coreografia de igual interação determina que os elementos se movimentem baseados em uma mesma regra.

Dessa maneira, a sua apresentação se torna coordenada e mais agradável aos olhos do usuário.

Pegando, por exemplo, o surgimento de cards na tela, a coreografia de igual interação determina que eles aparecerão de forma coordenada, um após o outro, de cima para baixo.

Essa técnica fica um pouco mais complicada quando temos elementos dispostos em grade.

Nesse caso, os elementos devem aparecer respeitando um sentido diagonal. Caso utilize um sentido horizontal ordinal, a visão do usuário se movimentará em zigue zague, tornando a experiência menos agradável.

Coreografia de interação subordinada

A coreografia de interação subordinada determina o movimento de um objeto principal — o qual prende a atenção do usuário — e os demais elementos se movimentam subordinados a ele.

Essa técnica faz com que a atenção do usuário permaneça sobre o elemento mais importante da animação. Caso diversos objetos se movimentem, é importante deixar clara a sequência dos movimentos.

Além disso, é importante prestar atenção na curva de movimento dos objetos.

Se um elemento muda de tamanho desproporcionalmente — um quadrado que se torna em um retângulo — o movimento deve acontecer na forma de um arco.

No entanto, caso o elemento mude de tamanho proporcionalmente, o movimento deve acontecer em linha reta.

Dessa maneira, podemos dividir a curva de movimento em duas categorias: Vertical Out e Horizontal Out.

• Vertical Out: é o movimento que começa na horizontal e termina na vertical;
• Horizontal Out: é o movimento que começa na vertical e termina na horizontal.

O que determina qual categoria de movimento utilizar é o eixo de direção da interface. Se o scroll é vertical, utiliza-se o Vertical Out, mas se for horizontal, utiliza-se o Horizontal Out.

Outra questão importante é o caminho dos objetos. Os elementos não devem se movimentar e passar através de outros elementos. Nesse sentido, as animações devem seguir as leis da física.

Portanto, trace os movimentos dos objetos de maneira limpa, sem a interferência de outros elementos. Ou, então, crie a sensação de erguer o elemento acima dos demais antes de movimentá-lo. Dessa forma, a animação parecerá mais natural.

Ações secundárias

As ações secundárias são aquelas que complementam um movimento principal.

Sendo assim, pense no andar de um personagem animado. Apesar do movimento das pernas ser a ação principal, é importante que ele também esteja movimentando os braços.

No entanto, essas ações secundárias não são tão óbvias nas interfaces — uma vez que não há braços para serem movimentados.

Contudo, os elementos estão relacionados e devemos pensar em como eles podem criar ações secundárias que melhoram a experiência do usuário.

Dica de Leitura: Como Utilizar os Grids?

Follow Through e Overlapping

Follow Through acontece quando um objeto em movimento ultrapassa levemente a posição do seu destino final e volta para então parar.

Pense em um carro em movimento que freia até parar. Ele se move um pouco mais para frente antes de retornar para o local onde deve realmente parar.

Ovelapping determina que nem todas as partes de um objeto param de se mexer ao mesmo tempo.

No exemplo acima, as setas e os ícones param o movimento em tempos diferentes.

Benefícios e desvantagens da animação em UI

Quando pensamos em Animação em UI, diversos benefícios prontamente nos vêm à cabeça, tais quais:

• aumento da usabilidade;
• originalidade e criatividade;
• facilita as interações;
• proporciona feedbacks instantâneos para o usuário e cria expectativas necessárias;
• prende a atenção do usuário a elementos importantes.

No entanto, apesar dessa série de benefícios, o uso das animações deve ser feito com cautela. Caso contrário, podem acabar trazendo mais desvantagens do que vantagens.

Nesse sentido, pense em algumas questões adversas ao uso de animações em UI, como:

• lentidão no carregamento da interface: caso suas animações sejam pesadas, a interface pode necessitar de mais tempo para carregá-las. Dessa forma, esse tempo de espera pode piorar a experiência do usuário;
• sobrecarga de animações: todo movimento deve ter um objetivo dentro de uma interface. Nesse sentido, criar muitas animações apenas para atrair o usuário pode não ser uma boa estratégia. Uma interface com muitos elementos animados pode se tornar cansativa e proporcionar uma experiência ruim;
• distração: as animações devem chamar a atenção do usuário para elementos importantes da interface. No entanto, se usadas de maneira aleatória, podem simplesmente causar o efeito oposto e distrair o usuário durante sua jornada.

Dicas de programas para criar animações

Existem diversos softwares e aplicativos para criar animações para as interfaces.

Nesse sentido, vamos citar 4 desses programas:

• ProtoPie;
• Principle;
• After Effects;
• InVision Studio.

ProtoPie

O Protopie reúne interações, animações e prototipação em um único aplicativo.

Com ele, você cria protótipos de alta fidelidade em uma interface limpa, simples e fácil de ser utilizada.

Além disso, o ProtoPie permite que você teste a interface em qualquer dispositivo mobile e possui integração com outros programas, como o Sketch.

Principle

Com o Principle você consegue criar interfaces animadas sem a necessidade de saber programação.

Além disso, o Principle consegue sincronizar sua interface em tempo real com o app para mobile. Dessa forma, você tem um preview da animação tanto no desktop quanto no celular.

Uma desvantagem do programa é que ele foi desenvolvido exclusivamente para o MAC OS. Portanto, pode haver certa dificuldade de uso para quem não está familiarizado.

After Effects

O AE é uma ferramenta bastante antiga, criada para o mercado audio visual dos anos 90.

No entanto, não é raro que seja utilizado para criar interfaces animadas.

Apesar de ser uma ferramenta poderosa, o AE não é um programa de prototipagem por si só.

InVision Studio

O InVision Studio traz um balde cheio de recursos e elementos de interação que podem ser utilizados no desenvolvimento do seu protótipo.

Com ele, fica fácil customizar animações e transições baseadas em diversas ações e gestos.

Além disso, você consegue criar os elementos de forma responsiva para atender os diversos tamanhos de tela dos dispositivos.

Dica de Leitura: Ferramentas de UX/UI Para Você Conhecer!

‍

‍