Duração de animações e UX de carregamento

Quanto tempo devem durar as animações de interface?

Curtas. As diretrizes de movimento originais do Material Design dizem que transições no celular costumam levar cerca de 300 ms, e trazem valores mais específicos:

As mesmas diretrizes observam que transições acima de 400 ms podem parecer lentas demais. As saídas são mais rápidas que as entradas porque o usuário já decidiu seguir em frente.

O Material 3 expressa isso como tokens de duração, de short1 com 50 ms até extraLong4 com 1.000 ms, em passos de 50 ms até 600 ms e depois de 700 a 1.000 ms. A regra associada a eles: "a duração deve aumentar conforme aumenta a área/o percurso de uma animação". A marcação de um checkbox fica na ponta curta. Uma transformação de contêiner em tela cheia fica perto da ponta longa.

Esses números valem para transições de interface que bloqueiam o próximo passo do usuário. Loops de personagem em segundo plano são diferentes e são tratados abaixo.

O que significam os limites de 0,1 s, 1 s e 10 s?

Os três limites de tempo de resposta de Jakob Nielsen, publicados pelo Nielsen Norman Group, são a referência padrão sobre como a espera é percebida:

• 0,1 segundo: mais ou menos o limite para o usuário sentir que o sistema reage instantaneamente. Não é preciso nenhum feedback além de mostrar o resultado.
• 1 segundo: mais ou menos o limite para o raciocínio do usuário seguir sem interrupção. Ele percebe o atraso, mas mantém o foco.
• 10 segundos: mais ou menos o limite para manter a atenção na tarefa. Depois disso, as pessoas começam a fazer outras coisas enquanto esperam.

Use-os como limites de design. Abaixo de 0,1 s, um estado de pressionado basta. Entre aproximadamente 1 e 10 segundos, mostre que algo está acontecendo. Acima de 10 segundos, mostre quanto falta e, de preferência, deixe o usuário sair e voltar depois.

Esses limites também explicam por que transições longas de UI atrapalham. Uma transição de tela de 600 ms a cada toque gasta mais da metade do orçamento de 1 segundo em decoração antes de qualquer conteúdo aparecer.

Quando mostrar um spinner, uma barra de progresso ou uma animação de carregamento?

As orientações do Nielsen Norman Group sobre indicadores de progresso se encaixam bem no tempo de espera:

Um mascote de carregamento é um indicador em loop com mais personalidade. Ele funciona bem na faixa de 2 a 10 segundos, como em um upload, uma busca ou uma resposta de IA. Ele não substitui uma barra de progresso em tarefas longas, porque um loop não consegue mostrar ao usuário quanto do trabalho já foi feito. Em esperas longas, combine o personagem com uma barra real de porcentagem concluída.

Skeleton screens são uma terceira opção para conteúdo que carrega em um layout conhecido. Eles mostram blocos cinza no formato do conteúdo que está chegando, o que indica ao usuário o que esperar, e não quanto tempo vai levar. Use-os em feeds e listas, e reserve o loop do personagem para ações iniciadas pelo usuário.

Qual deve ser o tempo dos loops e das reações únicas?

A animação de personagem se divide em dois tipos, e cada um pede um tempo diferente.

Loops (idle, loading, listening, talking) se repetem enquanto um estado está ativo. A duração do ciclo importa menos do que a suavidade. Um loop de alguns segundos, com emenda imperceptível e movimento de baixa amplitude, transmite calma. Loops curtos e rápidos parecem nervosos. A função de um loop é dizer "ainda estou aqui" ou "ainda estou trabalhando" sem desviar o olhar do conteúdo.

Reações únicas (success, error, yes, no, enter, exit) tocam uma vez e voltam ao loop atual. Elas comunicam um resultado, então precisam acontecer rápido. Não existe uma duração padrão oficial para uma animação de sucesso; mirar bem abaixo de um segundo na parte legível a mantém dentro do limite de fluxo de 1 segundo de Nielsen, e o token de duração mais longo do Material 3 é de 1.000 ms.

Uma state machine do Rive lida bem com essa divisão. Em um conjunto do Charmotion, um input numérico chamado mood (0 a 9) seleciona o loop ativo, e triggers disparam reações únicas que voltam ao humor atual quando terminam. Seu código só informa o que aconteceu; o arquivo cuida do tempo. Veja Estados de animação do mascote para a lista completa.

