O que é?
Navegação é um conjunto de padrões usados em um site para que a pessoa usuária interaja com a aplicação, como alternar entre as páginas do site, ver conteúdos desejados, acionar funcionalidades, permitir que se localize no sistema e consiga transitar entre diferentes estados da tarefa que está realizando.
Tipos de navegação
Navbar
Navbar é um componente utilizado para comportar a marca ou nome do site, a navegação principal, informações de usuário e menu de acesso rápido (funções transversais), como ajuda e notificações.
Essa área também é responsável por apresentar o logotipo ou nome do site.
O logotipo deve levar o usuário para o Painel inicial do site.
Menu Global
A Navbar é o componente responsável pela navegação global (primária) de um site e através dela, é possível acessar diferentes funcionalidades, chegando em outros produtos disponíveis, mas ainda dentro do contexto da plataforma
Esse menu é global, sempre disponível para o usuário que estiver no site e deve ser enxuto e objetivo, trazendo apenas itens que direcionem para um caso de uso chave relevante para o cliente, que faça parta da proposta de valor da plataforma.
Exemplos de itens para esse menu são:
- Painel inicial
- Enviar mensagem
- Chatbots
- Gerenciar atendimento
- Ver relatórios
O logotipo deve levar o usuário para o Painel inicial do site.
Menu de Apoio
Disposto ao lado direito da Navbar, o Menu de Apoio direciona para funcionalidades transversais da plataforma, ou seja, àquelas que podem ser acessadas de vários outras funcionalidades mas que não fazem parte do fluxo normal para cumprimento de uma tarefa pelo usuário, como criar um chatbot ou enviar uma mensagem.
As principais saídas que um Menu de Apoio pode compreender são:
- Documentação
- Notificações da plataforma
- Soluções que ele pode precisar a qualquer momento
Perfil do Usuário
O Perfil do Usuário pode ser um link para as informações da pessoa que está autenticada no site ou dispor de um menu de ações relevantes para ele.
Alguns itens contidos no menu podem ser:
- Informações do plano e upgrade
- Atualização de dados do perfil
- Troca de contexto
- Configurações
- Sair do site
Troca de Contexto
O contexto é uma forma do usuário alternar sub contas ou diferentes organizações, se houverem, usando apenas uma forma de acesso à plataforma.
A troca deve ser rápida e simples, retornando sempre para a página inicial do site.
Menu Lateral
O Menu Lateral é um componente de navegação que apresenta uma lista de ações no contexto que o usuário está (normalmente vindo de uma navegação global). Em outras palavras, se trata do menu utilizado para uma ferramenta ou canal específicos. Dispõe na lateral esquerda da tela o acesso a funções mais granulares e específicas dentro do tema em questão. Ele pode conter quantas opções forem necessárias, além de rolagem vertical, se preciso.
Quando usar
- Apresentar um menu de itens agrupados no contexto das ferramentas
- Lista de ações (funcionalidades) de uma ferramenta
- Exibir lista de itens do contexto dentro de uma página
- Não use para ações que transpassem a ferramenta, como opções de conta CPaaS ou ir para outra ferramenta. Para isso, use o Menu Global (mega menu), o Menu de Apoio ou o Menu do Usuário, dependendo da opção.
Como usar
O Menu Lateral possui 2 níveis e deve ser usado para permitir que as pessoas usuárias naveguem em projetos, espaços e repositórios correlacionados.
Se for necessário um terceiro nível no Menu Lateral, verifique a possibilidade do uso de Tabs para o último nível ou entre em contato com o time de DesignOps.
Nível 1: categorias e itens do menu
Nível 2: subitens do menu
Nível 3: tabs
Breadcrumb
Breadcrumbs ajudam a pessoa usuária a identificar onde ela se encontra em páginas web que possuam hierarquia. Indicam o caminho que ela percorreu em uma jornada, e permite que volte para o começo ou para uma etapa anterior.
Quando usar
- Não é indicado aplicar em para sites que não possuam páginas e funcionalidades desvinculadas de um grupo superior.
- Não utilize o breadcrumb como navegação principal ou até ter itens que não estão relacionados entre si hierarquicamente.
Como usar
Breadcrumbs são sempre apresentadas na parte superior de uma página, acima do conteúdo principal (inclusive título) e abaixo de uma navegação primária, se houver. Devem ser usadas em sites com muitos níveis de conteúdo.