Empty states e zero states: orientação, próximos passos e estímulo ao uso

O que são empty states e zero states (e por que eles importam)

Empty states e zero states são telas ou áreas da interface que aparecem quando não há dados para exibir. Eles não são “telas vazias”: são momentos de orientação. Em vez de deixar o usuário diante de um espaço em branco (ou de uma lista sem itens), o produto pode explicar o que está acontecendo, o que a pessoa pode fazer agora e qual é o benefício de fazer isso.

Embora muita gente use os termos como sinônimos, vale separar os dois para escrever microcopy mais preciso:

• Zero state: é o estado inicial, quando o usuário ainda não criou nada, não conectou nada ou não configurou nada. Ex.: “Você ainda não criou seu primeiro projeto”.
• Empty state: é o estado vazio após alguma ação, filtro ou condição que resultou em “nada encontrado”. Ex.: “Nenhum resultado para este filtro” ou “Sua busca não retornou itens”.

Na prática, o zero state costuma ser mais “educativo” (introduz a funcionalidade e incentiva o primeiro uso). Já o empty state costuma ser mais “diagnóstico” (explica por que não há itens e como ajustar para encontrar algo).

Tipos comuns de estados vazios e o que o texto precisa resolver

1) Primeiro uso (zero state de criação)

Exemplos: lista de projetos sem projetos, caixa de entrada sem mensagens, painel sem relatórios. O texto precisa reduzir a sensação de “não sei por onde começar” e transformar o vazio em um próximo passo óbvio.

• O que dizer: o que é aquela área, para que serve e qual é o primeiro passo.
• O que evitar: frases genéricas (“Nada aqui ainda”) sem orientação.

2) Filtros e segmentações (empty state por refinamento)

Exemplos: “Nenhum pedido com status X”, “Nenhum cliente com este segmento”. Aqui o usuário já tentou algo; o texto precisa ajudar a ajustar critérios.

Continue em nosso aplicativo

Você poderá ouvir o audiobook com a tela desligada, ganhar gratuitamente o certificado deste curso e ainda ter acesso a outros 5.000 cursos online gratuitos.

ou continue lendo abaixo...

Baixar o aplicativo

• O que dizer: por que não há itens (quando possível) e como ampliar resultados (limpar filtros, mudar período, remover restrições).
• O que evitar: culpar o usuário ou sugerir ações irrelevantes (“Tente novamente mais tarde” quando o problema é filtro).

3) Busca sem resultados

Exemplos: pesquisa por nome, ID, palavra-chave. O texto precisa orientar correções rápidas e oferecer alternativas.

• O que dizer: sugestões de ortografia, termos relacionados, remoção de aspas, busca parcial, e atalhos para navegar.
• O que evitar: “0 resultados” sem dicas; ou dicas que não se aplicam ao mecanismo de busca real.

4) Estado vazio após exclusão/limpeza

Exemplos: “Você arquivou todos os itens”, “Lixeira vazia”. Aqui o vazio pode ser positivo. O texto pode reconhecer a ação e oferecer próximos passos (criar novo, restaurar, ajustar visualização).

5) Dependência externa (integrações, permissões, sincronização)

Exemplos: “Conecte sua conta”, “Permita acesso”, “Sincronização ainda não ocorreu”. O texto precisa explicar o requisito e o que acontece depois, sem entrar em jargão técnico.

Objetivos do microcopy em empty/zero states

Um bom estado vazio cumpre pelo menos um destes objetivos (idealmente mais de um):

• Orientar: contextualiza onde o usuário está e o que aquela área faz.
• Desbloquear o próximo passo: oferece uma ação clara e imediata (ou duas, no máximo).
• Estimular o uso: mostra um benefício concreto do recurso, sem prometer demais.
• Reduzir frustração: quando o vazio é inesperado (busca/filtro), explica como sair dele.
• Ensinar de forma leve: introduz conceitos e padrões do produto (ex.: “projetos”, “tags”, “coleções”).

Estrutura recomendada: o “bloco” de conteúdo do estado vazio

