Estados vazios são o produto

A tela mais importante do seu produto é a que não tem nada nela. Não o dashboard. Não a página de configurações. A tela em que o usuário aterrissa antes de existir qualquer dado. Essa tela é o produto inteiro comprimido em um único quadro, e a maioria dos times a trata como um detalhe de última hora.

Os estados vazios são entregues a quem tiver tempo. Ganham uma ilustração genérica de uma pessoa com lupa e uma frase que diz "Nada por aqui ainda." Aí o time lança e fica se perguntando por que a ativação está parada. O estado vazio não era acabamento. Era o produto. Você só construiu o errado.

O estado vazio é a superfície de ativação

A ativação não acontece no dashboard. Ela acontece no estado vazio. É ali que o usuário decide se o produto merece uma segunda sessão.

Um usuário novo não vê o seu roadmap nem os seus cases. Ele vê uma tela em branco com o seu logo e uma vozinha perguntando "ok, e agora?". Seja lá o que a tela disser em seguida, isso vira o produto. O estado vazio é o único produto que ele já usou.

O Linear entende isso. A caixa de entrada vazia não diz "Sem issues." Ela é um canvas bem composto, com um atalho de teclado, uma próxima ação clara e a sensação de que você está dentro de uma ferramenta feita por gente que se importa. O estado vazio é a ativação. O dashboard é a recompensa.

O que todo estado vazio está dizendo

Um estado vazio é o sistema falando quando não tem mais nada para dizer. O que ele disser vira a marca e a primeira impressão do usuário sobre como este produto o trata.

Um estado vazio ruim pede desculpas por não ter dados. Um bom presume que o usuário está ali de propósito e entrega o próximo passo. A diferença é postura. Um diz "desculpe, não há nada aqui." O outro diz "é assim que isso começa."

O documento em branco do Notion é o exemplo mais limpo do mercado. Um prompt suave, uma dica do menu de barra, foco imediato no teclado. Sem ilustração, sem tela de boas-vindas. O ato de digitar é a ativação, e o estado vazio é o produto.

Os cinco arquétipos que designers insistem em errar

A maioria dos times trata "estado vazio" como um problema de design. São cinco. Cada um aparece em um momento diferente, cumpre um papel diferente na retenção e falha por um motivo diferente.

1. Zero dados, primeira execução

A tela que o usuário vê na primeira vez que abre o produto. Sem projetos, sem documentos, sem histórico. O estado vazio de maior risco do app, e geralmente o mais negligenciado.

O estado de primeira abertura do Cursor é uma lição. Uma única janela de editor, um prompt suave, um comando de exemplo pronto para o teclado. Sem tour, sem desfile de tooltips, sem modal "Bem-vindo ao Cursor". O usuário já está dentro do trabalho.

O canvas de novo arquivo do Figma faz a mesma coisa em outro registro. Um canvas infinito limpo, uma barra de ferramentas ao alcance, um cursor onde você o deixou. Compare com produtos que abrem com um checklist de cinco passos e um muro de "Conecte seu workspace". Um parece ferramenta. O outro parece lição de casa.

2. Zero resultados de um filtro

O usuário acabou de pedir algo específico e o seu produto não tem nada para mostrar. É um momento de confiança. O estado vazio precisa reconhecer a busca, confirmar que ela rodou e oferecer um próximo passo.

O Linear mostra o filtro ativo, uma explicação de uma linha e uma ação clara de "Limpar filtros". O dashboard de pagamentos da Stripe faz o mesmo quando um intervalo de datas não retorna nada. A página não some. Ela explica e depois oferece.

O modo de falha é o beco sem saída: "Nenhum resultado encontrado." Ponto. Sem contexto, sem escapatória. O usuário fica preso em um estado que o produto criou, e o produto se recusa a ajudá-lo a sair.

3. Zero permissão

O estado vazio que ninguém desenha e todo mundo lança. O usuário cai em uma tela à qual não tem acesso, e o produto o pune por ser curioso. Um 403, uma linha "Você não tem permissão", um beco sem saída.

