O que Sistema de Estado Vazio faz?
Propósito
O Sistema de Estado Vazio fornece uma estrutura para projetar telas ou componentes que aparecem quando não há dados a serem exibidos. Em vez de mostrar uma tela em branco ou uma mensagem genérica "Nenhum resultado encontrado", este sistema trata estados vazios como oportunidades para onboarding, educação e descoberta proativa. Ele transforma potenciais becos sem saída em momentos produtivos que mantêm o momentum do usuário e esclarecem a utilidade do sistema.
Casos de Uso
- Primeiras Experiências: Quando um usuário faz login pela primeira vez e não criou nenhum conteúdo (ex.: um painel ou lista de projetos vazios).
- Resultados de Busca: Quando a consulta de busca de um usuário não retorna resultados.
- Filtragem: Quando uma combinação de filtros ativos resulta em uma grade vazia.
- Containers Vazios: Elementos de UI específicos, como um carrinho de compras vazio, uma central de notificações limpa ou uma lista de favoritos nova.
- Estados de Erro: Quando o conteúdo não carrega devido a problemas de permissão ou conexão (caso de uso secundário).
Quando NÃO Usar
- Estados de Carregamento: Use um skeleton screen ou spinner quando o conteúdo é esperado para aparecer em breve.
- Páginas "Mortas" Permanentes: Use uma página 404 para links quebrados ou recursos excluídos.
- Conteúdo Parcial: Se alguns dados estão disponíveis, mas limitados, use padrões de layout padrão em vez de um estado vazio.
- Fundos Passivos: Não use para seções que devem ficar em branco por design (ex.: margens ou espaços em branco decorativos).
Entradas
- Tipo de Cenário Vazio: É um estado limpo pelo usuário (sucesso), um estado de primeira execução (onboarding) ou uma falha de busca (descoberta)?
- Intenção do Usuário: O que o usuário estava tentando alcançar ou encontrar?
- Proposta de Valor Central: Qual é o principal benefício do conteúdo que está faltando atualmente?
- Ações Disponíveis: Qual é o "melhor próximo passo único" para o usuário?
Saídas
- Blueprint de Estado Vazio: Uma definição estrutural incluindo ilustração, título, corpo do texto e CTA primário.
- Lógica Contextual: Regras para quando e onde o estado vazio deve ser acionado.
- Estratégia de Descoberta: Recomendações de conteúdo sugerido ou dicas educacionais para preencher o vazio.
Fluxo de Trabalho
1. Identificar o Gatilho Vazio
Determine por que o estado está vazio. Categorize-o para escolher o tom correto:
- Primeira execução (Educacional): Incentive a primeira ação de "criar".
- Limpo pelo usuário (Positivo): Reconheça a conclusão (ex.: "Tudo em dia!").
- Busca/Filtro (Ajuda): Forneça maneiras de ampliar ou redirecionar a busca.
2. Estabelecer Hierarquia Visual
Estruture o estado vazio usando a "Regra dos Três Pontos" (modificada para estados vazios):
- A Âncora (Visual): Um ícone ou ilustração não distrativa que define o tom.
- O Contexto (Mensagem): Um título claro explicando por que está vazio e um corpo explicando como mudar isso.
- O Alvo (CTA): Um botão primário que aciona a criação de conteúdo ou redefine filtros.
3. Redigir Cópias Orientadas à Ação
- Título: Seja específico. Em vez de "Nenhum Item", use "Você ainda não criou nenhum projeto."
- Corpo: Ofereça valor. "Os projetos ajudam você a organizar suas tarefas. Crie o primeiro para começar."
- CTA: Use verbos orientados a benefícios. "Criar Projeto" ou "Iniciar Teste Gratuito."
4. Fornecer Caminhos de Descoberta (Ações Secundárias)
Se não houver uma ação direta de "criar" (como na busca), ofereça alternativas:
- Redefinir: Um link para limpar todos os filtros.
- Sugestões: Categorias populares ou sugestões de "Você quis dizer?".
- Educação: Link para documentação ou um tutorial em vídeo.
5. Definir Restrições Técnicas
- Responsividade: Garanta que o estado vazio permaneça centralizado e legível em viewports pequenos.
- Acessibilidade: Use papéis ARIA apropriados (ex.:
role="status") para garantir que o estado seja anunciado quando aparecer dinamicamente.
Regras de Decisão
- A Regra da Uma Ação: Concentre-se em exatamente UMA ação primária para evitar sobrecarregar o usuário em um momento de potencial confusão.
- Empatia sobre Humor: Embora um pouco de personalidade seja aceitável, priorize clareza e utilidade. Evite cópias "inteligentes" que escondem a solução.
- Direto vs. Indireto:
- Se o usuário pode resolver (ex.: primeira execução), use um CTA Primário.
- Se o usuário não pode resolver (ex.: falha na busca), use sugestões ou links de redefinição.
- Relevância da Imagem: Use ilustrações que reforcem o contexto específico (ex.: uma lupa para busca, uma pasta para arquivos).
Restrições
- Acessibilidade: As ilustrações de estado vazio devem ter
aria-hidden="true"ou ser puramente decorativas. O texto deve atender às taxas de contraste WCAG AA. O CTA primário e quaisquer links/botões secundários devem atender à WCAG 2.2 SC 2.5.8 (tamanho mínimo do alvo de 24x24px). - Escala: Os estados vazios não devem exceder a largura do contêiner do conteúdo real que substituem.
- Consistência: Use o mesmo estilo visual e layout para todos os estados vazios em todo o site para construir reconhecimento de padrão.
Padrões Comuns de Falha
- O "Beco Sem Saída": Dizer ao usuário que algo está vazio sem dizer como resolver.
- Superdesign: Usar ilustrações complexas e pesadas que distraem do CTA primário.
- Tom Negativo: Usar linguagem que soe como erro ou falha (ex.: "Busca Falhou!").
- Cópia Genérica: Usar "Nenhum resultado" para tudo, desde busca até onboarding pela primeira vez.
- Transbordamento em Mobile: Designs que ficam ótimos no desktop, mas exigem rolagem vertical no mobile apenas para ver o CTA.
Critérios de Validação
- O estado vazio explica claramente por que está aparecendo.
- Há um CTA primário claro e acionável ou um caminho de "redefinir".
- A hierarquia visual leva o olho do visual até o CTA.
- O tom corresponde ao contexto (onboarding vs. falha na busca).
- O estado é acessível (contraste, navegação por teclado, anúncios de leitor de tela via
role="status"ou região ativa equivalente). - O CTA primário atende à WCAG 2.2 SC 2.5.8 (tamanho mínimo do alvo de 24x24px).
- O layout é responsivo e centralizado dentro de seu contêiner pai.