Você entra em um site.

O título aparece deslizando da esquerda. A imagem surge de baixo. O botão cresce quando você passa o mouse. Uma seta pulsa. Um número começa a contar.

Você rola a página. Outra coisa aparece.

Rola mais um pouco. Outra coisa desliza.

Mais um pouco. Uma imagem gira.

Você começa a suspeitar que está navegando em um site ou se participando de uma apresentação multimídia.

Finalmente, depois de toda essa movimentação, você descobre o que queria saber: a empresa vende móveis planejados.

Parabéns! Você chegou ao destino.

Só não sabe exatamente por que precisou assistir a um pequeno espetáculo da Broadway para chegar até lá.

Animação não é o problema

Antes que alguém interprete este artigo como uma declaração de guerra contra CSS, JavaScript e qualquer coisa que se mova na tela, vamos deixar uma coisa clara:

animações podem ser excelentes.

Uma animação bem pensada pode:

• chamar atenção para uma informação importante;
• mostrar uma mudança de estado;
• orientar o usuário;
• explicar um processo;
• dar retorno visual depois de uma ação;
• melhorar a percepção de continuidade entre elementos;
• tornar uma interface mais agradável.

O problema começa quando a pergunta deixa de ser:

“Essa animação ajuda o visitante?”

e passa a ser:

“Onde podemos colocar mais uma?”

É aí que começa a festa.

Porque tudo precisa entrar voando?

Existe uma tendência curiosa nos sites modernos.

Você abre uma página. O conteúdo já está lá. Você consegue ler. Tudo funciona.

Então alguém decide que aquilo está “parado demais”. E começa:

• Título entrando pela esquerda.
• Imagem entrando pela direita.
• Botão surgindo de baixo.
• Texto aparecendo palavra por palavra.
• Ícones flutuando.
• Números contando.
• Elementos fazendo fade-in.

Tudo isso para produzir uma sensação de movimento.

Porque, aparentemente, um site que permanece parado durante a leitura está cometendo algum tipo de crime contra a modernidade.

Mas existe uma questão básica:

O visitante precisa dessa animação?

Se a resposta for não, talvez ela não precise estar ali.

O visitante não entrou no seu site para assistir a uma coreografia

Esse é um ponto importante. O objetivo de uma página normalmente é comunicar alguma coisa. O visitante quer:

• saber o que a empresa faz;
• descobrir quanto custa;
• encontrar um produto;
• conhecer um serviço;
• localizar um endereço;
• tirar uma dúvida;
• fazer uma compra;
• entrar em contato.

Ele não acordou naquela manhã pensando:

“Espero encontrar hoje uma bela animação de entrada para o terceiro parágrafo.”

Ele provavelmente nem percebe conscientemente que o terceiro parágrafo entrou deslizando.

E isso pode ser um ótimo sinal.

Uma boa animação muitas vezes passa despercebida porque simplesmente faz seu trabalho.

Uma animação ruim exige atenção.

O problema começa quando a animação atrapalha o conteúdo

Imagine que você encontrou exatamente a informação que queria.

Você começa a ler. Então o conteúdo se movimenta. Você tenta acompanhar. Mais um elemento aparece. A página muda. Você continua. Outro elemento entra.

Agora você está tentando ler e esperar a página terminar de se mexer ao mesmo tempo.

Isso não é necessariamente um problema técnico. É um problema de comunicação.

Uma página precisa respeitar uma coisa bastante importante: a capacidade humana de ler.

Parece uma exigência razoável.

“Mas é só uma animaçãozinha”

Uma animaçãozinha….Depois outra….E outra….E mais uma.

O problema raramente está em um único efeito, está na soma.

Um efeito simples de transição pode ser praticamente irrelevante.

Mas uma página pode carregar:

• vários scripts;
• bibliotecas de animação;
• efeitos acionados durante a rolagem;
• imagens grandes;
• vídeos;
• fontes externas;
• sliders;
• elementos interativos;
• efeitos de parallax;
• componentes de terceiros.

Cada recurso individual pode parecer perfeitamente justificável.

Quando todos resolvem aparecer juntos, o navegador recebe uma pequena lista de tarefas.

E o usuário recebe uma página que parece ter tomado três cafés.

Animação não significa automaticamente site lento

Aqui vale colocar uma epécie de freio na discussão.

Seria errado dizer: “Animações deixam seu site lento.”

Não é tão simples. Uma animação feita com CSS pode ser bastante eficiente.

Determinadas propriedades são especialmente adequadas para animação, enquanto outras podem exigir mais trabalho do navegador.

Animações também podem ser executadas de maneiras muito diferentes.

Uma coisa é uma transição simples e bem implementada. Outra é uma sequência complexa de efeitos controlados por JavaScript, acompanhando continuamente a posição da rolagem e manipulando vários elementos da página.

Portanto:

não é a existência da animação que determina se o site terá bom desempenho.

