Dez designs originais de empty state para primeiro uso, busca sem resultados, caixa de entrada zerada, erros e falta de permissão, com código editável e um gerador de mensagens acessíveis.
Um empty state é o que uma tela mostra quando ainda não há nada para listar: uma conta nova, uma busca sem correspondências, uma caixa de entrada zerada ou um carregamento que falhou. Cada um precisa de uma explicação simples e de um caminho para seguir. Os dez designs abaixo cobrem todos os casos comuns com HTML e CSS editáveis, além de um gerador que escreve marcação acessível.
Os cinco tipos de vazio e o que cada um deve oferecer
Telas vazias são a primeira coisa que novos usuários encontram e o lugar onde as pessoas caem quando uma busca dá errado, mas muitas vezes são só uma caixa cinza dizendo Sem dados. Estes exemplos tratam cada tipo de vazio de forma diferente, porque a mensagem certa depois de um erro de digitação não é a mensagem certa no primeiro dia. Cada trecho é independente e usa formas simples em vez de ilustrações de banco de imagens.
É a tela ou o painel exibido quando uma lista, tabela, dashboard ou busca não tem nada para mostrar. Os bons explicam o motivo e indicam a próxima ação; os ruins mostram espaço em branco ou um simples Sem dados.
Use um título e um texto de verdade, não apenas uma imagem. Marque a arte decorativa com texto alternativo vazio. Se a mensagem de vazio aparecer depois de um filtro ou busca sem recarregar a página, coloque-a dentro de um elemento com role="status", que tem uma configuração live polite implícita, e não mova o foco para ela.
Pode ajudar no primeiro uso, por exemplo um projeto de demonstração que o usuário pode abrir e apagar. Identifique-o claramente como exemplo para que ninguém o confunda com os próprios dados.
Repita o termo, diga que nada correspondeu e sugira soluções: verificar a ortografia, remover um filtro ou navegar por uma categoria. Um botão Limpar filtros de um clique é a ação isolada mais útil.
Um empty state significa que realmente não há nada para mostrar. Um erro significa que pode haver dados, mas eles não puderam ser carregados. Diga qual dos dois é, porque dizer a alguém que não tem pedidos quando o servidor falhou é alarmante.
Um contorno tracejado indica onde o item vai aparecer. O botão fica dentro da área vazia para ninguém precisar procurá-lo.
Oferecer criar ou importar respeita quem já tem dados em outro lugar.
Uma lista curta com o primeiro passo destacado transforma um dashboard vazio em um plano.
Uma linha de exemplo bem sinalizada mostra como a tela vai ficar quando estiver cheia.
Repita o termo, sugira soluções e mantenha um caminho de volta para ver tudo.
Mostrar os filtros ativos como chips removíveis aponta direto para a causa.
Algumas telas vazias são boas notícias. Uma confirmação tranquila basta; não precisa de botão.
Nomeie o problema com honestidade, diga que os dados estão seguros se estiverem e ofereça tentar de novo.
Diga às pessoas a quem pedir e dê a elas um botão que faz o pedido.
Manter os cabeçalhos das colunas mostra o que vai aparecer, e uma única linha ocupa todas elas com a mensagem.
As faturas que você enviar vão aparecer aqui, com o status e a data de vencimento.
Criar uma fatura
Gerador de empty state
Escreva o título, a frase e o botão, escolha o tipo e copie HTML e CSS acessíveis. Resultado inicial:
Explicação
Texto do botão
Primeiro uso
Sem resultados
Erro
Pré-visualização do seu empty state
Copiar HTML
Copiar CSS
Comece grátis · Sem cartão de crédito