Estados vazios como oportunidade de onboarding

O usuário concluiu o cadastro. O dashboard carregou. Um painel branco. "Ainda não há projetos." Sem prioridade de botão, sem exemplo, sem explicação do que um projeto desbloqueia. Clicou em outro lugar e não voltou. O estado vazio foi projetado como ausência de dados — não como o momento de estados vazios onboarding que de fato era.

Toda conta nova encontra vazio: lista de projetos vazia, caixa de entrada vazia, relatório vazio, lista de integrações vazia. Para usuários experientes, vazio significa "nada corresponde ao seu filtro." Para usuários novos, vazio significa "este produto talvez não seja para mim." O mesmo componente de UI atende ambas as audiências. A maioria dos times projeta apenas para o caso de filtro e perde ativação na primeira sessão.

Estados vazios não são erros. São a superfície de onboarding de maior intenção — o usuário chegou, o shell carregou, a atenção está na área de conteúdo. Desperdiçar essa superfície é um problema de conversão disfarçado de detalhe de design visual.

Três audiências de estados vazios exigem três tratamentos

Audiência	Contexto	Objetivo	Padrão errado
Primeira vez	Nunca criou conteúdo	Ativar — primeira ação bem-sucedida	Apenas "Sem dados"
Limpo	Excluiu ou concluiu tudo	Reengajar ou confirmar sucesso	Igual à primeira vez
Filtrado	Busca/filtro retornou zero	Refinar consulta ou limpar filtros	Copy de onboarding

Colapsar os três em um único string é a falha comum. Vazio de primeira vez precisa de CTA principal, enquadramento de valor e dados de amostra opcionais. Vazio filtrado precisa de "limpar filtros" e contexto de consulta. Vazio limpo pode celebrar a conclusão e sugerir o próximo passo.

O primeiro estado vazio não é uma tela em branco. É a frase de abertura do produto.

Anatomia de um estado vazio que ativa

Estados vazios fortes compartilham cinco elementos:

1. Contexto — para que serve esta área

Uma frase que liga a tela ao resultado do usuário. Não o nome do feature — o job-to-be-done. "Projetos organizam as entregas da sua equipe" supera "Projetos."

2. Ação principal — um próximo passo óbvio

Um único CTA de alto contraste. "Crie seu primeiro projeto" e não uma fileira de botões com o mesmo peso. Ações secundárias visualmente subordinadas.

3. Prova — como fica preenchido

Ilustração, screenshot ou amostra interativa do estado populado. Reduz a lacuna de imaginação. Opcional: dados demo semeados com rotulagem clara de "amostra."

4. Divulgação progressiva — não sobrecarregar

Link para ajuda ou checklist para quem precisa de mais. Não seis parágrafos inline.

5. Acessibilidade

O estado vazio não é decorativo. Hierarquia de headings, ordem de foco do CTA, texto para screen reader que transmita propósito — não "vazio" como único anúncio.

O alinhamento com catálogos de capacidades do design system ajuda: estado vazio como padrão documentado com variantes (primeira vez, filtrado, adjacente a erro) evita que cada squad invente caixas cinzas.

Padrões que convertem vs padrões que estagnam

Convertem

• CTA + proposta de valor de uma linha + visual do estado de sucesso
• Checklist vazio: "3 de 5 passos de configuração" com links — progresso, não vazio
• Caminho de importação proeminente: "Conectar fonte de dados" quando vazio é esperado até a integração
• Copy por papel: admin vê "convidar equipe"; membro vê "pedir ao admin para criar projeto"

Estagnam

• "Nenhum item encontrado" passivo sem ação
• Múltiplos CTAs competindo com o mesmo peso
• Humor sem direção — memorável, não ativador
• Skeleton que nunca resolve em orientação
• Estado vazio oculto atrás de onboarding modal que o usuário descarta

O vazio filtrado merece tratamento explícito: mostrar filtros ativos, oferecer "Limpar todos os filtros," sugerir consulta mais ampla. Não mostrar onboarding de primeira vez quando o usuário já tem dados em outro lugar.

Estados vazios em produtos complexos

Tabelas e dashboards. Linha de tabela vazia com CTA inline supera o chrome de tabela vazia. Cabeçalhos de coluna ainda ensinam estrutura. Linha de amostra (rotulada) mostra o formato esperado dos dados.

Produtos colaborativos. Workspace compartilhado vazio: distinguir "você não adicionou" vs "a equipe não adicionou" — CTAs distintos (criar vs convidar vs solicitar acesso).

Produtos assíncronos. Caixa de entrada vazia: explicar o que aparecerá e como disparar o primeiro evento. "Quando um cliente enviar um formulário, as respostas aparecem aqui" + link para o construtor de formulários.

Features pagas. Estado vazio de upsell: mostrar valor do estado preenchido, limitar a ação com clareza — não vazio falso que parece quebrado no plano gratuito.

Medir click-through do CTA do estado vazio e ativação downstream (completaram a ação que o estado vazio promoveu?). Fazer A/B test de copy e assets de prova — estados vazios têm alto tráfego para usuários novos.

Como os times devem projetar estados vazios para onboarding?

Essas decisões evitam becos sem saída de tamanho único.

Estados vazios devem usar ilustrações?

Quando esclarecem o resultado — sim. Decoração genérica sem valor informativo adiciona carga sem ganho de ativação. Preferir screenshot ou diagrama simplificado da UI populada em vez de arte abstrata.

Quando dados de amostra são apropriados?

Quando o modelo de dados é complexo e a lacuna de imaginação é alta. Rotular com clareza: "Projeto de amostra — excluir quando quiser." Evitar dados de amostra que quebrem na primeira ação real ou confundam relatórios.

Como estados vazios se relacionam com modais e tours de produto?

Modais interrompem; estados vazios estão em contexto. Usar o estado vazio para a orientação da primeira ação principal; reservar tours para orientação entre superfícies. Nunca exigir conclusão do tour para ver o CTA no estado vazio.

Um argumento frequente vai na direção oposta

A visão contrária sustenta que estados vazios devem permanecer mínimos — que usuários são inteligentes, desordem os insulta e bons produtos não precisam de guia.

O minimalismo funciona para usuários avançados que voltam a um filtro limpo. Usuários novos não são avançados no dia um. A contenção significa um CTA e uma linha de contexto — não zero orientação. O insulto é um painel em branco que desperdiça a atenção deles, não um convite claro para agir.

A orientação escala para baixo: após a primeira criação bem-sucedida, a variante do estado vazio muda para padrão compacto em vazios subsequentes.

O que importa lembrar

• Estados vazios são onboarding de primeira tela para a maioria dos usuários novos — projetar para ativação, não para ausência.
• Segmentar vazios de primeira vez, filtrados e limpos — copy e CTAs distintos.
• Uma ação principal, contexto de valor de uma linha, prova visual do estado de sucesso.
• Medir click-through do CTA e conclusão da ação promovida.
• Vazio filtrado precisa de contexto de filtros, não onboarding do zero.
• Documentar variantes de estado vazio no design system para consistência.

Conclusão

Vazio é o estado padrão de toda conta nova. Tratá-lo como placeholder garante uma experiência placeholder — usuários saem antes de o valor aparecer. Estados vazios como oportunidade de onboarding significa que cada tela sem dados responda: para que serve isto?, o que devo fazer agora?, como o bom se parece?

Auditar as cinco superfícies vazias de maior tráfego do produto. Se alguma mostrar apenas "Ainda não há dados," é dívida de ativação com correção conhecida.