Regras básicas para animações na web

As animações podem fazer um site se destacar. Ou eles podem facilmente matar a experiência. Ao trabalhar com animações da web, existem algumas coisas que podem dar errado, como adicionar animações que não servem para nada, definir durações que são muito longas ou muito rápidas, ou não usar o tipo certo de animação em primeiro lugar. Mesmo se todas essas coisas forem feitas corretamente, um estilo de animação   pode não parecer bom, especialmente se eles não estiverem em sincronia com outras animações ou de acordo com a personalidade geral do site.

Outra coisa importante a observar é que nem todas as experiências digitais devem compartilhar exatamente as mesmas animações. Um site de marketing pode precisar de animações diferentes de um site de produto ou um aplicativo móvel. Embora os mesmos princípios básicos de movimento se apliquem a todos, existem algumas nuances com base no tipo de conteúdo e no tamanho da tela.

Por exemplo, digamos que você queira tornar um formulário chato mais emocionante de preencher. Você adiciona animações encantadoras a cada passo que segue adiante, mas isso é uma boa ideia para um formulário que você sabe que um usuário precisa visitar e preencher com frequência? Assistir às mesmas animações repetidas vezes pode ser irritante nesse caso.

Claramente, existem condições e considerações que servirão bem às animações. Neste artigo, discutiremos sobre como adicionar animações em sites de produtos. Vamos nos aprofundar um pouco nisso e estabelecer algumas regras básicas para trabalhar com eles. Não tanto um manifesto, mas mais como uma linha de base que podemos fazer referência e meio que nos unir.

 

Em primeiro lugar, qual é uma boa situação para uma animação?

Quando bem usada, uma animação é quase como um conteúdo – fornece contexto e tem um significado que ajuda a informar ao usuário que algo aconteceu e até mesmo o que esperar em seguida. Aqui estão algumas boas situações em que a animação pode fazer exatamente isso.

Transição de blocos de IU

Este pode ser o caso de uso mais comum para animações. Quando um bloco de IU é movido de sua posição original, ou adicionado ou removido do DOM, é uma boa ideia permitir que os usuários vejam isso acontecer.

Carregando conteúdo

Uma animação de carregamento é algo que todos nós vimos e encontramos em algum momento! Caso contrário, uma visita rápida ao CodePen mostra o quão populares são as animações de carregamento. Eles são ideais como espaços reservados para conteúdo , onde os usuários não apenas recebem uma dica do que esperar quando o conteúdo é carregado, mas também têm a confiança de que algo está sendo carregado.

Além de tornar o site mais rápido, também evita o refluxo de conteúdo instável, que pode ser super desorientador, pois os elementos são renderizados em momentos diferentes.

O carregamento de espaços reservados é melhor, é claro, quando você sabe a altura dos blocos de conteúdo com antecedência.

Sugestão

Geralmente é uma animação única em que o objetivo é dar aos usuários uma dica de onde olhar ou o que fazer a seguir. Algumas UIs são complexas por natureza. Um pequeno brilho ou ondulação pode ajudar a orientar os usuários no processo de conclusão de uma tarefa ou ativação de um recurso específico.

Não precisa ser tudo na cara do usuário. Em vez disso, uma pequena dica visual que informa sem assumir toda a experiência será suficiente.

Microinterações

Geralmente usadas em elementos individuais, as microinterações fornecem aos usuários um feedback visual instantâneo após a execução de uma ação. Eles inspiram confiança de que uma ação realizada foi realizada e de que algo aconteceu como resultado – ao mesmo tempo que adicionam um pouco de alegria ao mesmo tempo.

Eles não precisam ser sofisticados, como a animação do coração do Twitter , mas devem indicar algum tipo de feedback ou resposta à ação do usuário. Basta verificar como é sutil – mas encantador – quando um usuário faz algo tão pequeno quanto adicionar um item de uma linha a outra:

OK, então quando devemos evitar animações?

Acabamos de ver algumas situações em que as animações fazem muito sentido. Vamos explicar as condições opostas em que as animações geralmente contribuem muito pouco ou nada para a experiência do usuário. Em outras palavras, eles se tornam perceptíveis por motivos ruins e provavelmente é melhor deixá-los de fora da equação.

