X-Fidbeck em estados vazios

1) O que são os estados vazios e o que são necessários

Um estado vazio é uma tela/widget onde o conteúdo principal está temporariamente ausente, antes da primeira ação, após a limpeza, com o resultado zero, quando o download falha, sem permissão/acesso.

• Explicar por que está vazio.
• mostrar o valor da partição;
• oferecer um passo a seguir claro (ou vários para escolher);
• reduzir a ansiedade e evitar cuidados.

Bom estado vazio = contexto + benefício + ação.

2) Tipologia de estados vazios

1. Zero primário (first-time empty): o usuário ainda não criou ou configurou nada.
2. Pesquisa/filtro zero: a consulta não deu resultados.
3. Vazio temporal: os dados são carregados ou a fila está sendo executada.
4. Limite/direito: sem acesso, nível de verificação insuficiente.
5. Limpado pelo usuário: cesta/histórico limpo.
6. Falha técnica: falha de rede/serviço, retrai.

3) Princípios de design

Contextualidade: falamos de uma razão específica para o vazio.
O valor → a ação, primeiro, o porquê desta seção, depois o que fazer.
Um CTA principal é secundário (learn more/FAQ), se necessário.
Resumir e especificar: 1-2 frases + botão claro.
Suporte visual: ícone/ilustração suporta o significado, não distrai.
Evitar impasses, há sempre um caminho a seguir.
Coerência de tom: amigável e tranquilo; sem piadas em passos críticos (pagamentos, segurança).
A11y e localização: Lido por uma tela de tela, inclinado corretamente, considerando comprimento de linha.

4) Esqueleto de estado vazio (modelo)

Título (opcional, 1 linha) - Afirmação de valor ou razão.
Texto (1-2 frases) - «por que é vazio» + «o que segue».
O CTA primário é o principal alvo.
Segundo CEM/link - ajuda/regras/documentação.
Visual (opcional) - fácil ilustração 24-96 px, não sobrecarregar.

5) Pattern de cenário

5. 1 Onboarding/primeiro zero

O objetivo é levar ao primeiro sucesso.
Texto: «Para ver as recomendações pessoais, preencha o perfil e selecione os interesses».
CTA: «Preencher perfil »/« Selecionar interesses».
Conselho: Adicione um micro indicador de esforço/tempo: «Vai demorar £1 minuto».

5. 2 Pesquisa/filtros = resultado zero

O objetivo é ajudar a ajustar o pedido.

Texto: "Nada encontrado por "live blackjack". Tente «blackjack» ou remova o filtro Provedor: X

CTA: «Reativar filtros» secundário: «Abrir diretório».

5. 3 Pagamentos/carteira vazia

O objetivo é estimular a adição de um método/primeiro reabastecimento.
Texto: «Guarde a forma de pagamento - os repasses e as conclusões serão mais rápidos».
CTA: «Adicionar forma de pagamento» secundário: «Regras e comissões».

5. 4 Verificação/acesso

O objetivo é explicar com transparência a limitação e o caminho de retirada.

Texto: "Esta seção está disponível após a confirmação da identidade. Normalmente, leva até 2 minutos

CTA: «Fazer a verificação» secundário: «Por que é que isso é necessário?»

5. 5 Dados no caminho/vazio temporal

O objetivo é reduzir a ansiedade.

Texto: "Coletando os seus dados. Normalmente, leva até 30 segundos. Se puder deixar a página, informaremos quando estiver tudo pronto

CTA: «Compreendo» secundário: «O que vai acontecer?»

5. 6 Depois de limpar/remover

O objetivo é confirmar a ação e sugerir o próximo passo.

Texto: "História limpa. Novas operações aparecerão após a próxima reposição

CTA: «Some a conta».

5. 7 Erro/retrai

O objetivo é um caminho claro de recuperação.

Texto: "Não é possível carregar dados. Verifique a rede ou tente novamente

CTA: «Repetir» secundário: «Status do sistema».

6) Microtextos: modelos prontos

• "Os jogos preferidos aparecerão quando você adicionar o primeiro. [Adicionar aos favoritos]"

• Não foi encontrado nada a pedido de «se». Especifique a solicitação ou reinicie os filtros. [Redefinir filtros]"

• "Ainda não tem métodos salvos. Adicione um cartão ou carteira para acelerar os pagamentos. [Adicionar método]"

• "A função não está disponível sem confirmação de idade. Vai demorar uns minutos. [Confirmar a idade] [Para quê?] '

