Loaders (indicadores de carregamento)

Um elemento visual que mostra que o sistema está processando, pra reduzir a incerteza durante a espera.

Hard

O que é

Loader é a ponte entre a ação da pessoa e a resposta do sistema. Quando ela clica e o sistema precisa de um tempo, sem nenhum sinal ela acha que nada aconteceu, então repete o clique ou abandona. O loader resolve isso mostrando que tem progresso rolando por baixo.

Existem alguns tipos, cada um com um papel. O spinner, que é a animação em loop, sinaliza um “ocupado” genérico. A barra de progresso dá noção de quanto ainda falta. E o skeleton screen mostra a estrutura da tela se preenchendo aos poucos, o que cria a sensação de um carregamento mais rápido.

A percepção aqui pesa tanto quanto a velocidade real. Um loader bem pensado tranquiliza quem espera. E a acessibilidade entra justamente nesse ponto: o leitor de tela precisa ser avisado quando o carregamento começa e quando termina, via região ativa ou mensagem de status. O estilo, por sua vez, segue a linguagem do produto, sem animação que distraia mais do que informa.

Em uma frase

Em vez de um spinner solto, vamos usar skeleton na lista pra a espera parecer mais curta.

A pergunta que ele responde

Como eu mostro que o sistema está trabalhando pra pessoa não achar que travou e clicar de novo?

Quando usar

Ajuda sempre que houver uma espera perceptível entre a ação e a resposta, do envio de um formulário ao upload de um arquivo, ou seja, em qualquer momento em que a pessoa pode achar que travou.

Como não usar

O cuidado é não trocar performance real por loader em todo lugar, como se o aviso resolvesse a lentidão, nem usar animação chamativa que mais distrai do que informa. O loader cobre a espera, mas não substitui um sistema rápido.

Na prática

Em vez de mostrar um spinner ao enviar o formulário, pense num time que usa skeleton screen na lista que vai aparecer. Como a estrutura já se desenha aos poucos, a espera parece mais curta pra quem está olhando.

Não confunda com

Vale separar loader de carregamento. O carregamento é o processo em si, o que acontece por baixo. O loader é o sinal visual que anuncia esse processo pra pessoa. Um é o trabalho real, o outro é o aviso de que o trabalho está acontecendo.

D

Em inglês

Loaders

Pronúncia

lôu-ders

Também chamado de

loader, spinner, barra de progresso, skeleton

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre indicadores de progresso