Transições de rota

Sim, normalmente não vemos esse tipo de animação em sites de produtos, mas vale a pena mencionar para entender por que não fazem sentido. Essas transições funcionam melhor em aplicativos móveis devido à pequena área da tela. Em telas de desktop, há uma área muito maior para animar. Para animar todo o conteúdo sem problemas, você precisará definir mais duração do que na tela do celular. Isso simplesmente irrita os usuários, fazendo-os esperar para ver o conteúdo, pois já estão acostumados a ver a visibilidade instantânea do conteúdo na web. E nos piores casos, as transições de rota podem não apenas ser uma distração, mas também uma grave preocupação de acessibilidade quando se trata de sensibilidade ao movimento .

• 

No carregamento inicial do conteúdo da página

Você pode fazer isso em sites de marketing quando quiser educar os usuários ou mover seu foco para um determinado bloco. Para sites de produtos, será novamente irritante ver a mesma animação sempre que o usuário navegar entre as páginas.

Quando é inesperado

É uma boa ideia considerar o estado de espírito do usuário enquanto ele usa um recurso específico. É esperado feedback visual onde a animação está sendo usada? Caso contrário, pode confundir mais do que ajuda.

Por exemplo, verifique este aplicativo de calculadora. Não há nada de novo no padrão da IU quando os números são inseridos e os cálculos são executados. Os usuários já sabem onde se concentrar. Não adianta fazer os usuários esperar antes de ver os resultados ou surpreendê-los com algo que não fornece nenhum significado ou benefício adicional.

Quando você não tem certeza de como funciona

É importante ter em mente que nem todos os dispositivos, conexões de internet e navegadores são iguais aos olhos da animação. Eric Bailey resume isso muito bem em seu mergulho profundo na prefers-reduced-motionconsulta à mídia:

Também precisamos reconhecer que nem todo dispositivo que pode acessar a web também pode renderizar animações, ou renderizar animações suavemente . Quando a animação é usada em um dispositivo de baixo consumo de energia ou de baixa qualidade com suporte “técnico”, a experiência geral do usuário é prejudicada. Algumas pessoas até buscam deliberadamente essa experiência como um recurso.

O título acima dessa citação é um lembrete sábio: a animação é um aprimoramento progressivo. Se planejamos usar uma animação – especialmente aquelas que ameaçam dominar a experiência – temos que considerar pelo menos uma maneira de optar por não usá-la e se a experiência ainda funciona sem a animação. prefers-reduced-motioné o melhor lugar para começar.

Quando o propósito não é claro

Por último, eu diria que não adicione animações sempre que não tiver certeza absoluta sobre o propósito a que servem. A animação supérflua pode distrair e prejudicar mais do que ajuda. Este tweet de 2018 ainda é muito verdadeiro:

Quanto tempo deve durar uma animação?

A duração de uma animação é tão importante quanto o tipo de animação que está sendo usado. Espere muito e a animação pode parecer se arrastar. Vá rápido demais e os detalhes interessantes da animação podem se perder (no melhor dos casos) ou desorientar completamente o usuário (no pior dos casos).

Então, por quanto tempo devemos definir a duração de uma animação? Vou te dar uma resposta clássica: depende.

Quanto maior a distância, geralmente maior a duração

As animações (como as que vimos anteriormente) podem ser limitadas a uma curta duração. Mas se estivermos falando sobre uma transição massiva onde um objeto está viajando uma longa distância, podemos sentir que precisa de algo um pouco mais para garantir que as coisas não se movam muito rápido. Mas evite usar durações superiores a 400ms.

Veja este exemplo. Observe como o conteúdo demora um pouco mais para fazer a transição porque tem uma distância maior para percorrer. Mas também observe que ele não precisa durar muito porque o objeto que sai desaparece no objeto que entra, e o objeto que entra vem a uma distância menor, em vez de fazê-lo percorrer toda a tela.

Isso mostra que mesmo as grandes animações podem ser otimizadas de forma que pareçam mais curtas sem se perder na mistura.

Use uma duração mais curta quando o usuário disparar a ação

Isso é importante e um erro comum. Se o usuário já espera que algo aconteça – e o foco já está claramente onde deveria estar – então não faz sentido fazer o usuário esperar segundos para concluir o que já esperava.

