Tela de carregamento esqueleto: melhore a UX
Descubra como as telas de carregamento esqueleto podem melhorar a performance percebida e a experiência do usuário.
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:
Tipos de telas de carregamento esqueletoCom 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.
