• Ed. Salvador Trade Center
  • (71) 4042-1341​⁠​
  • (71) 98798-2767​⁠​

Padrões Complexos de Navegação no Design Responsivo

A pergunta que mais recebo desde que postei meu artigo sobre Modelos responsivos de navegação é: Como lidar com uma navegação complexa no design responsivo?

Ótima pergunta, mas antes de entrar nos pormenores, eu vos peço: Use o celular como uma desculpa para revisitar sua navegação. Observe suas análises. Quais os pontos chave da sua experiência? Onde as pessoas passam a maior parte do tempo? Você realmente precisa da sua “política de privacidade” na navegação principal? Tenha foco. Aproveite a falta de espaço da tela para retirar todo o besteirol político do site etc, e elimine todo o conteúdo inútil. Seus usuários agradecerão.

Mais uma coisa: Se você tem zilhões de seções e páginas, priorize a busca. Um formulário de busca é uma maneira eficaz de levar os usuários onde eles desejam ir, sem ter que percorrer vários níveis na navegação.

Ok, agora que definimos algumas coisas, é hora da verdade. Às vezes não é muito prático reduzir suas milhares de páginas em três pequenos e ordenados links que se ajustem a tela de um dispositivo mobile. Muitas vezes você é um grande varejista, ou uma universidade com um enorme conteúdo para um grande público alvo. Às vezes o cliente que anuncia no seu site vai, literalmente, te engolir por remover o seu link da navegação.

Enfim, às vezes você só precisa de uma navegação mais complexa. O que você vai fazer? Bem, aí vão alguns padrões para lidarmos com navegações complexas, longas e multi-level.

O MULTI-TOGGLE

Navegação multi-toggle do site do Barack Obama

O menu multi-toggle é basicamente um acordeão encaixado. Basta dar um tap na categoria para revelar sub-categorias ocultas. Uma vez que a tela tenha largura suficiente, é convertida num menu suspenso dropdown multi-level, como já estamos acostumados a ver.

Dica rápida: Use os ícones + ou ▼ para deixar o usuário saber que há mais conteúdo.

Prós

Contras

Recursos

Na web

O redesign do site do Barack Obama em conjunto com o padrão footer anchor.

O BOM E VELHO RIGHT-TO-LEFT

Sony

Em vez de itens de sub-navegação aparecendo por baixo da categoria, como no multi-toggle, o nível seguinte da navegação fica à direita (fora da tela) e é animado quando requisitado.

Prós

Contras

Na web

PULAR A SUB-NAVEGAÇÃO

World Wildlife Fund Navigation

A sub-navegação normalmente inclui itens que também são inclusos na página principal da categoria. Pelo fato do conteúdo ser acessível desta página, é perfeitamente viável simplesmente levar os usuários de small screens direto à página principal e deixá-lo tomar sua próxima decisão de lá.

Prós

Contras

Recursos

Na web

PRIORITY+

Padrão Priority+

O padrão Priority+ foi cunhado por Michael Scharnagl (@justmarkup) para descrever uma navegação que exibe os elementos considerados “mais importantes” na navegação, ocultando os itens menos relevantes por trás de um link “more”. Esses itens somente são revelados quando o usuário clicar neste link.

Prós

Contras

Recursos

Navegação Responsiva Multi Level – Vamos tentar!

Priority+ Demo

Na web

William and Mary

As section pages do site mobile do USA Today não seguem exatamente esta proposta, mas exibem as categorias mais importantes por padrão, e uma seta revela os itens de navegação restantes. Bastante atrativo.

OFF-CANVAS FLYOUT

nav-obama

O menu off-canvas flyout revela uma coluna de navegação. Os itens do sub-menu podem ser tantos quanto o comprimento da própria página, por isso há espaço de sobra para uma longa e/ou complexa navegação. Como já escrevi sobre o modelo flyout left antes, vou poupá-los da análise de prós e contras. Em vez disso, estou disponibilizando uma lista de referências para modelos off-canvas.

Recursos para off-canvas

Na web

CAROUSEL+

Carousel+ Pattern

Este é o menu da moda. O padrão Carousel+ é um carrossel contendo uma categoria principal com opções de sub-navegação exibidas na parte inferior. O usuário pode deslizar horizontalmente pelas opções de navegação ou usar as setas (direita/esquerda) para mover-se pelo carrosel.

Prós

Contras

Na web

Fonte: Tableless

Posts Relacionados