Contexto
Um estado vazio aparece quando uma área da interface ainda não tem conteúdo para mostrar. Isso pode acontecer no primeiro uso, depois de uma busca sem resultados, após a conclusão de uma tarefa, por falta de permissão ou por uma falha temporária. Essas situações têm causas e próximos passos diferentes; por isso, não use a mesma mensagem para todas.
Antes de escrever o estado vazio, descubra por que a área está sem conteúdo. A mensagem precisa explicar o que a pessoa está vendo, o que isso significa e qual é o próximo passo mais útil. “Nenhum item” pode representar primeiro uso, ausência de dados, filtros restritivos, erro, falta de permissão ou uma tarefa concluída; cada situação pede uma orientação diferente.
Adapte o estado ao contexto
Quando for o primeiro uso, apresente o valor da área. Explique em poucas palavras para que ela serve e convide a pessoa a iniciar. O texto deve reduzir a incerteza, não presumir que ela já conhece o fluxo.
Quando a busca ou os filtros não encontrarem resultados, preserve o contexto. Informe que nenhum item corresponde à consulta atual e ofereça uma recuperação relevante, como editar os termos, remover filtros ou ampliar o escopo. Não substitua a lista por sugestões genéricas desconectadas da intenção.
Quando ainda não houver dados, descreva o que aparecerá depois. Explique que a área será preenchida após uma ação, integração ou evento esperado. Evite usar uma mensagem que faça a pessoa acreditar que ocorreu um erro.
Quando houver erro ou indisponibilidade, diga o que aconteceu em linguagem simples. Informe se o problema é temporário e ofereça uma ação concreta, como tentar novamente, verificar a conexão ou seguir por outro caminho. Não trate uma falha técnica como se a coleção estivesse naturalmente vazia.
Quando a pessoa não tiver permissão, explique a restrição sem expor informações indevidas. Indique, quando possível, como solicitar acesso ou qual alternativa está disponível. A mensagem deve ser útil sem revelar dados que o perfil não pode consultar.
Quando a tarefa estiver concluída ou a área tiver sido limpa, confirme o resultado. Diga o que foi finalizado e indique como continuar somente quando existir uma próxima ação relevante. Um estado concluído não precisa criar trabalho artificial.
Escreva um título curto e específico, seguido de um texto que acrescente contexto em vez de repetir o título. Use uma ação principal coerente com o estado, como “Criar primeiro item”, “Limpar filtros” ou “Tentar novamente”. Uma ilustração pode reforçar o significado, mas não deve carregar sozinha uma instrução ou informação essencial.
Regra prática
Um bom estado vazio explica a causa, preserva o contexto e oferece um próximo passo proporcional. A pessoa deve entender se precisa começar, ajustar a busca, esperar, corrigir um erro, solicitar acesso ou simplesmente seguir adiante.
Porque isso importa?
Uma tela vazia sem explicação pode parecer quebrada, incompleta ou sem saída. Quando o estado informa a causa e oferece uma ação pertinente, a pessoa consegue entender a situação e continuar sem precisar adivinhar o que aconteceu.
O problema é especialmente visível em buscas e filtros: mostrar apenas “nenhum resultado” encerra o caminho. Benchmarks do Baymard mostram que páginas de zero resultados precisam oferecer alternativas de recuperação; recomendações semelhantes aparecem em padrões de estados vazios do Carbon, Shopify Polaris e GitHub Primer. As orientações da Nielsen Norman Group para mensagens de erro reforçam que a interface deve ajudar a reconhecer o problema, entendê-lo e recuperá-lo.
Base da recomendação
Esta recomendação cruza pesquisa de benchmark do Baymard para experiências de busca e comércio eletrônico, orientações de recuperação da Nielsen Norman Group e padrões documentados por Carbon, Shopify Polaris e GitHub Primer. O W3C/WAI fundamenta os requisitos de acessibilidade, como estrutura semântica, teclado e alternativas textuais. A evidência é classificada como moderada porque há convergência consistente sobre clareza e recuperação, mas não existe uma única composição visual ou uma regra universal para todos os tipos de estado vazio. A decisão final deve considerar a causa do estado, a tarefa e o contexto do produto.
Quando usar?
- Quando uma área ainda não tem dados ou conteúdo.
- Quando uma busca ou combinação de filtros não retorna resultados.
- Quando a pessoa concluiu ou limpou uma tarefa.
- Quando o conteúdo está indisponível por erro ou falha temporária.
- Quando o acesso depende de permissão ou configuração.
- Quando o primeiro uso precisa de orientação para começar.
Quando evitar?
- Quando o conteúdo existe e o problema é apenas carregamento; use um estado de carregamento.
- Quando ocorreu uma falha; não a apresente como simples ausência de dados.
- Quando a mensagem seria apenas “Nada encontrado”, sem explicar o próximo passo.
- Quando a ação sugerida não tem relação com a causa do estado.
- Quando várias ações competem entre si sem uma prioridade clara.
- Quando a ilustração substitui texto, instrução ou informação essencial.
Recomendações
Faça
- Nomeie o estado.
- Explique o que deveria aparecer.
- Mostre o próximo passo.
- Relacione a ação ao contexto.
- Mantenha uma ação principal.
- Preserve busca e filtros.
- Trate imagens decorativas corretamente.
Evite
- Escrever só “Sem dados”.
- Culpar a pessoa pelo resultado.
- Confundir erro com ausência.
- Oferecer links genéricos.
- Usar a imagem como única explicação.
- Repetir ações concorrentes.