Para manter consistência e facilitar testes, pense no estado vazio como um bloco com peças reutilizáveis. Nem todas são obrigatórias, mas a ordem ajuda:

• Título curto (1 linha): descreve o estado. Ex.: “Nenhum resultado para este filtro”.
• Texto de apoio (1–2 linhas): explica o motivo ou o valor. Ex.: “Remova um filtro ou amplie o período para ver mais itens.”
• Ação primária: o próximo passo mais provável. Ex.: “Limpar filtros”.
• Ação secundária (opcional): alternativa útil. Ex.: “Ver todos os pedidos”.
• Ajuda contextual (opcional): link para “Como funciona” ou “Saiba mais”, quando o recurso é novo ou complexo.

Se o estado vazio ocupa uma área pequena (como um card dentro de um dashboard), reduza para título + uma ação. Se for uma tela inteira, dá para incluir apoio e uma segunda ação.

Passo a passo prático para escrever empty/zero states

Passo 1: Identifique a causa do vazio (não escreva antes disso)

Antes de redigir, responda: por que está vazio?

• Não começou (zero state): usuário ainda não criou/configurou.
• Filtrou demais: filtros, período, status, segmentação.
• Buscou algo específico: termo inexistente, ortografia, busca muito restrita.
• Sem permissão: acesso negado, papel insuficiente.
• Dependência externa: integração não conectada, sincronização pendente.
• Sem dados por regra de negócio: ex.: “Ainda não há faturas para este mês”.

Essa causa define o tom e, principalmente, as ações que fazem sentido. Um erro comum é usar o mesmo texto para vazios diferentes.

Passo 2: Defina a “próxima ação ideal” (uma frase)

Escreva em uma frase o que você quer que o usuário faça em seguida. Exemplos:

• “Criar o primeiro projeto para começar a organizar tarefas.”
• “Limpar filtros para ver resultados.”
• “Conectar a conta para importar dados automaticamente.”

Essa frase vira o núcleo do CTA e do texto de apoio.

Passo 3: Escolha o benefício mais direto (não mais de um)

Em zero states, o benefício ajuda a motivar o primeiro uso. Escolha o benefício que o usuário percebe rápido. Exemplos:

• “Acompanhe o andamento em um só lugar.”
• “Receba alertas quando algo mudar.”
• “Economize tempo importando seus dados.”

Evite benefícios abstratos (“Aumente sua produtividade”) se você não consegue conectar com uma ação imediata.

Passo 4: Escreva o título como diagnóstico, não como julgamento

O título deve descrever o estado, sem culpar. Compare:

• Ruim: “Você não tem nada aqui.”
• Melhor: “Nenhum item por enquanto.”
• Específico: “Nenhum pedido com este status.”

Em empty state por filtro, nomeie o filtro quando possível: “Nenhum resultado para ‘Aguardando pagamento’”. Isso reduz a sensação de bug.

Passo 5: Escreva o texto de apoio respondendo “por quê?” e “como sair daqui?”

O apoio deve ser curto e acionável. Modelos úteis:

• Filtro: “Tente remover um filtro ou ampliar o período.”
• Busca: “Verifique a ortografia ou tente buscar por parte do nome.”
• Integração: “Conecte sua conta para importar automaticamente.”
• Permissão: “Peça acesso a um administrador para ver estes dados.”

Se você não consegue explicar o “por quê” com segurança (porque o sistema não sabe), foque no “como sair”: “Tente ajustar os filtros” é melhor do que inventar uma causa.

Passo 6: Defina CTAs coerentes com o estado (e com o risco)

Estados vazios pedem ações de baixo atrito. Boas práticas:

• Zero state: CTA de criação (“Criar…”, “Adicionar…”, “Conectar…”).
• Filtro: CTA de reversão (“Limpar filtros”, “Redefinir”, “Ver tudo”).
• Busca: CTA de exploração (“Ver sugestões”, “Navegar por categorias”).
• Permissão: CTA de solicitação (“Solicitar acesso”) ou orientação (“Falar com admin”).

Evite CTAs que não resolvem o vazio. Ex.: em “Nenhum resultado”, oferecer “Atualizar página” raramente ajuda.

