Telas de esqueleto: quando usá-las em vez de spinners

O que é uma tela esqueleto

Nielsen Norman Group define uma tela de esqueleto como um espaço reservado para uma página de carregamento que imita o layout com um visual semelhante a um wireframe. É usado para carregamento de página inteira e reduz o tempo de carregamento percebido, pois as pessoas veem a estrutura do que está por vir em vez de uma área vazia.

Quando usar qual

Combine o indicador com o conteúdo e espere:

• Esqueleto: carrega páginas ou listas onde o layout é conhecido, como feeds, cartões e perfis.
• Spinner: pequenas áreas, botões ou conteúdo cuja forma você não pode prever.
• Barra de progresso: tarefas longas que você pode medir, como uploads e exportações.
• Nada: respostas muito rápidas, onde um indicador apenas piscava.

Projetando um bom esqueleto

Use as dimensões reais do componente para que a página não mude quando o conteúdo chegar, o que também protege sua pontuação Cumulative Layout Shift. Mantenha as formas simples (blocos para imagens, barras para texto), use tons de cinza de baixo contraste e substitua cada espaço reservado por conteúdo real assim que estiver pronto, em vez de esperar por tudo.

Animando esqueletos

NN/g observa que alguns esqueletos incluem uma animação pulsante ou cintilante para sinalizar que o sistema ainda está funcionando. Mantenha-o lento e sutil, anime a opacidade ou uma transformação em vez das propriedades de layout e interrompa-o quando o movimento reduzido estiver ativado. Dê à região de carregamento um rótulo acessível, como "Carregando resultados".