Tableless

Busca Menu

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

Seja o primeiro a comentar por

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.

  • Multi Toggle
  • O bom e velho Right-To-Left
  • Pular a sub-navegação
  • Priority+
  • Off-Canvas Flyout
  • Carousel+

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

  • Escaneável – Os usuários podem rapidamente escanear as categorias principais, antes de tomar qualquer decisão em ir ao próximo nível.
  • Escalável – Seu menu tem 17 níveis? Esta solução pode lidar com isso facilmente (mas, por favor, não faça isso).

Contras

  • Não é tão atraente – Dar taps ao longo dos vários níveis não é a coisa mais elegante do mundo, mas acho que você poderia acabar dizendo a mesma coisa diante de qualquer solução de navegação multi-level.
  • Um possível JS é requerido – Digo “possível” pois a maioria desses estilos de interação usam JavaScript para fazer a coisa acontecer. No entanto, o brilhante Aaron Gustafson demonstrou que você pode realizar este efeito usando a pseudo-classe :target na regra CSS. Muito legal! Além disso, a necessidade de JavaScript não é necessariamente um contra. Apenas certifique-se que a navegação não será acessada por usuários sem suporte a esta linguagem.

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

  • Muito atraente – Não é sempre que um menu de navegação te surpreende, mas a navegação right-to-left sem dúvida é muito elegante;
  • Segue as convenções do mobile – A maioria das principais plataformas de smartphones tem algum padrão de animação right-to-left para potencializar sua experiência
  • Escalável – É bom para uma navegação com muitos níveis.

Contras

  • Complexo – Isto não é necessariamente um contra, mas este padrão tem – literalmente – um monte de peças móveis. Por isso, certifique-se de deixá-las todas acessíveis, garanta-se e teste no maior número de dispositivos possível;
  • Desempenho da animação – O desempenho varia bastante entre os diversos dispositivos e plataformas. Algumas plataformas mobile o animam muito bem, enquanto em outras é uma droga. Também esteja ciente de que algumas plataformas não suportam esta animação, e uma mudança repentina na navegação pode ser um choque ao usuário.

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

  • Evita ter que lidar com sub-navegações – Simplesmente levar o usuário a uma nova página elimina a dor de cabeça resultante de uma sub-navegação. Embora ele possa se sentir enganado, lembre-se que o tap é utilizado em dispositivos sem um estado hover. Assim, quando o usuário dá um tap em “clothing” e então é levado à página principal de roupas, ele já está atingindo o seu objetivo.
  • Simples – Links para outras páginas.

Contras

  • Requer a atualização de uma página inteira para acessar os itens de sub-navegação – Este é um grande contra. Ter que ir a uma outra página não é tão eficiente para uma navegação rápida.
  • Usuários de small screens ainda fazem download do conteúdo da sub-navegação – Também é um grande contra. É um caso clássico de usuários mobile fazer download de elementos que nunca irão usar. No entanto, não precisa ser assim. Sub-navegações, especialmente mega menus monstruosos, daqueles cheios de tranqueiras que ninguém nunca irá usar e… onde eu estava? Ah sim… eles podem (e devem) ser condicionalmente carregados para que usuários de small screens não tenham que baixar um conteúdo inútil.

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

  • Relativamente simples de implementar – A lógica requerida para executar esta técnica não é tão complicada. Basta um comando show/hide para revelar e esconder os itens de navegação.
  • Expõe as características mais acessadas (é o que a gente acredita) – Com isto, esperamos revelar três ou quatro itens que a maioria dos usuários acessam com frequência.

Contras

  • Oculta potencialmente importantes itens da navegação – o que você julga mais importante pode não ser a opinião do seu usuário. Enterrar itens de navegação significa ter que fazer suposições, e ao mesmo tempo que esperamos ser útil para a maior parte dos usuários, pode irritar a outros.
  • Não funciona muito bem com a navegação multi-level – O modelo priority+ parece bom para navegações que tem muitos itens num mesmo nível de hierarquia, mas infelizmente parece ainda não resolver o dilema da sub-navegação.

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

  • Relativamente atraente – Esta é certamente uma solução única e elegante para navegações mais complexas.
  • Funciona bem com touch screens – A capacidade de deslizar por um pequeno carrossel é uma interação muito legal, e é eficiente no sentido de conseguir ‘chegar aonde você quer’.

Contras

  • Não exibe todas as categorias – Assim como o modelo Priority+, o modelo Carousel+ requer uma interação antes de o usuário poder compreender todas as opções disponíveis.
  • Pesado em dispositivos non-touch – Ter um carrossel deslizante é ótimo, mas ainda existem muitos ambientes e dispositivos que não suportam eventos touch JavaScript. Para esses ambientes, o usuário terá que recorrer a setas que avançam uma categoria de cada vez, o que pode ser bem entendiante.
  • Não é recomendado para navegação multi-level – Este padrão funciona bem quando a sub-navegação tem apenas um nível. Mas, não é escalável além disso.
  • Questões de proximidade entre a navegação principal e a sub-navegação – A distância entre os itens do primeiro nível da navegação e da sub-navegação é muito pequena. Não fica muito legal. Sei lá, talvez seja só pra mim.

Na web

  • Site mobile da Intel – Sim, sei que não é responsivo, mas não significa que este padrão não possa ser usado em um ambiente responsivo1.

ADIANTE!

Não importa o que você faça, ajustar uma navegação complexa e multi-level para small screens é algo difícil. Lembre-se de priorizar a busca, e de subtrair o que for possível antes de embarcar na implementação de uma navegação complexa. Essa coleção de padrões de navegação não está tão abrangente, por isso fique a vontade para sugerir outras soluções interessantes que você já viu.

1 – Nota do tradutor: O site da Intel agora é responsivo, e utiliza um outro padrão de menu. Mantive este link apenas para ser fiel a tradução. Vocês podem observar este padrão de menu pela imagem que abre a seção Carousel+. voltar ao texto

Artigo traduzido com autorização de Brad Frost.

Artigo original escrito por Brad Frost.

Acesse o artigo original em Brad Frost Web – “Complex Navigation Pattern for Responsive Design” – 27 de agosto de 2012.

 

Publicado no dia