- As telas de carregamento podem melhorar a experiência do usuário ao oferecer visibilidade sobre o que o sistema está fazendo.
- Há alguns pontos a considerar para criar uma tela de carregamento adequada.
- Antes do design, é preciso verificar o sistema de carregamento.
- Se o carregamento bloqueia a entrada do usuário, se é possível saber o progresso, quanta informação está sendo carregada, como é a experiência no mobile etc.
- Se é carregamento passivo (o sistema pré-carrega) ou carregamento ativo (carrega conforme a ação do usuário) etc.
- Mudanças conforme a quantidade exibida de uma vez
- No caso de componentes complexos, pode ser melhor exibi-los um por um.
- No caso de componentes relativamente simples, pode ser melhor mostrar tudo de uma vez após o carregamento terminar.
- Se houver muitos componentes, é necessário carregamento sob demanda.
- Usar abordagens como rolagem infinita, botão de "ver mais" e paginação.
- Mudanças conforme a frequência
- Se muda o tempo todo, é preciso minimizar a UI que mostra carregamento.
- Vale consultar a UI de salvamento em tempo real do Google Drive.
- Se muda ocasionalmente, é melhor mostrar ao usuário imediatamente.
- Um pop-up dizendo que o conteúdo visualizado foi atualizado e que a tela deve ser recarregada, por exemplo.
- Mudanças conforme o tempo necessário
- Primeiro, é preciso avaliar se o progresso pode ser claramente conhecido ou se é incerto.
- Se for inferior a 0,1 segundo
- Basta mostrar o resultado imediatamente.
- Em alguns casos, pode ser melhor mostrar uma tela de carregamento falsa.
- Quando é uma ação importante na percepção do usuário (como salvar) ou quando é necessário um pequeno atraso para permitir uma ação do usuário (como o botão de desfazer no envio de e-mail).
- Se estiver entre 0,1 e 1 segundo
- É um atraso muito comum e geralmente imperceptível para o usuário, então é melhor não adicionar uma tela de carregamento.
- Se for superior a 1 segundo
- A partir do momento em que passa de 1 segundo, o usuário percebe o tempo de espera, então é recomendável adicionar uma tela de carregamento adequada.
- Se o componente carregado for pequeno, um spinner de carregamento é uma boa escolha. (como upload de arquivos)
- Se a tela muda, uma tela de carregamento do tipo skeleton é uma boa opção.
- Se a imagem for o conteúdo principal, extrair a cor dominante e aplicar um desfoque funciona muito bem.
- Se estiver entre 2 e 10 segundos
- Um indicador de tempo como "leva cerca de 5 segundos" pode ser eficaz.
- A barra de progresso é sempre uma boa escolha.
- Se o processo tiver várias etapas, também é uma opção mostrá-las.
- Mesmo quando não há etapas claras, é possível usar mensagens genéricas. (como "conectando ao servidor")
- Se levar mais de 10 segundos
- Se for possível saber claramente o progresso, é melhor mostrar porcentagem e tempo restante. (como 50% no upload de arquivo)
- No entanto, parar em 99% é algo muito crítico, então, se isso puder acontecer, é melhor usar outro método.
- Se demorar ainda mais e não for possível saber claramente o progresso, é bom informar que o usuário será avisado por e-mail ou outro meio quando a tarefa terminar, permitindo que ele mantenha o controle.
- Também é uma boa opção executar a tarefa totalmente em segundo plano sem bloquear nenhuma ação do usuário. (como o status de progresso de upload no Google Drive)
3 comentários
Obrigado pelo ótimo texto.
. Eu não mostro até 250 ms, mas não sei se seria ok estender isso até 1 segundo
Ah, eu estava procurando uma justificativa para a tela de carregamento! Obrigado hahaha
Acho que o resumo acabou ficando longo demais... de qualquer forma, tinha muito conteúdo bom, então trouxe o máximo que pude.
Achei interessante a ideia de que ter uma tela de carregamento falsa aumenta a confiabilidade. No Hacker News também falaram bastante sobre esse tema.