A versão boa respeita o usuário. Explica quem pode conceder acesso, dá um botão de "Solicitar acesso" em um clique e conta o que acontece depois. O Slack faz isso quando você clica em um canal privado sem ser membro. O estado vazio transforma um muro em uma porta.

4. Zero conexão

O usuário abriu o seu produto e ele ainda não se conectou a nada. A Stripe antes de qualquer pagamento. A Vercel antes de qualquer deploy. Um workspace novo do Slack antes de existirem canais de verdade. O maior risco de abandono do app, porque o usuário está olhando para um produto em branco e ainda não se comprometeu a preenchê-lo.

O estado "nenhum pagamento ainda" do Stripe Atlas é uma aula. Sem gráfico vazio com carinha triste. Ele mostra o tipo de atividade que o dashboard vai exibir, leva você à sua primeira integração e linka direto para a chave de API de que você precisa em seguida.

A lista de projetos vazia da Vercel é o oposto de um vazio. Um botão de deploy, uma opção de importar, um template de exemplo na mesma tela. O primeiro deploy é o evento de ativação, e o estado vazio é a pista de decolagem.

5. Zero saída de IA

Novo, e a maioria dos produtos está falhando nele. O usuário enviou um prompt e o sistema não tem nada para devolver. O modelo estourou o tempo, a entrada foi insuficiente ou uma trava de saída bloqueou.

A versão ruim diz "Desculpe, algo deu errado." A boa é específica. Por que nada voltou, o que o usuário pode mudar, se existe um caminho de nova tentativa. O fluxo da primeira gravação do Loom lida bem com um problema parecido: quando a gravação falha no upload, o estado vazio explica a falha e oferece uma nova tentativa imediata sem perder o arquivo. O artigo sobre design de onboarding de produtos de IA mostra como o formato do onboarding muda quando a IA é a superfície central.

O que todo estado vazio precisa

Os fortes compartilham cinco elementos. Tire qualquer um e a tela volta para o modo pedido de desculpas.

1. Contexto. Diga o que o usuário está vendo e por que está vazio. "Nenhuma issue ainda" não basta. "Nenhuma issue neste ciclo. Adicione a primeira com C." é uma tela fazendo o trabalho dela.
2. Ação. Uma ação principal, um atalho, um botão. Se você escreve três frases dizendo o que fazer, o design está errado.
3. Voz. A voz do sistema quando não tem mais nada a dizer precisa combinar com o resto da marca. Um tom estéril de erro dentro de um produto simpático quebra o encanto.
4. Hierarquia. Título, explicação de uma linha, ação principal, link secundário opcional. Quatro elementos com hierarquia visual de verdade fazendo o trabalho. Qualquer coisa a mais é ruído.
5. Movimento. Um sinal suave de que a tela está viva. Um cursor piscando, um pulso sutil no CTA, uma pequena seta animada. Um sinal de que o produto está esperando pelo usuário.

Modos de falha que matam estados vazios

Seis padrões matam mais estados vazios do que qualquer outra coisa.

Ilustrações vagas. Um desenho segurando uma prancheta. Um telescópio. Um astronauta flutuando. Elas substituem o trabalho que a tela deveria fazer e sinalizam que o produto não é sério o bastante para escrever um texto de verdade.

Estados sem saída. "Nada por aqui ainda" sem próximo passo. Um 404 sem escapatória. Um 403 sem caminho para o acesso. Todo estado vazio sem ação seguinte é um vazamento de retenção.

Estados vazios que dão sermão. Um parágrafo longo explicando o que esta seção faz. O usuário veio usar o produto, não ler um tutorial. Se o estado vazio precisa de três parágrafos, o produto precisa de menos explicação, não a tela de mais.

A armadilha do inbox zero. Desenhar a celebração de "tudo pronto" antes do fluxo de "primeira ação". O Superhuman conquista o inbox zero com meses de trabalho real. A maioria dos produtos copia a celebração sem merecê-la, e o usuário se sente tratado como criança no primeiro dia.