Por outro lado, se a mudança for acionada automaticamente pelo sistema, uma duração maior faz sentido, pois permitirá ao usuário acompanhar rapidamente a mudança que está ocorrendo. Pense em dicas de ferramentas ou modais que não são acionados pelo usuário e não requerem atenção imediata.

As animações de entrada e saída podem ter durações diferentes

Às vezes, faz sentido manter a animação de um objeto que está entrando na visualização um pouco mais rápido do que a animação de um objeto que está saindo, especialmente quando o usuário espera ver essa mudança de conteúdo.

Veja o exemplo anterior de menu suspenso. Quando um usuário clica nele, ele deseja ver os itens do menu imediatamente – pelo menos, eu não teria que esperar para ver os itens do menu. Quando o usuário clicar, deixe o submenu entrar rapidamente e, em seguida, saia suavemente quando for dispensado, para evitar distrair o usuário na saída, quando não for mais necessário.

Mas isso não se aplica a grandes blocos de IU. Em blocos maiores, na maioria dos casos, é necessária uma duração superior a 200ms. Nesses casos, inverter as durações e permitir que um bloco saia mais rápido do que foi inserido garante que ele não bloqueará a visualização da página existente.

A duração da animação em todo o produto deve estar em sincronia entre si e com a personalidade da marca

Eu encontrei muitos produtos em que um recurso tem animações muito boas e outro é simplesmente muito rápido, lento ou não tem nenhuma animação.

Pior ainda é quando as animações dentro do mesmo recurso não estão em sincronia.

É aí que ter um guia de estilo com diretrizes de animação bem pensadas que podem ser usadas consistentemente em toda a experiência pode ser uma grande ajuda.

O quão simples é muito simples? Ou quão complexo é muito complexo?

A complexidade de uma animação deve ser baseada na frequência com que se espera que os usuários a encontrem, entre outras coisas que vimos até agora. Quanto mais frequentemente se espera que os usuários o vejam, mais simples deve ser a animação. Isso deve substituir as regras anteriores de duração, quando necessário.

Por exemplo, a animação abaixo funcionaria em um menu principal, mas usar o mesmo efeito surpreendente em menus suspensos em todo o produto é demais para entender. Há realmente um ponto de diminuição dos retornos nas animações, assim como há em economia.

Mas, ei, se esse tipo de animação complexa é usado com moderação em instâncias intencionais, então pode ser incrivelmente delicioso!

Mas sim, você pode ser criativo com as animações onde há uma decisão pendente do usuário ou durante o processamento dos dados. Isso torna os tempos de espera mais envolventes, como quando a rede é interrompida ou uma senha errada é enviada.

Qual função de atenuação você deve usar?

Facilidade? Fácil de entrar? Fácil de sair? Fácil de entrar e sair? Alguma curva Bezier cúbica?

A flexibilização correta segue as leis da física. Os princípios de animação da Disney são o padrão ouro quando se trata disso.

Para animações de entrada , use o efeito de salto se quiser atenção imediata do usuário, caso contrário, use uma aceleração suave (e desaceleração, nesse caso) que é incremental em vez de linear. O salto deve refletir a gravidade. A postagem de Brandon Gregory sobre animações de sentimento natural fornece todos os tipos de exemplos que estão de acordo com as leis da física.

Você pode consultar este Síntese de Adam Argyle para definir easings em CSS.

Luzes, câmera e … ação intencional!

A atenção aos detalhes é o que separa as animações excelentes das normais (ou mesmo quebradas). Se você está no processo de aprender animações da web ou atualmente trabalhando em um projeto que as exige, espero que esta postagem possa servir como um conjunto de regras básicas úteis para ajudá-lo a obter o máximo de seu trabalho.

Além das regras, também mencionaria que boas animações exigem tempo e prática. Claro, muitas das coisas que abordei aqui são um tanto anedóticas e baseadas na experiência pessoal, mas isso é o resultado de desenvolver um olho para animações depois de anos trabalhando com elas. Aprenda, experimente, melhore e continue aprendendo. Do contrário, você pode acabar com uma coleção de animações que proporcionam experiências ruins ao usuário e até prejudicam a acessibilidade do seu site.