Times de produto capricham nas telas em que os usuários avançados passam o dia: o dashboard cheio de gráficos, o quadro de projetos a todo vapor, a caixa de entrada lotada. Mas a tela que decide se um novo usuário um dia vai se tornar um usuário avançado não é nenhuma dessas. É a versão do seu produto sem nada dentro: o dashboard sem dados, o quadro sem cards, a página de relatórios avisando educadamente que não há nada para relatar. Essa tela é o estado vazio (empty state) e, para cada novo cadastro, ela é o produto.
É no estado vazio que o onboarding de usuários dá certo ou fracassa, sem alarde. O fluxo de cadastro termina, o e-mail de confirmação é aberto e o usuário cai em… uma página em branco. Se essa página se explica e oferece um próximo passo óbvio, o usuário começa a caminhar rumo à primeira conquista. Se ela só diz "Nenhum dado disponível", o usuário precisa fabricar sozinho o próprio primeiro sucesso, do zero, e boa parte não vai conseguir. E também não vai reclamar. Simplesmente fecha a aba, e é por isso que estados vazios fracos quase nunca aparecem no feedback, mas sempre aparecem nos números de ativação.
Este guia cobre o assunto por inteiro: o que é um estado vazio em UX, os cinco tipos que vale a pena diferenciar, por que a primeira tela em branco tem um efeito tão grande no time to value e no churn, a anatomia de um ótimo estado vazio e nove boas práticas para projetar estados vazios que fazem onboarding, com exemplos e formas de enriquecer as telas que você já tem sem precisar de uma sprint de engenharia.
Principais conclusões
- Estado vazio é qualquer tela sem conteúdo para exibir: o dashboard em branco de uma conta nova, uma caixa de entrada esvaziada, uma busca sem resultados, um carregamento que falhou ou uma funcionalidade bloqueada.
- Para novos usuários, o estado vazio É o produto. A maior parte do valor de um SaaS está nos dados do próprio usuário, e toda conta nova começa sem nenhum, então o estado vazio de primeiro uso é a verdadeira primeira impressão.
- Existem cinco tipos (primeiro uso, limpo/concluído, sem resultados, erro e permissão) e cada um pede uma mensagem, um tom e uma chamada à ação diferentes.
- Um ótimo estado vazio tem quatro partes: um visual de apoio, um título que diz para que serve aquele espaço, uma linha explicando por que ele está vazio e o que vai aparecer ali, e uma ação clara que o preenche.
- Nunca deixe um beco sem saída. Todo estado vazio deve oferecer exatamente um próximo passo principal (criar, importar, refinar, tentar de novo ou pedir acesso), além de modelos ou dados de exemplo quando começar do zero é difícil.
- Estados vazios são superfícies de onboarding: combiná-los com um tour do produto, um checklist de onboarding e tooltips contextuais transforma a tela em branco em um caminho guiado até a primeira conquista, sem código.
O que é um estado vazio? (Significado e definição em UX)
Um estado vazio é o que uma interface mostra quando não tem conteúdo para exibir. O contêiner existe (a tabela, o feed, o dashboard, a lista de resultados), mas o conteúdo que normalmente o preenche não, seja porque ainda não foi criado, porque foi todo apagado, porque uma consulta não encontrou nada ou porque algo falhou ao carregar. Estados vazios também são chamados de blank states, zero states ou blank slates; designers também falam em telas de "zero dados". A ideia é a mesma: a interface não tem nada para mostrar e precisa decidir o que dizer no lugar.
Estado vazio, definido. Um estado vazio é o design intencional de uma tela cuja área de conteúdo está vazia, comunicando para que serve aquele espaço, por que ele está vazio agora e qual ação vai preenchê-lo. A palavra-chave é intencional: um estado vazio não é a ausência de design, é um momento projetado. "Nenhum dado disponível" sobre um fundo cinza não é um estado vazio; é um estado vazio que faltou.
Por que eles importam tanto especificamente em SaaS? Porque produtos SaaS demonstram valor por meio do conteúdo do próprio usuário. Uma ferramenta de projetos convence quando guarda os seus projetos; uma ferramenta de analytics se paga quando os gráficos mostram o seu tráfego. Ou seja, toda conta começa na única condição que a demo nunca mostrou: completamente vazia. A distância entre "vazio" e "primeiro item criado" é exatamente a distância entre um cadastro e um usuário ativado, o mesmo trecho que o onboarding de usuários existe para encurtar.
Mesmo produto, mesmo usuário, mesmo banco de dados em branco: a única diferença é se a tela vazia é um beco sem saída ou uma rampa de acesso. E essa diferença se decide no design, não na engenharia.
Os 5 tipos de estado vazio (e o que cada um deve dizer)
O "vazio" acontece por cinco motivos diferentes, e o pior erro em estados vazios é mostrar o mesmo dar de ombros para todos eles. Um usuário recém-chegado, um usuário que acabou de zerar a caixa de entrada e um usuário cuja busca não encontrou nada estão em três estados emocionais completamente diferentes; a tela precisa saber com quem está falando:
| Tipo | Quando aparece | Estado de espírito do usuário | A função da tela |
|---|---|---|---|
| Primeiro uso | Uma conta, funcionalidade ou workspace nova, sem nada criado ainda | Curioso, mas inseguro: "o que eu faço aqui?" | Fazer o onboarding: explicar o espaço, oferecer uma primeira ação clara, disponibilizar modelos ou dados de exemplo |
| Limpo / concluído | O usuário terminou ou removeu tudo: caixa de entrada zerada, todas as tarefas feitas | Realizado: esse vazio foi conquistado | Celebrar a conquista e depois sugerir o próximo passo (revisar, planejar, explorar) |
| Sem resultados | Uma busca ou combinação de filtros não encontra nada | Levemente frustrado: "cadê o que eu estou procurando?" | Ajudar a refinar: mostrar a consulta, sugerir correções, oferecer limpar os filtros ou ampliar a busca |
| Erro | O conteúdo existe, mas falhou ao carregar: rede, servidor, timeout | Preocupado: "perdi meus dados?" | Tranquilizar que os dados estão seguros, explicar em linguagem simples, oferecer tentar de novo |
| Permissão | O papel ou o plano do usuário não dá acesso a esse conteúdo | Bloqueado: "por que eu não consigo ver isso?" | Explicar quem tem acesso e mostrar o caminho: pedir acesso, falar com um admin ou fazer upgrade |
Dos cinco, o estado vazio de primeiro uso merece a maior parte da sua atenção: ele fica exatamente onde a ativação é ganha ou perdida, e todo usuário passa por ele uma única vez, no momento em que a motivação está no auge e o conhecimento está no mínimo. O estado limpo é o que os times mais erram no tom: mostrar "Nada por aqui 😕" para um usuário que acabou de zerar a lista de tarefas transforma uma conquista em um pedido de desculpas. E o estado de erro é o que os usuários menos perdoam quando é feito com preguiça; um gráfico vazio sem explicação soa como "seus dados sumiram", uma mensagem muito pior do que qualquer coisa que você poderia ter escrito.
Estado vazio ≠ estado de erro. Um estado vazio significa que legitimamente não há nada para mostrar; um estado de erro significa que há algo para mostrar, mas não foi possível carregar. Misturar os dois, com a mesma tela em branco para "ainda sem dados" e "a requisição falhou", deixa o usuário adivinhando se deve agir ou esperar. Os estados precisam de textos diferentes, e a sua interface precisa saber em qual deles está.
Por que estados vazios importam: é na página em branco que o usuário trava
É tentador arquivar os estados vazios na gaveta do acabamento visual: uma ilustração bonita, uma frase simpática, e pronto. Veja por que eles pertencem, na verdade, à sua estratégia de onboarding:
-
O estado vazio de primeiro uso é a sua verdadeira primeira impressão
O marketing mostrou um produto cheio de vida; a conta começa como um vácuo. O estado vazio é a passagem de bastão entre a promessa e o produto; se for mal resolvido, a distância entre o print da landing page e a tela em branco vira decepção já no primeiro minuto.
-
Telas em branco inflam o time to value
O relógio entre o cadastro e a primeira conquista real, o time to value, gasta a maior parte dos minutos onde o usuário não sabe qual é o próximo passo. Uma tela vazia sem orientação é exatamente isso: uma etapa sem próximo passo visível. Corrigi-la é um dos cortes de TTV mais baratos que existem.
-
Becos sem saída viram churn silencioso
Usuários que travam numa tela em branco não abrem chamados; eles vão embora. O momento aha nunca aconteceu, então não há do que sentir falta nem do que reclamar. Estados vazios fracos são invisíveis no volume de suporte e muito visíveis na retenção da primeira semana.
-
Estados vazios ensinam o modelo mental do produto
"Seus relatórios vão aparecer aqui assim que você conectar uma fonte de dados" ensina, em uma linha, o que são relatórios, onde eles ficam e do que dependem. Multiplique isso por todas as telas e seus estados vazios se tornam, sem alarde, o manual de instruções embutido do produto, lido exatamente no momento em que cada lição é relevante.
-
Eles continuam trabalhando depois do primeiro dia
Toda nova funcionalidade que você lança começa vazia para todos os clientes atuais. Um estado vazio bem projetado no nível da funcionalidade funciona também como superfície de descoberta de funcionalidades, explicando o novo recurso para usuários que, de outra forma, passariam direto por uma aba em branco e nunca mais voltariam a ela.
A anatomia de um ótimo estado vazio
Desmonte qualquer estado vazio bem projetado, de qualquer produto que você admira, e vai encontrar as mesmas quatro partes, mais ou menos na mesma ordem. Nenhuma delas é enfeite; cada uma responde a uma pergunta que o usuário está fazendo em silêncio:
Visual, título, explicação, uma ação principal e, opcionalmente, um caminho mais fácil para quem ainda não está pronto para começar do zero. Se faltar alguma parte, uma das perguntas silenciosas do usuário fica sem resposta.
1. O visual: "está quebrado?"
Uma ilustração ou ícone faz dois trabalhos em meio segundo: sinaliza que a tela é intencional (um gráfico estilizado não aparece por acidente, então nada está quebrado) e define o tom emocional: calmo no primeiro uso, comemorativo na conclusão, empático nos erros. Ele não deve dominar a tela: o visual é tempero, e uma ilustração enorme com a ação escondida é o jeito mais comum de um estado vazio dar errado.
2. O título: "que espaço é este?"
Uma linha curta dizendo o que vive ali, escrita sobre o trabalho do usuário, não sobre a interface: "Seus tours do produto" é melhor que "Nenhum tour encontrado". Diga para que serve o espaço, não o que está faltando nele agora.
3. A explicação: "por que está vazio e o que vai aparecer?"
Uma ou duas frases que resolvem a dúvida: por que não há nada aqui (você ainda não criou nenhum / sua busca não encontrou nada / isto carrega depois que você conecta uma fonte) e como o espaço vai ficar quando ganhar vida. É essa linha que ensina o modelo mental do produto; invista esforço real de escrita nela.
4. A chamada à ação: "e agora, o que eu faço?"
Um botão principal que começa a preencher o espaço: criar, importar, conectar, ver modelos. Exatamente um: um estado vazio com quatro botões iguais vira uma decisão, e decisões travam justamente os usuários que a tela existe para ajudar. Um link secundário, com menos destaque (usar um modelo, carregar dados de exemplo, ver como funciona), acolhe quem ainda não está pronto para a versão "tela em branco" da ação.
Como projetar estados vazios: 9 boas práticas
Os princípios, na ordem em que você deve aplicá-los:
1. Faça um inventário dos seus estados vazios: você tem mais do que imagina
Crie uma conta nova no seu próprio produto e tire print de cada tela exatamente como um novo usuário a encontra. Depois confira cada aba de funcionalidade, faça uma busca sem sentido e carregue uma página com a conexão limitada. A maioria dos times encontra uma dúzia ou mais de telas vazias desse jeito, e descobre que metade delas nunca foi projetada: ficou entregue ao que a biblioteca de componentes renderiza quando o array está vazio.
2. Nunca deixe um beco sem saída: todo estado vazio ganha um próximo passo
Esta é a única regra inegociável. Primeiro uso ganha "criar" ou "importar". Sem resultados ganha "limpar filtros" ou uma sugestão corrigida. Erro ganha "tentar de novo". Permissão ganha "pedir acesso". Se uma tela diz ao usuário que não há nada ali e não oferece nada a fazer a respeito, ela não é um estado vazio; é uma porta de saída.
3. Eduque, não peça desculpas
O vazio no primeiro uso não é um fracasso, então não escreva como se fosse: nada de ícones de carinha triste, nada de "Está tão solitário aqui" sem direção. O estado vazio de primeiro uso é um momento de ensino: o que esse espaço faz, como ele fica quando está funcionando e como chegar lá. Uma microcopy confiante e específica ("Os tours que você criar vão aparecer aqui. A maioria dos times começa com um tour de boas-vindas de 3 passos") ganha sempre de um texto fofo, mas perdido.
4. Ofereça modelos e dados de exemplo, não só uma tela em branco
"Criar do zero" é a versão mais difícil possível do primeiro passo. Modelos e dados de exemplo permitem que o usuário experimente o estado preenchido antes de fazer o trabalho: o produto se prova primeiro e pede esforço depois. Se o seu dashboard realmente precisa de uma semana de dados, mostre-o preenchido com dados de exemplo claramente identificados, em vez de um vazio acompanhado de uma promessa.
5. Ajuste o tom ao tipo
Os cinco tipos merecem cinco vozes. Primeiro uso: encorajador e direto. Limpo: de parabéns, o usuário conquistou esse vazio, comemore e sugira o próximo passo. Sem resultados: prático, repita a consulta, ofereça correções. Erro: calmo e honesto, os dados estão seguros, aqui está o "tentar de novo". Permissão: transparente, quem tem acesso e como conseguir. Passe os cinco pelo mesmo template "simpático + ilustração" e pelo menos três vão soar errado.
6. Guie do estado vazio até a primeira conquista: não pare no primeiro clique
A CTA começa a jornada; raramente a termina. "Crie seu primeiro tour" abre um editor com vinte opções, e o usuário que trava ali deu churn uma tela depois do que teria dado de qualquer jeito. Conecte o estado vazio a um tour do produto curto, que leve do botão até o primeiro item concluído, e deixe um fluxo de boas-vindas direcionar cada persona para a primeira conquista certa; o primeiro passo ideal para alguém de marketing e para um desenvolvedor raramente é o mesmo.
7. Use um checklist para conectar vários estados vazios
Uma conta nova geralmente tem vários espaços vazios para preencher: perfil, primeiro projeto, primeira integração, primeiro colega de time. Um checklist de onboarding com uma barra de progresso transforma essa dispersão em uma sequência visível e mantém o ritmo entre sessões: em qualquer tela vazia em que o usuário cair, o checklist mostra em que ponto da jornada maior ele está e o que preencher em seguida.
8. Projete o estado limpo como uma recompensa
Quando um usuário esvazia a fila ou conclui a lista, a tela que ele vê é uma pequena sala de troféus. Reconheça a conquista ("Tudo em dia 🎉") e depois aponte para frente: revisar o que foi entregue, planejar o dia seguinte, explorar uma funcionalidade que ele ainda não testou. Times que tratam o estado concluído como uma superfície de engajamento ganham um momento extra de reengajamento justamente quando o usuário está mais satisfeito com o produto.
9. Meça seus estados vazios como as etapas de funil que eles são
Acompanhe qual parcela dos novos usuários executa a ação principal do estado vazio e quanto tempo eles ficam ali antes de agir ou sair. Uma tela vazia da qual a maioria dos visitantes de primeira viagem sai é um bug de ativação com print anexado. Corrija o pior caso, observe a próxima coorte e repita: o mesmo ciclo que você usaria em qualquer outra etapa do onboarding.
Exemplos de estado vazio: beco sem saída vs. rampa de acesso
Aqui está a mesma tela, a página de tours de uma conta recém-criada, projetada dos dois jeitos. A versão da esquerda é o que uma biblioteca de componentes renderiza por padrão; a da direita aplica a anatomia deste guia:
Nenhum dado disponível.
Crie um tour passo a passo que leve novos usuários até a primeira conquista. A maioria dos times começa com um tour de boas-vindas de 3 passos.
Criar meu primeiro tour ou comece a partir de um modelo →Aplique a mesma transformação a cada tipo e o padrão se mantém:
- Primeiro uso: "Nenhum segmento ainda" → "Segmentos permitem mostrar a orientação certa para os usuários certos. Crie seu primeiro segmento ou comece com o modelo 'Novos usuários'."
- Limpo: "Nada por aqui" → "Tudo em dia 🎉 Todas as tarefas de hoje foram concluídas. A fila de amanhã abre às 9:00; enquanto isso, veja o que o seu time entregou esta semana."
- Sem resultados: "0 resultados" → "Nada corresponde a 'onbaording' com o filtro Arquivados ativo. Tente 'onboarding' ou limpe os filtros para buscar em tudo."
- Erro: um gráfico em branco → "Não conseguimos carregar seus dados de analytics. Seus dados estão seguros, a conexão expirou. Tente de novo agora ou volte daqui a um minuto."
- Permissão: uma página oculta → "O Analytics está disponível para Admins no plano Growth. Peça acesso ao admin do seu workspace ou veja o que está incluído."
Repare no que mudou em cada reescrita: a tela parou de descrever a ausência e passou a descrever o caminho. Esse é todo o ofício, comprimido em um único hábito.
Design de estado vazio: o que fazer e o que evitar
✅ Faça
- Projete cada estado vazio de forma intencional; audite todos com uma conta nova
- Dê a cada tela uma única ação principal clara
- Explique para que serve o espaço e o que vai aparecer nele
- Ofereça modelos ou dados de exemplo como um primeiro passo mais fácil
- Ajuste o tom ao tipo: comemore estados limpos, tranquilize em estados de erro
- Combine telas de primeiro uso com um tour ou checklist até a primeira conquista
- Use estados vazios no nível da funcionalidade para apresentar novos recursos
- Meça a conversão do estado vazio para a primeira ação
❌ Evite
- Publicar o que a biblioteca de componentes renderiza para um array vazio
- Escrever "Nenhum dado disponível" e chamar isso de design
- Oferecer quatro botões iguais, ou nenhum
- Deixar a ilustração pesar mais que a ação
- Pedir desculpas porque uma conta recém-criada está vazia
- Usar a mesma tela em branco para "sem dados" e "falha ao carregar"
- Fazer piada em estados de erro enquanto o usuário se preocupa com os dados
- Projetar uma vez e nunca mais olhar as métricas
Como enriquecer estados vazios sem tempo de engenharia
Redesenhar todas as telas vazias do código é um projeto de verdade: vale a pena, mas raramente sai neste trimestre. A boa notícia: a camada de maior impacto de uma estratégia de estados vazios é a orientação, e orientação não precisa esperar uma sprint. Com o Kompassify, você adiciona a rampa de acesso por cima das telas vazias que já tem, sem código:
- Um fluxo de boas-vindas que encontra o usuário antes da primeira tela em branco: uma pesquisa de boas-vindas de múltipla escolha direciona cada persona para a primeira conquista que faz sentido para ela.
- Um tour do produto que é iniciado na página vazia e conduz o usuário do "Crie seu primeiro…" até um primeiro item concluído: a rampa de acesso, guiada do início ao fim.
- Um checklist de onboarding com barra de progresso que conecta todos os espaços vazios de uma conta nova em uma única sequência visível, que se mantém entre sessões.
- Tooltips e widgets de anúncio fixados nas telas vazias, incluindo as abas de novas funcionalidades que começam vazias para todos os clientes atuais a cada lançamento.
Tudo é criado em um editor visual, segmentado por público, publicado com um único snippet de script e medido no analytics integrado, para você acompanhar, semana a semana, a parcela de usuários que vai da tela em branco à primeira ação. O Kompassify está em conformidade com o GDPR, é hospedado na UE, gratuito para menos de 100 usuários ativos mensais, com planos pagos a partir de US$ 129/mês.
Transforme suas telas em branco em rampas de acesso
Com o Kompassify, você adiciona fluxos de boas-vindas, tours do produto, checklists de onboarding e tooltips por cima dos estados vazios que já existem: sem código e sem esperar uma sprint. Publique com um único snippet de script e veja mais cadastros chegarem à primeira conquista. Em conformidade com o GDPR, hospedado na UE e gratuito para menos de 100 usuários ativos mensais.
Comece grátis →Perguntas frequentes
O que é um estado vazio (empty state) em UX?
Um estado vazio é qualquer tela que o usuário vê quando não há conteúdo para exibir: um dashboard novinho sem dados, uma caixa de entrada sem nenhuma mensagem, uma busca que não retornou resultados ou uma lista que o usuário acabou de limpar. Em design de UX, o estado vazio é o momento em que a interface não tem nada para mostrar e precisa decidir o que dizer no lugar. Estados vazios bem projetados explicam o que a tela vai conter, por que ela está vazia agora e qual ação única a preenche, transformando um beco sem saída no primeiro passo do onboarding.
Por que os estados vazios são importantes?
Porque, para um novo usuário, o estado vazio É o produto. A maioria dos produtos SaaS mostra seu valor por meio dos dados do próprio usuário (dashboards, projetos, relatórios), o que significa que toda conta nova começa sem nada disso. Se essa primeira tela em branco não oferece nenhuma orientação, o usuário precisa fabricar sozinho o próprio primeiro sucesso, do zero, e muitos simplesmente desistem em silêncio. Um bom estado vazio encurta o time to value, aumenta a ativação e reduz o churn inicial, porque transforma o ponto de travamento mais comum do onboarding em um próximo passo guiado.
Quais são os tipos de estado vazio?
Cinco tipos cobrem quase todos os casos. Estados vazios de primeiro uso aparecem quando um usuário novo ainda não criou nada, o tipo mais importante para o onboarding. Estados vazios limpos (ou concluídos) aparecem quando o usuário terminou tudo, como uma caixa de entrada zerada: um momento para comemorar, não para pedir desculpas. Estados vazios sem resultados aparecem quando uma busca ou filtro não encontra nada e devem ajudar o usuário a refinar a consulta. Estados vazios de erro aparecem quando o conteúdo falhou ao carregar e devem explicar o problema e oferecer uma nova tentativa. Estados vazios de permissão aparecem quando o papel ou o plano do usuário não dá acesso e devem explicar como consegui-lo.
O que um estado vazio deve incluir?
Quatro elementos: um visual de apoio (ilustração ou ícone) que define o tom e confirma que nada está quebrado; um título curto que diz para que serve o espaço; uma ou duas linhas de explicação sobre por que ele está vazio e o que vai aparecer ali; e uma chamada à ação principal e clara que cria o primeiro item, com, opcionalmente, um link secundário para um modelo, dados de exemplo ou ajuda. O teste de um bom estado vazio é se um usuário de primeira viagem sabe exatamente o que fazer em poucos segundos, sem abrir a documentação.
Como os estados vazios afetam o onboarding e a ativação de usuários?
O estado vazio de primeiro uso costuma ser a primeira tela real do onboarding: é onde o fluxo de cadastro termina e o produto começa. Se ele for um beco sem saída, os usuários travam exatamente onde a ativação é decidida: entre a criação da conta e a primeira ação significativa. Tratar os estados vazios como superfícies de onboarding, com um próximo passo claro, modelos ou dados de exemplo e uma orientação de apoio como um tour do produto ou um checklist de onboarding, aumenta de forma mensurável a parcela de cadastros que chega à primeira conquista, que é justamente a definição de ativação de usuários.
Qual é a diferença entre um estado vazio e um estado de erro?
Um estado vazio significa que legitimamente não há nada para exibir: ainda não há dados, não há resultados para essa consulta ou tudo foi concluído. Um estado de erro significa que o conteúdo existe (ou deveria existir), mas não pôde ser exibido porque algo falhou: um problema de rede, um erro de servidor, um timeout. Eles pedem mensagens diferentes: um estado vazio guia o usuário para criar ou encontrar conteúdo, enquanto um estado de erro tranquiliza o usuário de que os dados estão seguros, explica o que deu errado em linguagem simples e oferece uma nova tentativa. Usar a mesma tela em branco genérica para os dois deixa o usuário sem saber se deve agir ou esperar.
Como melhorar estados vazios sem tempo de engenharia?
Você pode adicionar uma camada de orientação por cima das telas vazias existentes sem mexer no código. Com uma plataforma no-code como o Kompassify, você pode incluir um fluxo de boas-vindas que direciona cada usuário para o ponto de partida certo, iniciar um tour do produto curto que o conduz da tela vazia até o primeiro item criado, exibir um checklist de onboarding com barra de progresso que mantém o ritmo entre sessões e adicionar tooltips ou widgets de anúncio nas próprias telas vazias. Tudo é publicado com um único snippet de script, em conformidade com o GDPR e hospedado na UE, gratuito para menos de 100 usuários ativos mensais, com planos pagos a partir de US$ 129/mês.