Uma tela sem conteúdo pode parecer simples, mas costuma ser um dos momentos mais importantes de uma experiência digital. Quando uma pessoa abre uma área nova, pesquisa algo que não existe ou conclui uma tarefa, o produto precisa explicar o que está acontecendo. Sem essa orientação, o vazio parece um erro, um bloqueio ou uma promessa que não foi cumprida.
Os empty states em UX transformam esse momento de ausência em uma conversa clara. Eles mostram o contexto, reduzem a incerteza e indicam um próximo passo possível. Neste guia, você vai aprender a identificar os tipos de empty state, escrever mensagens úteis, escolher ações, cuidar da acessibilidade e testar se a interface realmente ajuda.
O que são empty states em UX
Empty state, ou estado vazio, é a condição em que uma interface não tem conteúdo para exibir naquele momento. A lista pode estar no primeiro uso, uma busca pode não ter correspondências, uma caixa de entrada pode ter sido limpa ou uma área pode depender de uma permissão que ainda não foi concedida.
O estado vazio não é um espaço que sobrou no layout. Ele é uma resposta do produto. A pessoa precisa saber se não há dados porque ainda não criou nada, porque os filtros estão restritos, porque a tarefa terminou ou porque ocorreu um problema. Cada causa pede uma explicação e uma ação diferentes.
O Material Design recomenda evitar uma tela completamente vazia e usar uma combinação de mensagem, imagem discreta, conteúdo inicial ou orientação educativa de acordo com o contexto. A intenção é reduzir confusão sem transformar a ilustração em um elemento que pareça clicável.
Por que uma tela vazia precisa de design
Quando a interface não responde, a pessoa precisa preencher as lacunas com hipóteses. Ela pode pensar que a conta não foi configurada, que o conteúdo não carregou, que fez algo errado ou que o produto não oferece aquela função. Essa dúvida aumenta o esforço mental e pode interromper a tarefa.
- Orientação: explica como começar ou continuar.
- Confiança: mostra que o produto reconhece aquele estado.
- Descoberta: apresenta a utilidade da área sem exigir exploração aleatória.
- Recuperação: oferece uma alternativa quando filtros, permissões ou conexão impedem o resultado.
- Continuidade: conecta a pessoa a uma ação que faz sentido agora.
Um estado vazio bem resolvido não precisa encher a tela. Ele precisa comunicar o suficiente para que a pessoa reconheça o estado e tome uma decisão com segurança.
Os seis tipos mais comuns de empty state
1. Primeiro uso
A pessoa ainda não criou ou adicionou nada. Esse é o estado em que a interface pode ensinar o valor da área e convidar para uma primeira ação. Em vez de “Nenhum projeto”, prefira algo como “Crie seu primeiro projeto para organizar hipóteses e decisões de produto”.
2. Nenhum resultado de busca
A pesquisa foi executada, mas não encontrou correspondências. Informe a consulta ou o contexto, sugira revisar a grafia, remover filtros ou tentar um termo mais amplo. Se houver resultados próximos, eles podem ser apresentados como alternativa, desde que fique claro que não são correspondências exatas.
3. Nenhum resultado após filtros
Filtros podem excluir todos os itens mesmo quando existem dados. Mostre quais condições estão ativas e ofereça remover uma delas. Não faça a pessoa voltar à tela anterior para descobrir por que a lista ficou vazia.
4. Estado concluído
Uma lista vazia pode representar sucesso. Uma caixa de entrada sem pendências ou uma fila de tarefas finalizada não precisa parecer um problema. A mensagem pode reconhecer a conquista e explicar quando novos itens aparecerão.
5. Falta de permissão ou acesso
Se a pessoa não pode ver o conteúdo, não diga apenas “Nenhum item”. Explique que o acesso depende de uma permissão, de um convite ou de um papel na equipe. Quando possível, indique quem pode liberar o acesso ou onde solicitar ajuda.
6. Indisponibilidade temporária
Quando dados não podem ser carregados por conexão, manutenção ou falha do serviço, o estado é de erro ou indisponibilidade, não de ausência de conteúdo. Use uma mensagem de recuperação, preserve os dados locais e ofereça tentar novamente sem confundir o problema com uma lista vazia.
A anatomia de uma empty state útil
Uma empty state pode ser pequena, mas precisa cumprir uma função clara. Pense nos elementos como uma sequência de compreensão, não como um conjunto obrigatório de componentes.
- Contexto: um título que nomeia o que está vazio.
- Explicação: uma frase que esclarece a causa ou o benefício.
- Ação principal: o próximo passo mais provável e relevante.
- Ação alternativa: um caminho secundário, somente quando ele for realmente útil.
- Visual de apoio: uma ilustração ou ícone discreto que reforça o significado.
- Recuperação: instrução para ajustar filtros, tentar de novo ou pedir acesso quando necessário.
Nem todo estado precisa de todos esses itens. Uma busca sem resultados pode precisar de texto e sugestões, enquanto o primeiro uso pode se beneficiar de uma ação principal. Em uma lista concluída, uma confirmação curta pode ser melhor do que um botão para criar algo que a pessoa não deseja criar.
Como escrever a mensagem
Comece pela pergunta que a pessoa está tentando responder: “Por que não vejo nada aqui?”. Depois, escreva uma frase específica para o contexto. O texto deve ser compreensível antes de qualquer elemento visual ou chamada para ação.
- Nomeie a área ou o conteúdo que está ausente.
- Explique a causa quando ela não for óbvia.
- Use verbos que descrevem a ação de forma concreta.
- Mostre o benefício ou o resultado esperado quando isso ajuda a decidir.
- Evite culpar a pessoa por não ter criado conteúdo.
- Não prometa resultados que o produto não controla.
- Prefira uma frase curta a um parágrafo de instruções.
Compare “Nada por aqui” com “Você ainda não criou uma pesquisa. Comece adicionando uma pergunta para ouvir seus usuários”. A segunda opção explica a situação e conecta a ação ao objetivo. O artigo sobre UX Writing ajuda a manter consistência de tom e vocabulário.
Escolha uma ação que faça sentido
O botão de uma empty state não deve existir apenas para preencher o espaço. Ele precisa ser a próxima ação natural para aquele contexto.
- Primeiro uso: criar, adicionar, importar ou configurar.
- Busca sem resultado: limpar filtros, alterar consulta ou ver sugestões.
- Lista concluída: voltar ao fluxo principal ou aguardar novos itens.
- Permissão: solicitar acesso, ver instruções ou falar com a pessoa responsável.
- Indisponibilidade: tentar novamente ou consultar o status do serviço.
Use uma ação principal. Duas ou três chamadas com o mesmo peso aumentam a dúvida, especialmente quando a pessoa ainda está conhecendo a área. Se houver uma alternativa, deixe sua hierarquia visual clara. O conteúdo sobre feedback em UX aprofunda como orientar o próximo passo depois de uma ação.
Conteúdo inicial, exemplo ou tela educativa
Nem todo produto precisa mostrar uma área vazia. Em alguns casos, um conteúdo inicial ajuda a pessoa a entender o valor da funcionalidade mais rápido. O Material Design recomenda considerar conteúdo de demonstração, recomendações ou uma explicação breve quando uma tela sem dados não comunica bem o propósito.
- Conteúdo inicial: itens reais ou de exemplo que podem ser removidos e substituídos.
- Exemplo contextual: uma amostra que mostra o formato e o resultado da funcionalidade.
- Educação breve: uma explicação curta, dispensável e ligada à tarefa.
- Recomendação: uma sugestão relevante para iniciar a exploração.
Não use conteúdo falso para fazer uma interface parecer completa. Deixe claro quando algo é exemplo, permita remover a amostra e não misture dados de demonstração com informações reais. A decisão deve considerar privacidade, esforço de limpeza e o risco de confundir o estado da conta.
Hierarquia visual sem excesso
O olhar precisa encontrar primeiro o significado do estado e depois a ação. Uma ilustração grande pode roubar atenção do texto, enquanto um botão chamativo pode sugerir uma ação que não é necessária.
- Dê prioridade ao título e à explicação curta.
- Use espaço em branco para separar a mensagem da ação.
- Mantenha a ilustração subordinada ao conteúdo.
- Use contraste suficiente no texto e no botão.
- Repita padrões de alinhamento presentes no restante do produto.
- Evite decorar uma tela concluída com elementos que pareçam alertas.
O artigo sobre arquitetura da informação mostra como organização, agrupamento e prioridade ajudam a orientar a leitura. Para aprofundar a relação entre tamanho, posição e contraste, consulte também hierarquia visual quando o artigo estiver publicado.
Empty states em dispositivos móveis
No celular, uma empty state precisa ser compreendida sem exigir rolagem desnecessária. O texto, a ação e a imagem devem caber em uma composição que respeite teclado, barras fixas, áreas de toque e zoom.
- Coloque a explicação perto da ação principal.
- Use uma área de toque confortável e um rótulo explícito.
- Evite que o botão fique escondido depois de uma ilustração alta.
- Teste em telas pequenas e com aumento de texto.
- Verifique como a mensagem se comporta com teclado aberto.
- Não use apenas posição ou animação para comunicar o estado.
Acessibilidade e linguagem inclusiva
Uma empty state acessível comunica a situação por texto e mantém uma estrutura de navegação previsível. A ilustração deve ter texto alternativo quando carrega significado e ser ignorada por tecnologias assistivas quando for apenas decorativa.
- Use títulos e parágrafos em ordem sem saltos de estrutura.
- Garanta que a ação principal tenha um nome claro fora do contexto visual.
- Não dependa de cor, ícone ou posição para explicar a ausência.
- Preserve foco e leitura quando o conteúdo muda dinamicamente.
- Não anuncie novamente a mesma mensagem sem uma mudança relevante.
- Teste com teclado, leitor de tela, zoom e contraste ampliado.
- Evite linguagem que trate a pessoa como culpada ou incapaz.
O artigo sobre design inclusivo ajuda a ampliar esse olhar para diferentes capacidades, contextos e formas de interação.
Empty state, loading, erro e feedback
Esses estados podem aparecer na mesma área, mas não devem ser tratados como sinônimos.
- Loading: o sistema ainda está buscando ou preparando conteúdo.
- Empty state: a busca terminou e não há conteúdo para exibir naquele contexto.
- Erro: a operação não conseguiu produzir o resultado esperado.
- Feedback: a resposta que mantém a pessoa informada sobre a ação ou a mudança de estado.
- Onboarding: orientação para começar, conhecer ou configurar uma experiência.
Mostrar “nenhum item” enquanto uma requisição ainda está carregando cria um falso vazio. Exibir um spinner depois que uma busca terminou sem resultados também não explica o que fazer. Defina transições claras e aplique uma mensagem adequada a cada estado.
Quando a pessoa precisa aprender a começar, conecte a empty state ao onboarding em UX. Quando a tarefa acabou, use uma confirmação proporcional. Quando algo falhou, siga as boas práticas de erro e recuperação.
Como testar uma empty state
Teste o estado como parte da tarefa, não como uma tela isolada. A pergunta principal não é se a pessoa achou a ilustração bonita, mas se entendeu por que a área está vazia e conseguiu decidir o que fazer.
- Defina o cenário: primeiro uso, busca sem resultado, filtros, conclusão, permissão ou indisponibilidade.
- Apresente a tarefa sem explicar o significado da tela vazia.
- Peça que a pessoa diga o que acredita que aconteceu.
- Observe se ela encontra a ação certa sem explorar aleatoriamente.
- Registre leitura, cliques repetidos, retorno, abandono e pedidos de ajuda.
- Teste a mensagem com e sem a ação principal quando houver dúvida sobre sua necessidade.
- Repita com teclado, leitor de tela, zoom e diferentes tamanhos de tela.
Uma revisão heurística também pode revelar problemas de visibilidade do estado, prevenção de erros e consistência. Use as heurísticas de Nielsen como uma lista de perguntas, não como substituto de testes com pessoas.
Métricas para acompanhar
A métrica certa depende do tipo de estado. Uma empty state de primeiro uso pode ser avaliada pela ativação da primeira ação. Uma busca sem resultados pode ser avaliada pela taxa de ajuste de filtros e pela conclusão da tarefa.
- Taxa de clique ou conclusão da ação principal.
- Tempo até o primeiro item ser criado ou encontrado.
- Abandono depois de uma busca sem resultados.
- Uso de limpar filtros, tentar novamente ou solicitar acesso.
- Retorno à tela anterior e cliques repetidos.
- Chamados de suporte relacionados a conteúdo ausente.
- Compreensão declarada em testes de usabilidade.
Não transforme a ação principal em uma meta isolada. Um botão pode receber muitos cliques e ainda levar a uma tarefa confusa. Relacione o evento ao resultado que a pessoa queria alcançar.
Erros comuns
- Usar a mesma mensagem para primeiro uso, nenhum resultado e erro.
- Esconder a causa atrás de uma ilustração sem texto.
- Adicionar vários botões sem prioridade.
- Mostrar dados de exemplo sem informar que são fictícios.
- Tratar uma lista concluída como se fosse uma falha.
- Usar uma imagem grande que empurra a ação para fora da tela.
- Apagar filtros ou dados preenchidos quando não há resultado.
- Depender apenas de cor, ícone ou animação.
- Deixar uma mensagem vaga como “Nada encontrado” sem oferecer caminho.
Checklist de empty states em UX
- A causa do vazio está clara?
- A mensagem nomeia o conteúdo ausente?
- O estado é distinguido de loading e erro?
- A ação principal é realmente o próximo passo mais útil?
- Existe apenas uma prioridade visual?
- A ilustração reforça o contexto sem parecer um controle?
- O texto evita culpa e jargão interno?
- Filtros, busca e permissões têm recuperação adequada?
- O estado concluído comunica sucesso quando necessário?
- O conteúdo é legível em celular, zoom e leitor de tela?
- Os dados de exemplo são identificados e removíveis?
- O comportamento foi testado com pessoas e métricas?
Conclusão
Empty states em UX são oportunidades de orientação. Uma tela vazia pode ensinar o valor de uma área, celebrar uma tarefa concluída, explicar um filtro ou oferecer uma recuperação segura. O resultado depende de reconhecer a causa do vazio antes de escolher texto, ilustração ou botão.
Comece pelo contexto, escreva uma mensagem específica e escolha uma ação que leve a pessoa para mais perto do objetivo. Depois, teste compreensão, acessibilidade e resultado. Quando o produto trata a ausência de conteúdo como parte da experiência, o vazio deixa de parecer um erro e passa a orientar com clareza.
Perguntas frequentes
O que são empty states em UX?
Empty states em UX são estados de uma interface em que o conteúdo esperado ainda não existe, não foi encontrado, foi concluído ou está indisponível. Uma boa empty state explica o contexto, reduz a sensação de erro e orienta a próxima ação.
Uma empty state precisa ter um botão?
Nem sempre. O botão é útil quando existe uma próxima ação clara, como criar o primeiro item, remover um filtro ou tentar novamente. Se não houver uma ação relevante, uma explicação curta pode ser suficiente.
Qual é a diferença entre empty state e tela de erro?
A empty state comunica ausência de conteúdo sem necessariamente indicar uma falha. Uma tela de erro explica que algo não funcionou e orienta a recuperação. Os dois estados precisam de mensagens e ações diferentes.
Como escrever uma boa mensagem de empty state?
Explique o que está vazio em linguagem específica, diga por que isso importa quando necessário e mostre o próximo passo. Evite frases genéricas como “Nada encontrado” quando puder oferecer contexto e uma ação útil.
Como testar empty states?
Teste cenários de primeiro uso, busca sem resultados, filtros restritivos, conteúdo concluído, falta de permissão e falhas temporárias. Observe se a pessoa entende o estado e consegue seguir sem ajuda.
