Animação boa é a que ninguém percebe que está lá

Existe site que parece rápido mesmo carregando no mesmo tempo que o do concorrente, e existe site que parece arrastado mesmo indo bem nos testes de velocidade. Boa parte dessa diferença está num detalhe que quase ninguém percebe conscientemente: quanto tempo cada coisa leva para se mover na tela. Um menu que abre em oito décimos de segundo não é lento no relógio. É lento na sensação, e é a sensação que fica.

Meio segundo é mais tempo do que parece

Há uma régua conhecida para isso. Em 9 de fevereiro de 2020, Page Laubheimer publicou pelo Nielsen Norman Group a recomendação mais citada sobre movimento em interface: a maior parte das animações de tela deve durar entre 100 e 500 milésimos de segundo, e um retorno simples, como marcar uma caixinha ou virar um botão de liga e desliga, funciona melhor perto dos 100. O texto ainda registra um vício comum, que é ver animação longa demais com muito mais frequência do que curta demais.

Quinhentos milésimos de segundo soam como nada até alguém repetir o gesto quarenta vezes numa sessão. Aí a conta muda. Um menu que leva oito décimos para abrir vira espera, e espera repetida vira irritação, mesmo que a pessoa nunca consiga explicar por que aquele site pareceu lento se as páginas carregam rápido.

Existe uma escala clássica por trás disso, também do Nielsen Norman Group: até um décimo de segundo a reação parece instantânea, até um segundo o pensamento continua fluindo mesmo que o atraso seja percebido, e a partir de dez segundos a atenção vai embora. Movimento de interface vive quase inteiro dentro da primeira faixa. Ele existe para confirmar que algo aconteceu, não para ser assistido.

O que o movimento faz quando é bem usado

Movimento resolve três coisas concretas. Ele confirma uma ação, mostrando que o clique foi registrado. Ele explica de onde veio o que apareceu, ligando o botão ao painel que abriu, o que evita a sensação de que a tela pulou. E ele conduz o olho para o que mudou, especialmente quando a mudança acontece longe do ponto que a pessoa estava olhando.

Fora dessas três funções, movimento é enfeite. Um bloco que desliza toda vez que entra na tela pode ser bonito na primeira visita e cansativo na terceira. A pergunta útil na hora de decidir é direta: o que essa animação está informando? Se a resposta não vier em uma frase, ela sai.

Onde o craft aparece de verdade

A diferença entre um site que parece caro e um site que parece um modelo pronto raramente está no efeito grande. Está na duração, na curva de aceleração e na coerência. Um elemento que sai de cena deve sair mais rápido do que entrou, porque ninguém precisa acompanhar uma despedida. Um objeto grande atravessando muita distância pede um pouco mais de tempo do que um botão pequeno mudando de cor. E tudo isso precisa seguir o mesmo padrão de uma tela para a outra, senão o site parece feito por três pessoas diferentes.

É a mesma lógica de tudo que sustenta um site sem aparecer na interface: decisões pequenas, tomadas com critério, que ninguém consegue nomear e todo mundo sente. Vale lembrar também que animação custa processamento, e um site pesado atrapalha antes de encantar, porque um site lento perde o cliente que a propaganda trouxe.

Uma última coisa, e ela não é opcional

Parte das pessoas sente enjoo, tontura ou desconforto com movimento na tela, e os sistemas operacionais já oferecem uma opção para reduzir animações. Um site bem feito respeita essa escolha e desliga os efeitos para quem pediu, mantendo tudo funcionando. É pouca linha de código e evita expulsar visitante sem nunca saber que expulsou.

Movimento, quando é bem calibrado, faz o site parecer mais rápido do que ele é, e faz cada ação parecer confirmada. É esse acabamento que a gente persegue nos projetos da Moreau, e é ele que separa uma página que funciona de uma página que dá gosto de usar, mesmo quando ninguém percebe conscientemente o que mudou. Combina bem, aliás, com a estrutura de cadastro e filtro que faz a lista aparecer: uma cuida do que é mostrado, a outra de como aparece.

Vale uma conversa sobre o acabamento do site, essa parte que ninguém sabe nomear e todo mundo sente? Fala com a Moreau →