Passo 7: Inclua uma alternativa para “não quero fazer isso agora”

Nem todo usuário quer criar algo imediatamente. Uma ação secundária pode reduzir abandono:

• “Ver exemplos” (se houver templates)
• “Importar arquivo” (se suportado)
• “Explorar biblioteca” (se existir conteúdo pronto)
• “Voltar para o painel” (se a pessoa caiu ali por engano)

Se não houver alternativa real, é melhor não inventar uma segunda ação só para preencher espaço.

Passo 8: Ajuste para o contexto visual (tela cheia vs componente)

Em uma tela cheia, você pode usar título + apoio + 1–2 CTAs. Em um componente pequeno (um card vazio dentro de um dashboard), use:

• título curto
• um CTA

Exemplo de card vazio: “Sem alertas” + botão “Criar alerta”.

Modelos prontos (com variações) para você adaptar

Zero state de lista (primeira criação)

Título: “Você ainda não criou nenhum [item].”

Apoio: “Crie seu primeiro [item] para [benefício direto].”

CTA primário: “Criar [item]”

CTA secundário (opcional): “Importar [itens]” / “Ver exemplos”

Exemplo aplicado (projetos):

• Título: “Você ainda não criou nenhum projeto.”
• Apoio: “Crie um projeto para organizar tarefas e acompanhar o andamento.”
• CTA: “Criar projeto”
• Secundário: “Usar um modelo”

Empty state por filtro

Título: “Nenhum resultado para estes filtros.”

Apoio: “Remova um filtro ou amplie o período para ver mais resultados.”

CTA primário: “Limpar filtros”

CTA secundário: “Ver todos”

Variação mais específica:

• Título: “Nenhum pedido em ‘Entregue’ neste período.”
• Apoio: “Tente mudar o período ou selecionar outro status.”
• CTA: “Alterar período”
• Secundário: “Limpar status”

Busca sem resultados

Título: “Nenhum resultado para “[termo]”.”

Apoio: “Verifique a ortografia ou tente buscar por parte do nome.”

CTA primário: “Limpar busca”

CTA secundário: “Ver todos” / “Explorar categorias”

Se o produto tiver sugestões automáticas, o apoio pode ser mais direto: “Tente: [sugestão 1], [sugestão 2].”

Integração não conectada

Título: “Conecte sua conta para ver seus dados aqui.”

Apoio: “A conexão importa automaticamente [tipo de dado] e mantém tudo atualizado.”

CTA primário: “Conectar conta”

CTA secundário: “Saiba como funciona”

Sem permissão

Título: “Você não tem acesso a esta área.”

Apoio: “Peça a um administrador para liberar a permissão de [nome da permissão].”

CTA primário: “Solicitar acesso”

CTA secundário: “Voltar”

Como estimular o uso sem parecer propaganda

O estímulo ao uso em zero states funciona melhor quando é específico e conectado ao contexto. Em vez de adjetivos (“incrível”, “poderoso”), use evidências do que acontece depois do clique.

Técnicas de estímulo que cabem em 1–2 linhas

• Benefício imediato: “Crie um alerta para ser avisado quando o status mudar.”
• Redução de esforço: “Importe um arquivo para começar com seus dados.”
• Previsibilidade: “Leva menos de 2 minutos para configurar.” (use apenas se for verdade e mensurável)
• Exemplo de resultado: “Depois, você verá um gráfico com [métrica] por semana.”

Evite promessas vagas (“melhore seus resultados”) e evite exageros. O objetivo é diminuir incerteza, não vender.

Checklist de qualidade para revisar seus estados vazios

• O estado está nomeado corretamente? (zero state vs empty por filtro/busca)
• O título descreve o que aconteceu? (sem julgamento, sem culpa)
• O texto de apoio ajuda a sair do vazio? (próximo passo claro)
• O CTA primário resolve o problema mais provável?
• Há uma alternativa útil? (quando faz sentido)
• O texto é específico ao contexto? (menciona filtro, período, termo buscado, tipo de item)
• Não depende de jargão interno? (nomes entendíveis pelo usuário)
• Não promete algo que a interface não entrega?
• O tamanho está adequado ao espaço? (card vs tela cheia)

