𝗗𝗼𝗻'𝘁 𝗨𝘀𝗲 𝗢𝗻𝗲 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 𝗘𝗺𝗽𝘁𝘆 𝗦𝘁𝗮𝘁𝗲 𝗙𝗼𝗿 𝗬𝗼𝘂𝗿 𝗗𝗮𝘁𝗮 𝗧𝗮𝗯𝗹𝗲𝘀
A maioria das tabelas de dados é entregue com uma única mensagem: "Sem dados."
Parece aceitável em uma revisão de design. Cria tickets de suporte em produção.
Uma tabela vazia significa três coisas diferentes. Cada caso precisa de um design específico, um texto específico e uma ação específica.
Aqui estão os três casos que você deve projetar separadamente:
Primeiro uso (Ainda não existem dados) O usuário é novo. Ele quer saber o que esta tabela faz e como começar. • O objetivo: Fazer o onboarding do usuário. • O texto: Explicar o propósito da tabela. • A ação: Fornecer um botão para criar o primeiro item ou importar dados. • Evite: Uma mensagem sem saída como "Sem dados."
Filtro vazio (Os dados existem, mas os filtros os ocultam) O usuário aplicou filtros que retornam zero resultados. Frequentemente, ele pensa que a ferramenta está com erro. • O objetivo: Ajudar o usuário a encontrar seus dados. • O texto: Declarar explicitamente quais filtros estão ativos. • A ação: Fornecer um botão para limpar todos os filtros ou editá-los. • Evite: Uma mensagem genérica que ignore os filtros ativos.
Falha de carregamento (A requisição falhou) O servidor retornou um erro ou a rede caiu. • O objetivo: Ajudar o usuário a se recuperar. • O texto: Explicar que o carregamento falhou e mostrar um timestamp ou código de erro. • A ação: Fornecer um botão de tentar novamente. • Evite: Dizer ao usuário "Sem dados" quando o problema é, na verdade, um erro técnico.
Por que as equipes falham nisso:
- Elas projetam estados vazios tarde demais no processo.
- Elas testam apenas com dados de demonstração, então nunca veem o estado vazio.
- Elas tratam estados vazios como casos de borda.
Na realidade, estados vazios são momentos de alto impacto. Um bom estado vazio leva o usuário do zero ao valor em minutos. Um ruim o deixa confuso e frustrado.
Construa seu componente de tabela para lidar com essas condições separadamente. Custa pouco projetá-los agora, mas economiza enormes quantidades de tempo de suporte mais tarde.