É a implementação e, principalmente: é preciso perguntar se o benefício justifica o custo.

Seu visitante está usando um computador de R$ 15 mil?

Talvez você tenha desenvolvido seu site em uma máquina poderosa. Monitor grande. Processador rápido. Internet excelente.

Tudo funcionando perfeitamente.

Só existe um pequeno detalhe: seu visitante não mora dentro do seu computador.

Ele pode estar usando:

• um celular antigo;
• uma conexão móvel instável;
• pouca memória disponível;
• um navegador com várias abas abertas;
• um dispositivo de entrada mais simples;
• uma tela pequena.

O site precisa funcionar no mundo real e não apenas no computador em que foi desenvolvido. Efeitos demais podem atrapalhar siginificativamente a navegação pelo usuário.

E existe algo chamado acessibilidade

Aqui a brincadeira fica um pouco mais séria.

Algumas pessoas podem ter desconforto com movimentos, transições ou efeitos visuais.

Sistemas operacionais e navegadores oferecem mecanismos para que o usuário indique preferência por reduzir movimento, como a configuração prefers-reduced-motion.

Uma implementação responsável pode respeitar essa preferência.

Isso não significa que qualquer animação seja automaticamente inacessível.

Significa que: se você decide colocar movimento em uma interface, deveria lembrar que nem todo mundo quer ou consegue lidar com a mesma quantidade de movimento.

E isso é uma boa razão para pensar antes de transformar cada bloco da página em uma escola de samba digital.

O famoso “efeito uau”

Existe também o efeito uau.

O designer mostra uma animação e todo mundo na reunião: “Uau!”

Cinco minutos depois: “Ficou incrível.”

Duas semanas depois: “Essa animação server para quê mesmo?”

Esse é um problema clássico de qualquer recurso visual. Uma coisa pode impressionar na primeira apresentação e ainda assim não melhorar a experiência de quem utiliza o site diariamente.

O visitante não está avaliando o portfólio do designer. Ele está tentando resolver alguma coisa.

Animação boa tem uma função

Uma boa pergunta para fazer sobre qualquer efeito é:

“O que essa animação está comunicando?”

Se você consegue responder:

“Ela mostra que este botão foi ativado.” -> Ótimo.

“Ela indica que o conteúdo foi carregado.” -> Ótimo.

“Ela mostra como funciona o mecanismo do produto.” -> Melhor ainda.

“Ela ajuda o usuário a perceber que esta seção existe.” -> Pode fazer sentido.

Agora tente responder: “Por que o título entra girando?”

Se a resposta for: “Porque fica bonito.”

Tudo bem, mas talvez você tenha encontrado um elemento que pode existir sem aquela animação.

O botão que pulsa até você clicar

Existe uma categoria particularmente curiosa: “O botão que parece estar desesperado.”

Ele pulsa. Aumenta. Diminui. Muda de cor. Faz sombra. Volta. Pulsa novamente.

Você começa a imaginar que, se não clicar imediatamente, alguém vai ligar para saber se está tudo bem.

Um botão precisa parecer clicável. Não precisa necessariamente pedir socorro.

Chamadas para ação podem utilizar movimento com moderação para chamar atenção, mas movimento constante também pode virar ruído visual.

E quando tudo chama atenção, nada chama atenção.

O problema do “scroll”

Outro clássico:

“Quando o usuário rolar, vamos animar tudo.”

Excelente…..Só existe uma questão: o usuário vai rolar a página de qualquer maneira.

Então talvez não seja necessário transformar cada movimento do mouse em um evento cinematográfico.

Você rola. O título aparece.

Rola. A imagem aparece.

Rola. O número conta.

Rola. O gráfico cresce.

Rola. O depoimento desliza.

Rola. Mais alguma coisa aparece.

Em determinado momento, o visitante não está mais navegando pelo conteúdo.

Está esperando o conteúdo terminar de entrar.

E os carrosséis?

Ah, os carrosséis…. Aquela solução fantástica que permite colocar seis informações em um espaço onde você só queria colocar uma.

O visitante vê a primeira. Depois a segunda. Depois a terceira. Talvez nunca veja a quarta.

Porque ninguém sabe se precisa esperar, clicar, arrastar ou simplesmente desistir.

Carrosséis podem ter usos legítimos.

Mas colocar informações importantes dentro de um elemento que depende de movimento para ser descoberto merece bastante cuidado.

Se uma informação é realmente importante, talvez ela não devesse depender de uma animação para ser encontrada.

Parallax: bonito até explicar por quê

O efeito parallax pode criar uma sensação interessante de profundidade.

Uma camada se move em velocidade diferente da outra.

Visualmente, pode ficar muito bonito.

Mas existe uma pergunta maravilhosa para fazer: “O que o visitante ganha com isso?”

Se a resposta for: “Nada, mas fica bonito.”

Então temos uma conclusão honesta.

