Estado Vazio vs. Esqueleto
Um estado vazio significa que não há conteúdo. Um esqueleto significa que o conteúdo ainda está carregando e seu formato é conhecido.
Use um estado vazio para explicar por que nada está lá e o que fazer a seguir. Use um esqueleto para um carregamento rápido quando você souber o layout.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Estado Vazio, Erro & Sucesso — Pacote de Aprendizagem
Este pacote de aprendizado cobre três estados diferentes de aplicativo. Vazio significa que ainda não há conteúdo. Erro significa que algo falhou. Sucesso confirma a conclusão. Cada um precisa de sua própria mensagem e próximo passo. O pacote não é um termo de estado padrão.
Save a guide to keep the patterns your team uses most within reach.
Uma nova lista de projetos explica como criar o primeiro item. Se a internet falhar, o botão de Tentar de novo aparece e os filtros continuam salvos.
- Use-o quando
- Use este guia como uma lista de verificação. Desenhe cada estado para cada visualização que dependa de dados.
- Não o use quando
- Nunca deixe uma tela em branco ou um impasse. Explique falhas e confirme o sucesso.
- Nome usado no código
status state machine
Esqueleto
Um skeleton é um espaço simples no formato do conteúdo que ainda está carregando.
Uma página de perfil guarda espaço para a foto e o texto. O layout fica parado quando os dados chegam.
- Use-o quando
- Use-o quando o layout for conhecido e a espera for fácil de perceber.
- Não o use quando
- Nunca invente detalhes falsos, brilhe para sempre ou use um esqueleto quando o conteúdo aparecer quase imediatamente.
- Nome usado no código
aria-busy="true"
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| Estado Vazio, Erro & Sucesso — Pacote de AprendizagemEmpty, Error & Success State — Learning Bundle | Use este guia como uma lista de verificação. Desenhe cada estado para cada visualização que dependa de dados. | Nunca deixe uma tela em branco ou um impasse. Explique falhas e confirme o sucesso. | status state machine |
| EsqueletoSkeleton | Use-o quando o layout for conhecido e a espera for fácil de perceber. | Nunca invente detalhes falsos, brilhe para sempre ou use um esqueleto quando o conteúdo aparecer quase imediatamente. | aria-busy="true" |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Estado Vazio, Erro & Sucesso — Pacote de Aprendizagem (Empty, Error & Success State — Learning Bundle), Esqueleto (Skeleton) para o nosso fluxo real de usuário. Use esta regra: Um estado vazio significa que não há conteúdo. Um esqueleto significa que o conteúdo ainda está carregando e seu formato é conhecido. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.