A saída fácil do "nada por aqui ainda". Três palavras, sem contexto, sem ação, sem voz. O equivalente em estado vazio de um designer desistindo. Se essa string vai para o ar no seu produto, a sua retenção já está quebrada.

Genérico para todos os arquétipos. Um componente reutilizado em primeira execução, sem resultados, sem permissão e sem conexão. Cada arquétipo tem apostas diferentes. Um único componente não atende a todos sem achatar cada um.

A auditoria de estados vazios

Passe cada estado vazio por estas sete perguntas. Se você não consegue responder todas com um sim claro, a tela não está pronta.

1. A tela diz ao usuário onde ele está e por que está vazia? Um rótulo, uma explicação de uma linha, um motivo. Se ele precisa adivinhar, a tela falhou antes de carregar.
2. Existe exatamente uma ação principal? Não dois botões competindo. Uma ação, tornada óbvia por hierarquia e contraste, como a hero section que a tela de fato é.
3. A voz combina com o resto do produto? Leia em voz alta ao lado de uma tela populada. Se o tom muda, o estado vazio está vestindo outra marca.
4. O próximo passo é possível com um atalho ou um clique? Não "vá em configurações, depois conecte, depois volte." Um movimento. Qualquer coisa maior é trabalho que o estado vazio deveria ter absorvido.
5. A tela parece viva, não abandonada? Um cursor, um pulso, um placeholder, uma dica. Um branco estático parece quebrado mesmo quando funciona direito.
6. A tela é específica para o arquétipo? Cada arquétipo tem apostas e textos diferentes. Um componente genérico reutilizado é um mau cheiro, não um sistema.
7. Se o usuário só vir esta tela, ela vende o produto? Se a resposta é não, o estado vazio não está fazendo a sua parte, e é nessa tela que a maioria dos usuários novos vai julgar o produto.

Um produto em que todo estado vazio passa nessas sete ativa sem esforço. Todo o resto se acumula sobre telas que já fizeram o trabalho de convencer.

Escolha o princípio, depois entregue a tela

Estados vazios não são a camada de acabamento, são a camada estrutural. O produto que vence em 2026 é aquele cuja primeira tela, página de zero resultados e dashboard desconectado já parecem o produto pelo qual o usuário se cadastrou. O artigo sobre princípios de design de landing page é a versão para páginas de marketing, e o texto sobre princípios de web design mostra como o resto do produto acompanha.

Pare de desenhar o dashboard primeiro. Comece pela tela que não tem nada. O dashboard é a recompensa. O estado vazio é o acordo.

Perguntas frequentes

Qual a diferença entre estado vazio e zero state?

Na maioria dos times, significam a mesma coisa. "Zero state" tende a se referir especificamente a cenários de primeira execução, sem dados. "Estado vazio" é mais amplo e cobre qualquer tela em que o conteúdo esperado está ausente, incluindo resultados filtrados, muros de permissão e falhas de IA. Os princípios são idênticos.

Todo estado vazio deve ter uma ilustração?

Não. A maioria não deve. Uma ilustração se justifica quando carrega informação, define um tom de que a marca precisa ou ancora visualmente uma explicação complexa de primeira execução. Um desenho simpático segurando uma prancheta é decoração, não design. Se a tela funciona sem a ilustração, lance sem ela.

Como escrever o texto de um estado vazio?

Duas frases, no máximo. A primeira diz o que o usuário está vendo e por que está vazio. A segunda diz o próximo passo, na voz ativa, com um verbo. Corte todo adjetivo e todo pedido de desculpas. Leia em voz alta. Se soar como template genérico, reescreva.

Desenhe primeiro a tela vazia

A tela sem nada é a tela que decide tudo. O dashboard e as integrações se apoiam em uma primeira impressão que você talvez não tenha desenhado de propósito. O custo de acertar essa tela é uma semana a mais. O custo de errar é a curva de retenção que ninguém consegue explicar.

Se você quer um time que desenha estados vazios como parte do produto, e não como faxina no final, contrate a Brainy. Entregamos produtos em que a primeira tela que o usuário vê é a tela de que ele se lembra.