#Patterns de Navegação
Neste segundo artigo da série sobre UI Design Patterns, vamos explorar os padrões de design de interface relacionados à navegação. A navegação é um aspecto fundamental de qualquer interface, pois permite aos usuários se moverem pelo sistema e acessarem as diferentes funcionalidades e conteúdos disponíveis.
Uma navegação bem projetada pode melhorar significativamente a experiência do usuário, tornando o sistema mais fácil de usar e mais eficiente. Por outro lado, uma navegação mal projetada pode causar frustração e dificultar a utilização do sistema.
#Menu de Navegação
Um menu que permite aos usuários acessar diferentes seções do site ou aplicativo. Pode ser horizontal, vertical, ou em formato de hambúrguer.
-
Quando usar: Sites com várias seções ou páginas.
-
Exemplo: Um menu de navegação horizontal no topo da página.
Menu de navegação horizontal no topo da página do site da Nike. Fonte: Nike
#Breadcrumbs
Uma trilha de navegação que mostra a hierarquia das páginas e permite aos usuários voltar para níveis anteriores.
-
Quando usar: Sites com estrutura hierárquica profunda.
-
Exemplo: Breadcrumbs no topo da página de um site de comércio eletrônico.
Breadcrumbs no topo da página de detalhes do produto no site da Amazon. Fonte: Amazon Brasil
#Tabs
Abas que permitem aos usuários alternar entre diferentes seções de conteúdo sem sair da página.
-
Quando usar: Para organizar conteúdo relacionado em uma única página.
-
Exemplo: Tabs para alternar entre detalhes do produto, avaliações e perguntas frequentes em um site de comércio eletrônico.
Tabs para alternar entre categorias de pedidos na página de histórico de compras do site da Amazon. Fonte: Amazon Brasil
#Sidebar/Drawer
Um painel lateral que pode ser fixo ou deslizante, usado para navegação ou para exibir informações adicionais.
-
Quando usar: Aplicativos móveis ou sites com muitas opções de navegação.
-
Exemplo: Drawer de navegação em um aplicativo móvel.
Drawer de navegação em um aplicativo móvel seguindo as diretrizes do Material Design 3. Fonte: Material Design 3
#Bottom Navigation
Uma barra de navegação fixa na parte inferior da tela, comum em aplicativos móveis.
-
Quando usar: Aplicativos móveis com poucas opções de navegação (4-5).
-
Exemplo: Barra de navegação inferior em um aplicativo móvel.
Barra de navegação inferior do aplicativo móvel da Amazon. Fonte: Amazon Brasil
#Back-to-Top Button
Um botão que permite aos usuários voltar rapidamente ao topo da página.
-
Quando usar: Páginas longas com muito conteúdo.
-
Exemplo: Botão de voltar ao topo em um site de notícias, blog ou institucional.
Botão de voltar ao topo no site do Governo Federal. Fonte: Governo Federal