Exemplos completos (antes e depois) para aplicar no seu produto

Exemplo 1: Lista de “Relatórios” no primeiro acesso

Antes

• Título: “Nada aqui.”
• Apoio: “Crie um relatório.”
• CTA: “Adicionar”

Depois

• Título: “Você ainda não tem relatórios.”
• Apoio: “Crie um relatório para acompanhar resultados por período e comparar variações.”
• CTA primário: “Criar relatório”
• CTA secundário: “Usar modelo”

O “Depois” melhora porque nomeia o objeto (“relatórios”), explica para que serve e troca “Adicionar” por um verbo específico.

Exemplo 2: Tabela de pedidos com filtros aplicados

Antes

• Título: “0 pedidos.”
• Apoio: “Tente novamente.”
• CTA: “Atualizar”

Depois

• Título: “Nenhum pedido com estes filtros.”
• Apoio: “Remova um filtro ou amplie o período para ver mais pedidos.”
• CTA primário: “Limpar filtros”
• CTA secundário: “Alterar período”

Aqui o texto reconhece o cenário real (filtros) e oferece saídas diretamente relacionadas.

Exemplo 3: Busca de clientes por nome

Antes

• Título: “Nenhum resultado.”
• Apoio: “Tente outra coisa.”

Depois

• Título: “Nenhum resultado para “mariana silva”.”
• Apoio: “Verifique a ortografia ou busque por parte do nome (ex.: “mariana”).”
• CTA primário: “Limpar busca”
• CTA secundário: “Ver todos os clientes”

O “Depois” reduz ambiguidade ao repetir o termo e dá uma dica operacional (busca parcial).

Exemplo 4: Área depende de integração

Antes

• Título: “Sem dados.”
• Apoio: “Conecte para continuar.”
• CTA: “Conectar”

Depois

• Título: “Conecte sua conta para importar transações.”
• Apoio: “Depois da conexão, suas transações aparecem aqui automaticamente e são atualizadas diariamente.”
• CTA primário: “Conectar conta”
• CTA secundário: “Entender a importação”

O texto “Depois” explica o que será importado e o que muda após a ação, reduzindo a incerteza.

Casos especiais: quando o vazio é o resultado desejado

Alguns vazios são positivos: “Sem notificações”, “Nenhum problema encontrado”, “Fila vazia”. Nesses casos, o microcopy pode reforçar tranquilidade e oferecer uma ação opcional, sem criar urgência artificial.

• Título: “Tudo certo por aqui.”
• Apoio: “Não encontramos problemas nas últimas 24 horas.”
• Ação opcional: “Ver histórico” / “Ajustar monitoramento”

O cuidado aqui é não empurrar uma ação desnecessária. Se o usuário chegou para checar “se está tudo bem”, o vazio já é a resposta.

Blocos de texto reutilizáveis (para design system de conteúdo)

Se você trabalha com componentes reutilizáveis, vale manter um pequeno “kit” de frases que podem ser combinadas com variáveis (item, período, filtro, termo). Exemplos:

Títulos (diagnóstico)  - Você ainda não tem {itens}.  - Nenhum resultado para estes filtros.  - Nenhum resultado para “{termo}”.  - Nada encontrado neste período.  - Conecte sua conta para ver {dados} aqui.  - Você não tem acesso a esta área.  Apoio (saída)  - Crie seu primeiro {item} para {benefício}.  - Remova um filtro ou amplie o período.  - Verifique a ortografia ou tente buscar por parte do nome.  - Ajuste o período para ver itens anteriores.  - Conecte sua conta para importar {dados} automaticamente.  - Peça a um administrador para liberar {permissão}.  CTAs (ação)  - Criar {item}  - Importar {itens}  - Usar modelo  - Limpar filtros  - Alterar período  - Limpar busca  - Conectar conta  - Solicitar acesso

Esse kit ajuda a manter consistência e acelera a produção, mas não substitui a validação de contexto: sempre confira se a ação realmente existe e se resolve o vazio.