empty states
Telas sem conteúdo viram oportunidades: explicar contexto, sugerir próxima ação, evitar frustração. Cinco variantes cobrem os casos mais comuns.
anatomia
Estrutura universal · 4 elementos opcionais conforme o caso.
nenhum projeto ainda
você ainda não criou nenhum projeto. comece criando o primeiro.
- Ícone ou ilustração leve · 32-64px BIT-aligned
- Título curto explicativo · 3-6 palavras
- Descrição com 1 linha de contexto
- Botão primary com ação clara · imperativa
- Botão ghost opcional pra ação secundária (saiba mais, voltar, etc.)
01 · first run · sem dados
Usuário acabou de entrar e a tela ainda não tem nada. Foco em orientar a primeira ação.
comece pelo primeiro post
você ainda não publicou nada por aqui. clica abaixo pra escrever o primeiro post.
02 · sem resultado de busca/filtro
Usuário buscou ou filtrou e nada retornou. Sugerir limpar filtro ou termos alternativos.
nada encontrado pra "perifa"
tenta usar palavras diferentes, ou tira alguns filtros pra ampliar a busca.
03 · erro de carregamento
Server caiu, rede travou. Reconhece o erro sem culpar o usuário · sugere retry.
deu ruim no carregamento
o servidor não respondeu. tenta de novo em alguns segundos.
04 · sem permissão
Usuário acessou área que não pode ver. Explica o porquê e sugere o que fazer.
você não tem acesso aqui
essa área é só pra admins. peça pra alguém com permissão te liberar.
05 · em construção
Feature foi anunciada mas ainda não rolou. Manter a expectativa sem prometer prazo.
essa parte tá vindo
estamos construindo. fica de olho aqui ou se inscreve pra ser avisado.