DS MS.GOV V2.0.0

Diretrizes de design

Carregamento de conteúdos

Intro

Este documento detalha o padrão de carregamento de conteúdo, um comportamento geral para garantir uma experiência de usuário fluida e transparente durante a obtenção de informações dinâmicas na interface do Design System. Este padrão é aplicado em três níveis de complexidade, replicado em diversos contextos, para garantir consistência e eficiência.

Ilustração de comportamento de carregamento de uma página interno dos sites institucionais

Propósito do Padrão

O padrão de Carregamento de Conteúdo visa:

  • Fornecer uma experiência de usuário consistente e intuitiva quando o conteúdo está sendo carregado.
  • Minimizar a frustração do usuário, dando feedback visual claro sobre o estado do carregamento.
  • Padronizar o comportamento de carregamento em toda a aplicação, reforçando a identidade visual da marca.
  • Por padrão, o comportamento usa como componente base o Empty State para padronizar o design e comportamento esperado.

Níveis de Complexidade

Este padrão se manifesta em três níveis de complexidade, adaptados às necessidades de cada conteúdo:

Carregamento de páginas e seus conteúdos internos, isso garante que a página seja totalmente carregada com as informações essenciais para o usuário que está realizando o acesso, trazendo um feedback visual de que o conteúdo está sendo carregado. É bom ressaltar que, em ambientes onde o conteúdo é grande, se faz necessário esse tipo de padrão.

Carregamento dentro da página de resultado de busca ou pesquisa dentro dos sites, ele garante o feedback visual de que o site está pesquisando as informações para serem apresentadas.

Esse padrão é aplicado a pequenos contextos em que se exige uma reatividade ou carregamento de uma informação em partes específicas do site. No exemplo, temos a aplicação do padrão no componente de Table (Tabela) que é carregada ao realizar uma busca para filtrar as informações do mesmo.

Considerações de Design

  • Consistência: Garanta a consistência do padrão em toda a aplicação.
  • Acessibilidade: Certifique-se de que o indicador de carregamento seja acessível (ex: contraste adequado, descrição textual para leitores de tela).
  • Performance: Otimize o carregamento do conteúdo para minimizar o tempo de espera. Use técnicas de caching e lazy loading onde apropriado.

Observações: Este documento serve como referência para a implementação e manutenção do padrão de Carregamento de Conteúdo. A consistência e a clareza da experiência de carregamento são cruciais para a satisfação do usuário.