Intro
O Header é a camada superior padronizada dos portais e sites do Governo do Estado de Mato Grosso do Sul. Seu propósito é garantir identificação institucional imediata, organizar o acesso a serviços e informações e promover consistência visual e funcional entre secretarias e órgãos. O Header deve ser flexível para acomodar variações contextuais (institucional, serviços digitais, portais temáticos), mantendo critérios de acessibilidade, legibilidade e hierarquia de informação que facilitem a jornada do cidadão.
Anatomia da estrutura do Header
| # | Explicação |
|---|---|
| 1 | Área destinada a links e material de acessibilidade dos sites e serviços. |
| 1.1 | A Área de Acessibilidade é a faixa superior do Header destinada a oferecer atalhos rápidos e materiais de suporte para usuários com necessidades especiais. Deve ser visível, previsível e consistente entre todos os sites do Estado, permitindo que qualquer pessoa alcance recursos essenciais (pular para conteúdo, navegação, busca; ajustes de leitura; plugins de Libras). |
| 1.2 | Links úteis e atalhos para Ouvidoria e transparência do governo. |
| 2 | A faixa azul tem como objetivo imprimir a identidade do governo do estado e áreas para links destinados à rede social do governo do estado. |
| 2.1 | Área destinada a padronizar a identificação do brasão, logotipo, sigla das secretarias e seu nome por extenso. E possíveis variações para subsecretarias também. |
| 2.2 | Área destinada a agrupar os principais links para redes sociais onde o usuário tem fácil acesso. |
| 3 | Área destinada a menus e campo de busca pelos sites. |
| 3.1 | Mais conhecido como menu, ele padroniza suas categorias e conteúdos por assuntos para que o usuário possa localizá-los com maior facilidade. |
| 3.2 | Área de busca padronizada entre os sites. O mesmo, ao ser acionado e ter interação com o usuário, é levado para uma página específica onde são demonstrados os resultados. |
Visão da estrutura mobile
Comparação rápida das variações do Header
Variação do Header portal do Governo do Estado
Variação do Header aplicado para Secretarias e órgãos
Variação do Header aplicado para Subsecretarias
Para variações de Secretaria e Subsecretaria, a faixa azul deve priorizar informações institucionais específicas do órgão. Para evitar confusão entre identidades (órgão vs Governo do Estado), os ícones de redes sociais do Governo do Estado devem ser reposicionados para uma faixa branca superior imediatamente acima do Header, identificada com o rótulo Siga MS.GOV. Esse padrão garante clareza de autoria e mantém a faixa azul livre para comunicações próprias do órgão.
O que não deve ser feito
Para ilustrar, apresentamos alguns exemplos de variações que não são recomendadas para aplicação. Essas práticas comprometem a legibilidade e a experiência do usuário, tornando a navegação menos eficiente.
No exemplo analisado, a sigla da secretaria foi aplicada diretamente na faixa inferior, em conjunto com o menu de navegação. Essa solução, porém, gera um problema de legibilidade: as informações ficam comprimidas e dificultam a leitura rápida. Para o usuário que está escaneando a página em busca de um item no menu, essa sobreposição compromete a clareza e torna a experiência menos eficiente.