Os estados que toda tela precisa considerar
O caminho feliz é só uma parte da experiência. Planeje vazio, espera, falha, sucesso e recuperação.
Uma tela não é um único desenho. Ela muda com o volume de dados, a conexão, as permissões e as ações da pessoa. Planejar essas condições evita que uma interface bonita se torne confusa quando a situação real diverge do exemplo.
| Estado | O que comunicar | Ação possível |
|---|---|---|
| Inicial | O que existe aqui e por onde começar. | Iniciar a tarefa. |
| Vazio | Por que não há conteúdo. | Criar item, remover filtro ou voltar. |
| Carregando | O que está sendo preparado. | Esperar, cancelar ou continuar em outra área. |
| Erro | O que falhou e o impacto sobre a tarefa. | Corrigir, tentar de novo ou buscar ajuda. |
| Sucesso | O que foi concluído de fato. | Consultar o resultado ou seguir adiante. |
Vazio tem mais de uma causa
Uma pessoa nova pode não ter criado nenhum projeto. Uma busca pode não encontrar correspondências. Um filtro pode esconder todos os registros. Uma permissão pode impedir a consulta. Não use a mesma mensagem para situações que pedem decisões diferentes.
O tempo também é informação
Uma operação curta pode usar um spinner. Um skeleton ajuda quando a estrutura é conhecida. Uma tarefa mensurável pode mostrar progresso real. Nenhuma dessas escolhas deve criar uma falsa impressão de conclusão.
Preserve o trabalho
Uma falha não deve apagar o texto preenchido. Ao tentar novamente, evite criar o mesmo registro duas vezes. Se não houver certeza do resultado, comunique a incerteza e permita reconciliar o estado.
Para aprofundar: referência oficial ↗. Os exemplos e as explicações desta página são conteúdo editorial da Biblioteca UI.
Encontrar um componente →