Animação em um site: como mantê-la rápida e fácil para todos.
A animação pode deixar um site mais vivo. Mal feita, deixa o site lento, esconde o conteúdo e chega a deixar algumas pessoas enjoadas. Veja como usamos movimento em sites de empresas para ajudar em vez de atrapalhar.
O movimento deve explicar, não enfeitar.
Um bom movimento mostra para onde olhar ou como algo funciona: uma seção que entra quando você chega nela, um resultado subindo numa lista, um botão que reage quando você toca. Se uma animação não ajuda a entender a página, normalmente é melhor tirá-la.
Respeite quem desliga o movimento.
Celulares e computadores têm uma opção chamada reduzir movimento. As pessoas ativam porque a animação pode causar tontura ou dor de cabeça, ou simplesmente porque distrai. Um site bem feito lê essa opção e se acalma: nada desliza, não há parallax, o conteúdo simplesmente aparece.
Mantenha o site rápido.
- Anime a posição e a transparência, não o tamanho nem o layout. O navegador lida com isso com pouco esforço, então tudo fica suave até em celulares antigos.
- Nunca faça as pessoas esperarem uma animação para poder ler ou tocar.
- Carregue as partes pesadas, como vídeos, só quando aparecem na tela.
- Teste num celular de verdade, não só num computador rápido.
Nunca esconda o conteúdo.
O texto precisa ser legível mesmo se o código da animação não carregar. O Google, as ferramentas de IA e os leitores de tela leem a página, e nenhum deles rola como uma pessoa. Se suas palavras só aparecem depois de uma animação, alguns deles podem nunca vê-las.
O básico vem primeiro.
O movimento fica em cima de um site acessível, não no lugar dele. Cada página deve funcionar com teclado, mostrar um contorno visível no que está selecionado, descrever as imagens em texto, identificar cada campo de formulário e ter contraste suficiente para leitura. No nosso próprio site buscamos o nível AA da WCAG 2.2, e nossas animações param ou se acalmam quando o aparelho pede movimento reduzido. Leia nossa declaração de acessibilidade.
Perguntas.
A animação deixa um site mais lento?
Pode. Animar a posição e a transparência, carregar as partes pesadas só quando necessário e testar em celulares reais mantém rápido um site com movimento.
O que é movimento reduzido?
Uma opção em celulares e computadores que pede aos apps e sites para usar menos animação. Um site bem feito lê essa opção e acalma as animações.
A animação prejudica o SEO?
Não, se o texto estiver na página desde o início. O problema é quando as palavras só aparecem depois de uma animação, porque buscadores e ferramentas de IA podem não vê-las.
Quer um site com movimento que continue rápido e fácil de usar? Veja como criamos sites, ou mande uma mensagem.