• "Contamos as estatísticas das últimas 24 horas... Normalmente é até 30 segundos. Vamos mostrar a notificação quando estiver pronto

• "O serviço não está disponível. Já estamos a arranjar. Tente mais tarde ou verifique o status. [Repetir] [Status do sistema]"

7) Linguagem visual e ilustrações

Use ilustrações monocromáticas/bicolores leves para não discutir com o CTA.
Tamanhos e recuos - como o cartão de conteúdo (coerência visual).
Não represente cenas de humor em cenários de estresse (pagamento/segurança).

8) Localização e disponibilidade

Coloque o estoque sobre o comprimento de linhas (DE/TR mais longo).
Traduza formatos de número, divisas, datas localmente.
Para screeners: role = «status», aria-live = «polite/assertive» para dinâmica.
Não invista apenas na imagem: duplique o texto.
Verifique a leitura em 320 px e contraste em WCAG.

9) Métricas e experiências

• CTR de estado vazio principal CTA;
• conversão para «primeiro sucesso» (activation event);
• tempo até a primeira ação;
• taxa de retorno à tela sem progresso;
• porcentagem de resultados de pesquisa nulos;
• Pedidos de apoio no guião.

• Título geral específico vs;
• O verbo CTA de ação vs é neutro;
• adicionar uma estimativa de tempo;
• disponibilidade de CTA secundário (FAQ) e ordem dos botões;
• ilustração vs ícone vs sem visual.

10) Anti-pattern

«Aqui está vazio», sem explicação ou passo.
Brincadeiras em passos críticos (pagamento, segurança).
Um CTA «Aprender mais» sem vinculação ao contexto.
Fiança passiva, «deve ser adicionada». Escreva ativamente: «Adicione»...
Parágrafos longos: 1 a 2 frases no máximo.
Playsholder em vez de editora em formas - piora A11y e compreensão.
Restrições ocultas («instantaneamente», embora seja possível atraso).

11) Folha de cheque antes do lançamento

Porque está vazio?

• Há valor de partição em uma frase?
• Há um CTA principal e, se necessário, secundário?
• O texto é breve (≤ 140 caracteres) e específico?
• Uma estimativa de tempo/esforço foi adicionada, se apropriado?
• O tom corresponde ao cenário (calmo/suporte)?
• Verificou a localização e A11y (ária-atributos, contraste)?
• A imagem não domina o CTA?

12) Exemplos de antes/depois

Catálogo de jogos (primeiro zero)

Até: «Não há nada aqui»

Depois de: "Recolha a sua fita. Escolha 3 gêneros favoritos - comecemos a recomendar. [Selecionar gêneros]"

Pesquisa zero

Até: «Nada encontrado»

Após: "Por "high-limit roulette", não há resultados. Remova o filtro «High-limit» ou tente «rolette». [Redefinir filtros]"

Pagamentos

Até: «Sem meios de pagamento»

Depois: "Guarde o cartão ou a carteira - as ressalvas e conclusões serão mais rápidas. [Adicionar método] [Comissão e data]"

Verificação

Até: «Sem acesso»

Após: "A seção está disponível após a confirmação da identidade. Demora uns minutos. [Verificar] [Por que isso é importante]"

13) Incorporar ao sistema de design

• 'title' (linha opcional)
• 'body' (texto curto 1-2 frases)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'icon/ilustration' (opcional)

Guarde os textos em arquivos i18n ao lado do componente, suporte as chaves e descrições, conecta tone-map (tom e vocabulário de situação).

14) Construção rápida (copiar e usar)

• Título: Comece no primeiro passo
• Texto: «Aqui haverá recomendações assim que você escolher os interesses».
• CTA: «Escolher interesses»
• Secundário, «Como funciona?»

• Não há nada de «Por» Reinstale os filtros ou especifique a solicitação
• CTA: «Reativar filtros»
• Secundário: «Diretório»

• Texto: "A função está disponível após a confirmação da idade. Normalmente é até aos 2 minutos "
• CTA: «Confirmar idade»
• Secundário, «Para quê?»

• Texto: "Coletando dados de 24 horas. Normalmente é até 30 segundos. Vamos avisá-lo quando estiver pronto
• CTA: «Está bem»

Barra final

Contexto + valor + ação - em uma «pilha».
Um CTA principal sem competição de peso visual.
Em resumo e especificamente, 1-2 sugestões.
Não há telas sem saída.
A localização e o A11y estão no nível do componente.