Uma tela vazia costuma ser a primeira coisa que um novo usuário vê. Ela deve dizer por que está vazia e o que fazer em seguida. Teste cada lista, feed ou tela de dados do seu app com estes estados.
A checklist
- Primeiro uso, conta recém-criada. - Por quê: é a primeira impressão logo depois do cadastro. - Como checar: crie uma conta nova e abra cada aba principal. Cada uma mostra uma explicação e um próximo passo, não uma área em branco.
- Uma ação clara. - Por quê: "Nada aqui" sem botão é um beco sem saída. - Como checar: cada estado vazio tem uma ação óbvia (adicionar, importar, navegar) e ela funciona.
- Busca sem resultados. - Por quê: o usuário precisa distinguir "nenhum resultado" de "quebrado". - Como checar: busque uma string sem sentido. A tela cita o termo buscado e sugere uma mudança, como conferir a grafia ou limpar os filtros.
- Resultados filtrados. - Por quê: usuários esquecem que os filtros estão ativos e acham que os dados sumiram. - Como checar: aplique filtros que não batem com nada. A tela diz que há filtros ativos e oferece "limpar filtros".
- Tudo apagado. - Por quê: o último item removido não pode deixar uma lista quebrada. - Como checar: apague um por um todos os itens. O estado vazio aparece, sem cabeçalho antigo, contagem ou linha sobrando.
- Contadores e selos zerados. - Por quê: "0 itens" ao lado de um layout que parece cheio confunde. - Como checar: sem dados, confira os selos das abas, totais e cartões de resumo. Todos mostram zero ou somem, de forma consistente.
- Vazio x carregando x erro. - Por quê: mostrar "vazio" enquanto os dados ainda carregam, ou depois de uma falha, engana. - Como checar: desacelere a rede e faça uma requisição falhar. O estado vazio só aparece depois de um carregamento bem-sucedido com zero itens. Veja a checklist de estados de erro.
- Vazio por causa de permissão. - Por quê: uma lista de fotos vazia pode significar apenas que o acesso foi negado. - Como checar: negue a permissão. A tela explica isso e leva às configurações, em vez de dizer "nenhuma foto".
- Conteúdo aparece quando os dados chegam. - Por quê: a tela pode ficar presa mostrando o estado vazio. - Como checar: a partir do estado vazio, adicione ou sincronize um item. A lista atualiza sem reiniciar.
- Layout e visuais.
- Por quê: ilustrações grandes empurram a ação para fora da tela em aparelhos pequenos.
- Como checar: veja os estados vazios em um celular pequeno, em um grande, na horizontal e com fonte grande. A ação continua visível.
- Texto e idioma.
- Por quê: textos tristes ou que culpam o usuário soam mal, e strings sem tradução são comuns aqui.
- Como checar: leia cada estado vazio em cada idioma suportado.
- Acessibilidade.
- Por quê: arte decorativa não pode esconder a mensagem.
- Como checar: com um leitor de tela, o texto e a ação são lidos em uma ordem sensata e a imagem é ignorada ou descrita.
Relacionados
De volta a todas as checklists · Checklist de estados de carregamento · Checklist de busca e filtro
Novos usuários veem suas telas vazias primeiro. Comece aqui para vê-las pelos olhos de outra pessoa: feedback privado e estruturado; 1 feedback = 1 crédito.