Uma tela de carregamento esqueleto é uma técnica popular de design de interface que indica o estado de carregamento imitando a estrutura final da interface com marcadores visuais animados. Diferente de animações de pré-carregamento e barras de progresso, as telas esqueleto melhoram a performance percebida pois os usuários conseguem visualizar como os segmentos de dados aparecerão na tela, mesmo que ainda não estejam carregados.

Neste artigo, aprenderemos a técnica de tela de carregamento esqueleto, como ela difere de animações de pré-carregamento (por exemplo, spinners) e barras de progresso, com exemplos de produtos de software populares e melhores práticas para o uso de telas esqueleto em suas interfaces de usuário de produtos de software.

O que é uma tela esqueleto?

Uma tela esqueleto é uma técnica de design para web e aplicativos que aborda o desafio de tempos de carregamento de página aumentados. Em vez de exibir uma tela em branco ou usar uma animação de carregamento tradicional, uma tela esqueleto mostra aos usuários um contorno ou wireframe do layout e estrutura da página enquanto o conteúdo real ainda está sendo carregado em segundo plano.

Conforme o conteúdo é carregado, os marcadores na tela esqueleto serão atualizados com a interface real até que a página inteira esteja carregada.

Por exemplo, veja como o site da Airbnb revela perfeitamente o conteúdo real a partir da tela esqueleto:

O site do Airbnb implementa um carregador esqueleto para cada elemento dinâmico na tela inicial.

Essa técnica oferece aos usuários uma experiência mais envolvente do que enfrentar um spinner de carregamento ou uma tela em branco. Nossos períodos de atenção são mais curtos do que nunca, e as telas esqueleto servem para mantê-los. O esqueleto ou estrutura da página dá aos usuários uma ideia de como a página ficará enquanto ela carrega.

Considerando os prós e lidando com os contras

Usar telas de carregamento esqueleto traz os seguintes benefícios para seu produto de software:

• Melhora a performance percebida, pois os usuários podem ver instantaneamente como os dados serão carregados antes mesmo de carregar o conteúdo real
• Cria um estado de carregamento mais envolvente do que animações de carregamento tradicionais, já que os marcadores esqueleto animados apresentam o estado de carregamento ao construir a estrutura original da tela
• Transição perfeita para o estado carregado a partir do estado inicial de carregamento

As telas de carregamento esqueleto apresentam alguns desafios, mas os designers podem facilmente superá-los:

• O aumento do tempo de design e desenvolvimento, pois designers e desenvolvedores devem criar marcadores adequados para cada segmento de interface do usuário, mas eles podem economizar tempo usando efetivamente recursos de ferramentas de prototipagem e integrando bibliotecas de carregamento esqueleto
• A complexidade nas telas de carregamento esqueleto afeta negativamente a UX, mas os designers podem simplificar usando um único marcador para um grupo de elementos, por exemplo, usando uma caixa de marcador única para um componente de gráfico

Tipos de telas de carregamento esqueleto

Com base no comportamento e design, podemos identificar três tipos de telas de carregamento esqueleto que você pode usar em seus designs de interface de usuário, de acordo com suas preferências de design:

Carregadores esqueleto estáticos

Esta é a forma mais simples da tela de carregamento esqueleto, pois sempre renderiza um wireframe estático da interface do usuário final com marcadores visuais estáticos:

Exibir um marcador estático por um tempo prolongado pode afetar o humor do usuário, que pode assumir que a interface do usuário do produto está quebrada, então essa abordagem é adequada para cenários de carregamento de conteúdo que não se estendem por mais de um segundo.

O YouTube mobile, por exemplo, usa um carregador esqueleto estático para miniaturas de vídeo.

Carregadores esqueleto animados

Esses carregadores esqueleto reproduzem uma animação em vez de apenas renderizar um conjunto de marcadores estáticos. A maioria dos designers escolhe carregadores esqueleto animados, pois eles indicam o estado de carregamento eficazmente e mantêm o usuário envolvido, mesmo se o tempo de carregamento se estender por mais de um segundo.

Aqui estão as animações comuns usadas em carregadores esqueleto:

• Efeito de onda:

• Efeito pulsante:

Além desses efeitos, alguns designers usam efeitos de brilho, efeitos de flash e animações de ficção científica com suas habilidades criativas de design.

Conclusão

Se você está procurando aumentar o engajamento do usuário durante os tempos de carregamento em seu site ou aplicativo, considere implementar uma tela esqueleto. Elas oferecem uma maneira dinâmica de exibir a estrutura e o layout de uma página enquanto ela carrega, permitindo que os usuários antecipem a localização e a organização do conteúdo na página. Isso também cria a sensação de progresso percebido e velocidade para o usuário, tornando o tempo de espera menos doloroso do que um pré-carregador ou barra de progresso.

Ao seguir as melhores práticas como manter a consistência do layout e incorporar efeitos de movimento para indicar que a página não está travada, as telas de carregamento esqueleto podem ser usadas mesmo para componentes baseados em contêiner visualmente complexos, usando marcadores apenas para elementos estruturais primários, excluindo outros elementos menores como rótulos, botões, campos de formulário, etc.