Empty states e dicas UX

1) Para quê os estados vazios

• explica porque está vazio,
• mostra o que fazer a seguir
• oferece um primeiro passo seguro,
• reduz a ansiedade e economiza tempo de suporte.

2) Tipologia de estados empty

1. Primeiro lançamento (first-time) - O usuário ainda não fez nada.
2. Sem dados (zero data) - As entidades não foram criadas ou a lista está vazia.
3. Filtros/pesquisa (no results) - Os termos excluíram tudo.
4. Erro/indisponibilidade temporária - rede/servidor, mas os dados estão disponíveis em princípio.
5. Não há direitos/restrições - o acesso é proibido, é necessário CUS/rol/limite.
6. Manutenção - trabalho de rotina, espera.

3) Estrutura do cartão empty

Ícone/ilustração (não sobrecarregar; contraste ≥ AA).
O cabeçalho é «Aqui está vazio».
Razão/contexto: «Você ainda não adicionou» .../« O filtro não encontrou correspondências ».
1-2 ação (CTA): primário (cenário principal), secundário (alternativa).
Ajuda Link (opcional).
Nível de página: mantenha a navegação e os filtros habituais - não transforme a tela em um impasse.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Tom e texto (copiar UX)

Claro e simpático. Evite «Erro 0x»....

A razão → a ação. O filtro VIP excluiu todas as gravações. Redefinir filtro?"

Sem culpa. Não culpe o usuário pelo vazio.
Um pensamento é uma frase.
Localização: evite metáforas culturais; coloque + 20% a 30% de comprimento de texto.

5) Ilustrações e visualização

Neutras, discretas; em um tema dark, aumente a luminosidade das ilustrações.
Não use as ilustrações como um único hospedeiro de sentido.
Escala fixa; Não rompa a grade e a linha de base.

6) CTA e alternativas

O CTA primário é o próximo passo principal (criar/depositar/subscrever).
Secundário - Ver demo, importar, reativar filtros.
Limite de escolha: até 2 CTA; O resto está em «Mais».
Para riscos/pagamentos, texto transparente sobre efeitos e cancelamento.

7) Estados vazios em cenários

7. 1 Primeiro lançamento

Lista de cheques de 3 a 5 passos: «Adicione a forma de pagamento», «Selecione o provedor».
Botão Omitir + referência ao hyde.

7. 2 Sem dados

Uma explicação curta para «por que está vazio» + CTA «Novo »/« Importar».
Dica: «Você pode carregar o CSV» (links para o modelo).

7. 3 Filtros/Busca

Mostre os filtros ativos e o botão Reinstalar.
Sugira correspondências ou pedidos alternativos.

7. 4 Erro/indisponibilidade

"Enfrentámos um problema. Tente mais tarde + Repetir/Status do sistema.