Fica bonito.…E tudo bem.

Nem todo elemento precisa justificar sua existência com uma tese de doutorado.

Mas quando o efeito começa a aumentar complexidade, processamento ou dificuldade de manutenção, vale perguntar se aquele “bonito” ainda está pagando a conta.

Mais efeitos também significam mais manutenção

Existe outro personagem nessa história que costuma ser esquecido: o futuro.

O site é criado hoje. Tudo funciona. As animações são lindas.

Seis meses depois:

• o tema foi atualizado;
• um plugin mudou;
• uma biblioteca deixou de ser compatível;
• o navegador mudou alguma coisa;
• uma seção foi removida;
• o designer não trabalha mais na empresa.

E aquela animação misteriosa continua lá ou não…..Ninguém sabe exatamente como funciona. Mas ninguém quer mexer.

Porque: “Vai que quebra?”

Parabéns…. Você acabou de criar dívida técnica com efeitos especiais.

Seu site precisa parecer moderno?

Essa é outra armadilha.

Existe uma confusão frequente entre: moderno e cheio de efeitos.

Um site pode ser moderno porque:

• é rápido;
• funciona bem no celular;
• possui boa hierarquia de informação;
• é acessível;
• tem conteúdo claro;
• facilita a navegação;
• utiliza tecnologias atuais;
• é seguro;
• recebe manutenção.

Nada disso exige que uma imagem atravesse a tela girando.

Aliás, um site extremamente simples pode ser muito mais atual do que uma página visualmente sofisticada construída sobre técnicas ultrapassadas.

O teste dos cinco segundos

Existe um teste simples que pode ajudar.: Abra a página. Olhe durante alguns segundos.

Depois pergunte:“Eu consigo dizer rapidamente o que esta empresa faz?”

Se a resposta for não, talvez exista um problema.

Agora imagine que, durante esses cinco segundos, você recebeu:

• três animações;
• um pop-up;
• um banner;
• um vídeo;
• um carrossel;
• um botão pulsando;
• uma imagem entrando pela lateral.

Talvez o problema não seja falta de movimento. Talvez seja movimento demais.

Antes de colocar uma animação, faça estas perguntas

1. Ela ajuda o visitante?

Se não ajuda, por que está ali?

2. Ela comunica alguma coisa?

Movimento pode ter significado.

3. Ela funciona bem no celular?

Não assuma automaticamente que sim: Teste.

4. Ela continua funcionando com menos movimento?

Considere usuários que preferem reduzir animações.

5. Ela adiciona complexidade?

Se sim, essa complexidade é justificável?

6. Ela continuará fazendo sentido daqui a dois anos?

Essa é especialmente importante. Se uma animação tem validade de exsistência curta, será que vale mesmoa pena usá-la?

7. Se eu remover essa animação, alguém vai sentir falta?

Se ninguém sentir… Talvez ela já tenha respondido à própria pergunta.

A melhor animação pode ser aquela que você nem percebe

Uma boa interface não precisa ficar exibindo seus truques. Ela precisa funcionar.

Às vezes a melhor animação é aquela que:

• deixa claro que algo aconteceu;
• orienta o olhar;
• mostra uma mudança;
• ajuda a entender uma relação;
• torna uma interação mais natural.

Ela não precisa gritar:

“OLHE COMO EU SEI FAZER CSS!”

O visitante não está contratando seu site para assistir a uma demonstração de tecnologia. Ele está tentando fazer alguma coisa.

Então, seu site precisa mesmo de todas essas animações?

Provavelmente não.

Mas isso não significa que você precise remover todas. Significa que cada uma deveria ter um motivo para existir.

Se uma animação melhora a compreensão, ajuda na navegação, dá feedback ou torna uma interação mais clara, mantenha.

Se ela simplesmente faz um elemento entrar pela esquerda porque alguém achou que a página estava muito parada… talvez seja hora de deixá-lo entrar pela esquerda sem animação nenhuma.

Ele provavelmente vai sobreviver.

Um site não precisa se mexer para provar que está vivo

Seu visitante não precisa de um site que faça malabarismo. Precisa de um site que:

• carregue,
• explique,
• funcione,
• seja fácil de usar
• e resolva o que ele veio resolver.

Se algumas boas animações ajudarem nisso, excelente.

Se não ajudarem, não há problema algum em deixar a página quietinha. Ela não está morta. Está trabalhando.

E se o seu site já estiver fazendo coisas demais?

Talvez o problema não seja colocar mais uma animação. Talvez seja parar um pouco e olhar para o site inteiro.

Na HostMeta, a gente trabalha justamente com isso: sites que precisam funcionar bem, ser mantidos corretamente e continuar fazendo sentido para quem realmente precisa usá-los.

Sem transformar cada página em uma apresentação de PowerPoint com efeitos especiais.

Se você acha que seu site pode estar precisando mais de uma revisão do que de uma novidade, fale com a HostMeta.