Quanto tempo deve durar uma animação de atenção?

Não para sempre. Um loop de atenção, como um mascote acenando ao lado de uma nova notificação, funciona porque se move enquanto todo o resto está parado. Se nunca parar, as pessoas aprendem a ignorá-lo, e ele passa a competir com o que elas estão tentando ler.

Há também uma questão de conformidade. O critério WCAG 2.2 SC 2.2.2 Pausar, Parar, Ocultar (Nível A) se aplica a conteúdo em movimento que começa automaticamente, dura mais de cinco segundos e aparece junto com outro conteúdo. Um padrão prático é tocar o loop de atenção por alguns segundos, mantendo o total abaixo de cinco, e depois voltar ao idle ou a uma pose parada até que algo novo aconteça.

O mesmo raciocínio vale para o carregamento. Pare o loop assim que o trabalho terminar e finalize com uma reação única de resultado, para que o usuário veja o desfecho em vez de um corte brusco. Se a espera passar de 10 segundos, troque o loop por um indicador de progresso.

Por fim, respeite prefers-reduced-motion. Para usuários que pedem menos movimento, a atenção pode ser uma mudança de cor, um selo ou uma pose parada. O guia de movimento reduzido explica a implementação.

Como evitar que animações de carregamento pareçam lentas?

• Responda em menos de 0,1 s. Mostre um estado de clique ou inicie a animação de carregamento imediatamente, para que o toque pareça reconhecido.
• Atrase os indicadores em esperas muito curtas. Se uma requisição costuma terminar em menos de um segundo, espere um instante antes de mostrar um spinner para que ele não fique piscando.
• Não segure os resultados por causa da animação. Quando os dados chegarem, encerre o loop. Nunca faça o usuário esperar um ciclo terminar.
• Mantenha o encerramento curto. A reação de sucesso ou erro deve acontecer rápido; siga a orientação de menos de um segundo acima.
• Mostre o progresso em tarefas longas. A partir de cerca de 10 segundos, uma barra de porcentagem concluída mostra ao usuário quanto falta; um loop sozinho não faz isso.
• Mantenha as transições dentro do orçamento. Use cerca de 200 a 300 ms para trocas de tela, para que a animação não consuma a janela de fluxo de 1 segundo.

O movimento deve tornar a espera compreensível, não mais longa. Se remover uma animação faria o produto parecer mais rápido, ela provavelmente está longa demais.

Perguntas frequentes

Qual é a melhor duração para um botão ou uma microinteração?

Cerca de 50 a 200 ms. Os tokens de duração mais curtos do Material 3 começam em 50 ms, e elementos pequenos ficam no extremo curto, porque a duração deve crescer com a área que a animação cobre. A maioria dos toques deve mostrar retorno em até 0,1 s, o limite que Nielsen indica para algo parecer instantâneo.

Devo usar um spinner para uma espera de 1 segundo?

Normalmente, não. O Nielsen Norman Group recomenda não usar indicador em ações de menos de um segundo, já que o spinner piscaria rapidamente e só acrescentaria ruído. Reserve os indicadores em loop para esperas de cerca de 2 a 10 segundos e as barras de porcentagem concluída para 10 segundos ou mais.

Um mascote animado pode substituir uma barra de progresso?

Só em esperas curtas e indeterminadas, de cerca de 2 a 10 segundos. Uma animação em loop não consegue mostrar quanto trabalho falta, então, para esperas de 10 segundos ou mais, o NN/g recomenda um indicador de porcentagem concluída. Você pode combinar o personagem com uma barra de progresso.

Por que as animações de saída são mais rápidas que as de entrada?

O Material Design sugere cerca de 195 ms para elementos que saem da tela, contra 225 ms para os que entram. O usuário já decidiu seguir em frente, então uma saída rápida não atrapalha, enquanto uma entrada precisa de um pouco mais de tempo para ser notada e compreendida.

Respostas rápidas deste guia

• Quanto tempo devem durar as animações de interface?
• Quando usar um spinner ou uma barra de progresso?
• O que são os limites de tempo de resposta de 0,1, 1 e 10 segundos?

Fontes

• Response Times: The 3 Important Limits, Nielsen Norman Group
• Progress Indicators Make a Slow System Less Insufferable, Nielsen Norman Group
• Duration & easing, Material Design (M1)
• Motion theming (duration tokens), Material Components for Android
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Inputs (web runtime, legacy), Rive