Padrões de navegação móvel: abas, menus laterais e fluxos aninhados

Comece com a estrutura, não com o componente

Liste os destinos do aplicativo e agrupe-os pelo modelo mental do usuário. Um destino como Pesquisa pode ficar ao lado de Casa como par; os detalhes de um item salvo pertencem abaixo de Salvo. Se as pessoas precisarem alternar frequentemente entre pares, mantenha essas escolhas visíveis. Se as pessoas geralmente passam de uma coleção para os detalhes de um item e depois retornam, uma pilha ou fluxo aninhado comunica esse relacionamento naturalmente.

Separe destinos de ações. Ações como compor, compartilhar, filtrar e ordenar modificam ou afetam o contexto atual; em geral, não são destinos dentro do aplicativo. Coloque-os em uma barra de ferramentas, menu ou controle contextual, em vez de transformar cada ação em um item de navegação principal.

• Cite os trabalhos que as pessoas realizam repetidamente e identifique quais áreas devem ser acessíveis de qualquer lugar.
• Desenhe relações entre níveis da hierarquia antes de escolher os controles de navegação.
• Mantenha os destinos no mesmo nível de hierarquia visualmente e comportamentalmente consistentes.

Compare os três padrões

Uma barra de guias ou barra de navegação torna alguns destinos de nível superior visíveis e alternáveis ​​rapidamente. Funciona quando os destinos são pares e cada rótulo é reconhecível sem explicação. Mantenha a área atual selecionada. Evite colocar ações não relacionadas na barra ou deixar destinos importantes desaparecerem.

Uma gaveta de navegação pode conter um conjunto maior e agrupado de destinos e, às vezes, troca de conta ou espaço de trabalho. Uma gaveta modal economiza espaço na tela, mas requer uma etapa extra de abrir e escolher e cobre temporariamente o conteúdo. Em telefones compactos, esse custo pode fazer com que destinos frequentes pareçam enterrados. A orientação atual do Android do Material 3 favorece uma barra de navegação para três a cinco destinos compactos e adapta a navegação para janelas maiores; As orientações mais antigas do Material que recomendam gavetas para cinco ou mais destinos não devem ser confundidas com um limite universal atual.

A navegação aninhada usa uma lista, um cartão ou um link para abrir uma visualização secundária, com um título e um botão de voltar que preservam o caminho. Adapta-se a categorias, configurações, detalhes do produto e tarefas passo a passo. O aninhamento profundo torna-se frustrante quando a hierarquia está oculta, quando o comportamento é inconsistente ou os usuários precisam voltar repetidamente para alcançar uma seção no mesmo nível. Adicione pesquisa, atalhos ou uma estrutura de nível superior mais clara quando as pessoas pulam frequentemente entre ramificações.

Escolha por frequência de tarefa e tamanho de tela

Pergunte com que frequência as pessoas alternam entre áreas durante uma sessão típica. Um conjunto compacto e estável de destinos de alta frequência favorece uma barra visível. Se a maior parte do uso for focada em uma tarefa ou na leitura de um detalhe, mantenha a navegação mais silenciosa e preserve espaço para o conteúdo. Uma gaveta pode funcionar para seções menos frequentes, mas verifique se as pessoas ainda conseguem encontrá-las e retornar sem adivinhar.

Planeje o tamanho da janela, a orientação e as convenções de plataforma. As atuais Diretrizes de Interface Humana da Apple descrevem a barra de guias do iPhone como navegação de nível superior e suportam uma apresentação adaptável da barra de guias/barra lateral no iPad. O Material 3 chama seu padrão compacto de barra de navegação e oferece diferentes formas de navegação conforme a largura disponível aumenta. Esses padrões compartilham um propósito, mas não são componentes idênticos; siga o posicionamento, comportamento e adaptação nativos em vez de copiar a aparência de uma plataforma para outra.

Torne a orientação e a recuperação confiáveis

Os ícones por si só tornam a navegação mais difícil de aprender e podem não ser claros para os usuários de leitores de tela. Dê aos destinos rótulos curtos e visíveis, exponha o estado selecionado semanticamente e garanta que os controles tenham nomes acessíveis e áreas de toque adequadas. Verifique o contraste nos estados selecionados e não selecionados, texto maior, localização e layouts da direita para a esquerda. Teste com VoiceOver ou TalkBack e com navegação por teclado ou switch, quando compatível; o foco deve se mover de forma previsível quando uma gaveta é aberta, um destino é escolhido ou uma visualização é descartada.

A recuperação faz parte da navegação. Mantenha o comportamento de Voltar e Fechar distinto: Voltar refaz uma hierarquia, enquanto Fechar sai de uma apresentação temporária ou modal. Preserve uma posição útil e os dados inseridos ao alternar entre áreas de nível superior ou retornar de uma tela de detalhes. Quando um destino estiver vazio ou temporariamente indisponível, mantenha seu lugar estável e explique o estado, em vez de remover ou desativar silenciosamente a navegação. Para uma tarefa destrutiva ou dispendiosa, deixe claro o caminho de retorno antes que o usuário se comprometa.

Uma auditoria prática de navegação

Percorra o aplicativo com uma tarefa real e repita com os recursos de acessibilidade ativados. Registre se as pessoas conseguem identificar a área atual, chegar a um destino frequente e se recuperar após um desvio. Compare a mesma viagem em um telefone compacto e em uma janela maior; um layout adaptativo deve preservar a arquitetura da informação à medida que o controle muda de forma.

Use a biblioteca de telas para comparar exemplos reais de seções e fluxos de aplicativos e, em seguida, avalie cada um em relação às tarefas do seu produto. O padrão mais forte mantém sua estrutura legível à medida que o aplicativo cresce e deixa claro o caminho de retorno após uma interrupção.

• Um novo usuário pode explicar as áreas de nível superior apenas com base em seus rótulos?
• Os destinos do mesmo nível são fáceis de alternar, com a seleção claramente indicada?
• As telas de detalhes mostram um título significativo e um caminho de retorno previsível?
• Abrir e fechar uma gaveta preserva o contexto e move o foco de acessibilidade de maneira sensata?
• Os rótulos, alvos, contraste e estados selecionados permanecem utilizáveis ​​com texto maior e tecnologia assistiva?
• Uma pessoa pode retornar sem perder a entrada do rascunho, a posição de rolagem ou um lugar útil na hierarquia?
• A estrutura se adapta a uma tela maior sem duplicar a navegação primária da concorrência?