Animações: Por que sua página de destino se parece rígida (ou como um circo)

Você entregou sua página sem movimento. Estática. Nítida. E se parece sem vida. Como um PDF.

Então você foi pelo outro caminho e adicionou animações a cada seção. Texto herói flutua. Cartões saltam. Ícones giram. A página agora se parece um caça-níqueis, e visitantes vão embora antes de ler.

Movimento em uma página de destino é binário: ou torna a página polida e confiante, ou torna a página barata e lenta. Não há meio termo. A linha entre os dois é a maior parte sobre contenção.

O que animação UX realmente é

Animação em uma UI é movimento aplicado a um elemento de interface para comunicar algo. Um botão foi clicado. Um menu abriu. Conteúdo está carregando. A página está respondendo.

O ponto é reduzir trabalho mental. Movimento explica a relação entre coisas: "este menu veio de lá," "este item acabou de ser deletado," "isso está carregando, não quebrado." Feito bem, você mal percebe.

"Bom design é quando você nem sequer percebe." , Dieter Rams

As melhores animações em uma página de destino são aquelas que um visitante nunca conscientemente vê. Eles apenas sentem que a página funciona.

Por que isso importa em uma página de destino

Movimento está fazendo trabalho real pela ou contra sua conversão.

Direcione atenção

O olho é fiado para seguir movimento. Um pulso sutil ou escala no CTA primário, uma revelação suave em um recurso chave. Visitantes olham para lá.

Confirme cliques

Tocar um botão que não reconhece o toque parece quebrado. Uma escala de 100ms ou mudança de cor diz aos visitantes "sim, nós recebemos."

Defina contexto

Modais que desaparecem do fundo, sidebars que deslizam. Visitantes aprendem como dismissar sem pensar. Animação constrói o mapa mental.

Máscara esperando

Uma espera de 2 segundos com um spinner parece mais curta que uma tela em branco de 2 segundos. Não muda o tempo de carregamento. Muda como se parece.

Como usar isso em sua página

Algumas regras e você terá 90% do benefício.

1. Menos é mais

Cada animação deveria se justificar. Se não ajuda o visitante a entender o que está acontecendo, corte-a. Grande movimento varrido em uma página de destino principalmente distrai da mensagem.

2. Seja consistente

Se o modal desliza do fundo em uma página, desliza do fundo em cada página. Movimento desaglomerado faz o produto parecer improvisado.

3. Acerte a janela de timing

Muito rápido e visitantes perdem a pista. Muito lento e a página parece preguiçosa.

• Ponto doce: 150ms para 500ms.
• Escala importa: Uma pequena morph de ícone pode ser 150ms. Uma transição de página pode ser 400ms.

4. Escolha a curva de easing correta

Coisas reais aceleram e desaceleram. Curvas de easing falsificam isso.

a. Ease-in (aceleração)

Começa lento, acelera. Use para elementos deixando a tela. Parece o objeto ganhando momentum para sair.

b. Ease-out (desaceleração)

Começa rápido, desacelera. O padrão para UI. Menus, popups, modais, cartões. Deveriam parecer pouco antes de pousar.

c. Ease-in-out (padrão)

Lento em ambos os fins, rápido no meio. Melhor para transições entre dois estados estáticos na mesma tela, como um ícone morphing.

d. Linear (velocidade constante)

Se parece mecânico. Reserve para mudanças sutis como desvanecimento contínuo ou scroll de fundo.

Maneiras comuns que construtores quebram isso

Over-animating

• O erro: Cada elemento na página salta, desliza, ou desvanece em scroll. Bem-vindo ao circo.
• O conserto: Escolha um ou dois elementos por seção. Deixe tudo o mais parado.

Ignorando "reduzir movimento"

• O erro: Alguns visitantes ficam nauseados por movimento pesado. Sem respeitar prefers-reduced-motion, sua página é inutilizável para eles.
• O conserto: Honre a media query CSS. Desabilite ou simplifique movimento quando definido.

Transições bloqueantes lentas

• O erro: Uma animação de 1 segundo tem que terminar antes visitantes poderem clicar em qualquer outra coisa.
• O conserto: Mantenha durações sob 500ms e deixe visitantes interagirem enquanto movimento está rodando.

Como produtos reais lidam com isso

Gmail

A barra lateral Gmail usa um ease-out suave. O menu se parece leve, dismissível, e claramente uma camada em cima da caixa de entrada. Não uma página nova. Detalhe pequeno, polimento gigante.

Princípios relacionados

Recursos e leitura adicional

Material Design - Movimento

Referência do Google para implementar movimento em interfaces.

NN Group: Animação para Atenção e Compreensão

Como visitantes percebem e processam movimento em interfaces.

Perguntas frequentes