Em um sistema com vários produtos, muitas unidades e dezenas de telas, a pessoa precisa saber três coisas em qualquer momento: onde está, o que pode fazer aqui e como chegar a outro lugar. Navegação boa é a que não exige pensar: o operador em plena doca, com pressa, encontra o que precisa sempre no mesmo lugar.
Regra de ouro: cada tipo de navegação tem um lugar e um componente. Não misture (páginas de módulos diferentes no mesmo submenu, ação no lugar de destino, produto dentro do menu do módulo).
Da fronteira mais ampla até o detalhe:
Produto (AppLauncher) → Contexto (unidade) → Módulo (menu, nível 1) → Página (menu, nível 2) → Aba → Seção
Deve limitar o menu a dois níveis (módulo e página). O Dropdown também não passa de dois níveis (menu e submenu).
Se você sente falta de um terceiro nível, o problema quase sempre é a estrutura da informação, não o menu. Não aninhe mais. Reagrupe páginas, use Tabs ou separe em outro módulo.
Breadcrumb entra em páginas com 3 ou mais níveis de profundidade (Início > Cadastros > Veículos). Em estrutura plana, não use.
Fica no topo do menu, mostrando o nome da unidade ativa. Rótulo: Unidade de Negócio.
Um único lugar para trocar. O perfil na topbar pode mostrar a unidade (Unidade: Matriz), mas não trocá-la. Dois seletores para a mesma coisa confundem.
Trocar o contexto recarrega dados, permissões e módulos. Avise que a tela vai atualizar quando houver dado não salvo.
Nível 1 = módulo, com ícone e maior peso visual. Nível 2 = páginas, menores e recuados. Rótulos em caixa de título, curtos: Dashboard, não “Ver o Dashboard de indicadores”.
Nunca misture páginas de módulos diferentes sob o mesmo pai.
Item ativo sempre destacado (fundo claro na cor primária). Um módulo com página ativa abre sozinho.
Módulo com filhos mostra o indicador de expandir. Sem filhos, é um item direto.
Navegação utilitária (Automação, Preferências, Integrações, Cadastros gerais) fica ancorada na base, separada dos módulos operacionais.
Notificação em item: o mdsMenuItem tem um marcador (notify). [Proposta] Use só o marcador no menu; o detalhe fica na página.
Três modos:
| Modo | Quando | Regra |
| — | — | — |
| Estático expandido (256 px) | Telas grandes | Ícone e rótulo |
| Estático compacto (64 px) | Ganhar área de trabalho | Só ícones, com Tooltip em cada um |
| Flutuante | Mobile e telas reduzidas | Sobrepõe o conteúdo, com logo e botão de fechar |
Esquerda: marca e nome do produto ativo (Torre de Controle), em caixa de título.
Pesquisa global por cargas, veículos e motoristas, em todo o sistema.
Utilitários: notificações, ajuda, seletor de produtos e perfil. [Proposta] Fixar a ordem (do mais frequente ao menos frequente) para que fiquem sempre no mesmo lugar em todos os produtos.
Deve ficar fixa e visível em todas as telas. Botão só de ícone sempre com Tooltip (Notificações).
O controle do menu (expandir e compactar) mora aqui.
Nome do produto em caixa de título (TMS), descrição em caixa de sentença (Gestão de transporte), ícone distintivo e seta indicando que leva a outro contexto.
[Proposta] Produto não contratado aparece separado e explica como obter, em vez de simplesmente sumir ou parecer quebrado.
Filtro de contexto por período (semana ou mês) que atualiza a página. Dias com vaga em azul, sem vaga em cinza. Tooltip: Sem disponibilidade.
Exceção ao Estilo de escrita: no cabeçalho e nos dias da semana, o componente usa abreviações em caixa alta e mês abreviado (08/AGO – 14/AGO, DOM, SEG, TER) por falta de espaço. É a única exceção prevista à regra de não digitar em maiúsculas e ao formato dd/mm/aaaa.
Uma ação principal por tela. Ela é o único botão de destaque e vem junto ao título. As demais são secundárias ou ficam em Mais opções.
A ordem de leitura segue a importância: o que é mais crítico vem primeiro, à esquerda e no topo (a aba mais importante à esquerda; as ações frequentes no topo do menu de ações).
Um título, muitos subtítulos. A página tem um título (PageHeader); as seções têm SectionHeader em tamanhos que refletem a profundidade. Não pule níveis.
Peso visual proporcional à importância: módulo (nível 1) maior que página (nível 2); seção mestra maior que subseção.
Ícones ajudam, mas não substituem texto em navegação principal. Ícone sozinho só em modo compacto, sempre com Tooltip.
Onde estou? O item de menu ativo, a aba ativa e o último item do breadcrumb dizem a mesma coisa. Os três devem concordar.
URL é o estado: módulo, página e aba refletem na URL, para poder compartilhar o link e voltar com o botão do navegador [Proposta].
Item sem permissão: módulos e páginas que a pessoa não pode acessar não aparecem no menu [Proposta]. Só aparece desabilitado, com o motivo, quando a pessoa precisa saber que o recurso existe.
Carregando a próxima página: mantenha o menu e o cabeçalho no lugar; o que carrega é a área de conteúdo (veja Estados da interface).
O que encontrei ao comparar o Notion, o código e as diretrizes já escritas:
#
Ponto
Onde
Sugestão
1
As páginas PageHeader e SectionHeader estão com o conteúdo trocado no Notion. A página “PageHeader” descreve o SectionHeader e vice-versa. O código e as stories do Angular já tratam disso
Notion
Trocar o conteúdo entre as páginas e conferir qual frame do Figma pertence a cada uma
2
Menu/Sidebar lista mds-float-panel como componente Angular, mas no código é mds-menu + mdsMenuItem + mds-menu-item-group
Notion (Menu Lateral / Sidebar)
Corrigir o nome no Notion
3
A unidade ativa aparece em dois lugares (mds-menu-business troca; mds-menu-user mostra empresa/unidade)
Menu e topbar
Manter a troca em um lugar só e o outro apenas como leitura
4
Nomes de módulo misturam idiomas (Planejamento, Dock Scheduling, Crossdocking, Tracking, Acordos) e o mesmo assunto tem nome diferente dentro do módulo (Agendamentos, Gestão de pátio)
Notion (Menu)
Decidir no glossário quais são nomes próprios de produto (podem ficar em inglês) e quais são termos do domínio (português)
5
“Buscar” versus “Pesquisar”: o PageHeader usa Buscar por código, enquanto o botão padrão é Pesquisar
Notion (PageHeader)
Padronizar em Pesquisar por código
6
A tabela “Anatomia e Escrita” do Menu traz nomes de documentação (“Menu Principal”, “Navegação Local”) na coluna “Sugestão UX Writing”, o que dá a entender que são textos de tela
Notion (Menu)
Renomear a coluna para “Nome na documentação” e deixar claro que não é texto da interface
7
Reticências do Breadcrumb aparecem como três pontos (“…”)
Notion (Breadcrumb)
Usar o caractere único …
8
O modo compacto das Tabs oculta o rótulo por padrão (hideLabelMobile ligado)
Angular (nav[mdsNavTabs])
Confirmar o que acontece com abas sem ícone em telas pequenas: sem ícone e sem rótulo, a aba some. Abas sem ícone precisam de [hideLabelMobile]="false"
9
Dropdown sem link de Figma e sem story no mds-styles
Notion
Adicionar o link do frame
10
A exceção do DateNavigator (caixa alta e “08/AGO”) contraria as regras gerais
Notion (DateNavigator)
Documentar como exceção, como feito acima, ou aproximar do formato padrão
