05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Padres Complexos de Navegao no Design

Responsivo
5 comentrios
por Will Sales

A pergunta que mais recebo desde que postei meu artigo sobre Modelos responsivos de
navegao : Como lidar com uma navegao complexa no design responsivo?

tima pergunta, mas antes de entrar nos pormenores, eu vos peo: Use o celular como
uma desculpa para revisitar sua navegao. Observe suas anlises. Quais os pontos
chave da sua experincia? Onde as pessoas passam a maior parte do tempo? Voc
realmente precisa da sua poltica de privacidade na navegao principal? Tenha foco.
Aproveite a falta de espao da tela para retirar todo o besteirol poltico do site etc, e
elimine todo o contedo intil. Seus usurios agradecero.

Mais uma coisa: Se voc tem zilhes de sees e pginas, priorize a busca. Um formulrio
de busca uma maneira eficaz de levar os usurios onde eles desejam ir, sem ter que
percorrer vrios nveis na navegao.

Ok, agora que definimos algumas coisas, hora da verdade. s vezes no muito prtico
reduzir suas milhares de pginas em trs 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 contedo para um grande pblico alvo. s vezes o cliente
que anuncia no seu site vai, literalmente, te engolir por remover o seu link da navegao.

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 1/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Enfim, s vezes voc s precisa de uma navegao mais complexa. O que voc vai fazer?
Bem, a vo alguns padres para lidarmos com navegaes complexas, longas e multi-
level.

Multi Toggle
O bom e velho Right-To-Left
Pular a sub-navegao
Priority+
Off-Canvas Flyout
Carousel+

O MULTI-TOGGLE

O menu multi-toggle basicamente um acordeo 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 rpida: Use os cones + ou para deixar o usurio saber que h mais contedo.

Prs
Escanevel Os usurios podem rapidamente escanear as categorias principais,
antes de tomar qualquer deciso em ir ao prximo nvel.
Escalvel Seu menu tem 17 nveis? Esta soluo pode lidar com isso facilmente
(mas, por favor, no faa isso).

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 2/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Contras
No to atraente Dar taps ao longo dos vrios nveis no a coisa mais elegante
do mundo, mas acho que voc poderia acabar dizendo a mesma coisa diante de qualquer
soluo de navegao multi-level.
Um possvel JS requerido Digo possvel pois a maioria desses estilos de
interao 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! Alm disso, a necessidade de JavaScript no necessariamente
um contra. Apenas certifique-se que a navegao no ser acessada por usurios sem
suporte a esta linguagem.

Recursos
Construa um smart mobile navigation sem hacks
Anime usando min-height por Lea Verou Esta tcnica insanamente incrvel. Eu a
utilizo em todas as minhas necessidades de height-animating, Inclusive em accordions.
jQuery Accordion

Na web
O redesign do site do Barack Obama em conjunto com o padro footer anchor.

O BOM E VELHO RIGHT-TO-LEFT

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 3/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Em vez de itens de sub-navegao aparecendo por baixo da categoria, como no multi-

toggle, o nvel seguinte da navegao fica direita (fora da tela) e animado quando
requisitado.

Prs
Muito atraente No sempre que um menu de navegao te surpreende, mas a
navegao right-to-left sem dvida muito elegante;
Segue as convenes do mobile A maioria das principais plataformas de
smartphones tem algum padro de animao right-to-left para potencializar sua
experincia
Escalvel bom para uma navegao com muitos nveis.

Contras
Complexo Isto no necessariamente um contra, mas este padro tem
literalmente um monte de peas mveis. Por isso, certifique-se de deix-las todas
acessveis, garanta-se e teste no maior nmero de dispositivos possvel;
Desempenho da animao O desempenho varia bastante entre os diversos
dispositivos e plataformas. Algumas plataformas mobile o animam muito bem, enquanto
em outras uma droga. Tambm esteja ciente de que algumas plataformas no suportam
esta animao, e uma mudana repentina na navegao pode ser um choque ao usurio.

Na web
Sony
Currys

PULAR A SUB-NAVEGAO

A sub-navegao normalmente inclui itens que tambm so inclusos na pgina principal

da categoria. Pelo fato do contedo ser acessvel desta pgina, perfeitamente vivel
simplesmente levar os usurios de small screens direto pgina principal e deix-lo
tomar sua prxima deciso de l.

Prs

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 4/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Evita ter que lidar com sub-navegaes Simplesmente levar o usurio a uma nova
pgina elimina a dor de cabea resultante de uma sub-navegao. Embora ele possa se
sentir enganado, lembre-se que o tap utilizado em dispositivos sem um estado hover.
Assim, quando o usurio d um tap em clothing e ento levado pgina principal de
roupas, ele j est atingindo o seu objetivo.
Simples Links para outras pginas.

Contras
Requer a atualizao de uma pgina inteira para acessar os itens de sub-navegao
Este um grande contra. Ter que ir a uma outra pgina no to eficiente para uma
navegao rpida.
Usurios de small screens ainda fazem download do contedo da sub-navegao
Tambm um grande contra. um caso clssico de usurios mobile fazer download de
elementos que nunca iro usar. No entanto, no precisa ser assim. Sub-navegaes,
especialmente mega menus monstruosos, daqueles cheios de tranqueiras que ningum
nunca ir usar e onde eu estava? Ah sim eles podem (e devem) ser condicionalmente
carregados para que usurios de small screens no tenham que baixar um contedo
intil.

Recursos
Carregamento condicional para design responsivo
Padro Ajax-Include para contedo modular

Na web
World Wildlife Fund (WWF)
West Virginia University
Boston Globe AJAXifies uma sub-navegao feita do jeito certo.
Chapman University
University of Central Arkansas
University of Glamorgan

PRIORITY+

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 5/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

O padro Priority+ foi cunhado por Michael Scharnagl (@justmarkup) para descrever uma
navegao que exibe os elementos considerados mais importantes na navegao,
ocultando os itens menos relevantes por trs de um link more. Esses itens somente so
revelados quando o usurio clicar neste link.

Prs
Relativamente simples de implementar A lgica requerida para executar esta
tcnica no to complicada. Basta um comando show/hide para revelar e esconder os
itens de navegao.
Expe as caractersticas mais acessadas ( o que a gente acredita) Com isto,
esperamos revelar trs ou quatro itens que a maioria dos usurios acessam com
frequncia.

Contras
Oculta potencialmente importantes itens da navegao o que voc julga mais
importante pode no ser a opinio do seu usurio. Enterrar itens de navegao significa
ter que fazer suposies, e ao mesmo tempo que esperamos ser til para a maior parte
dos usurios, pode irritar a outros.
No funciona muito bem com a navegao multi-level O modelo priority+ parece
bom para navegaes que tem muitos itens num mesmo nvel de hierarquia, mas
infelizmente parece ainda no resolver o dilema da sub-navegao.

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 6/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Recursos
Navegao Responsiva Multi Level Vamos tentar!

Priority+ Demo

Na web
William and Mary

As section pages do site mobile do USA Today no seguem exatamente esta proposta, mas
exibem as categorias mais importantes por padro, e uma seta revela os itens de
navegao restantes. Bastante atrativo.

OFF-CANVAS FLYOUT

O menu off-canvas flyout revela uma coluna de navegao. Os itens do sub-menu podem
ser tantos quanto o comprimento da prpria pgina, por isso h espao de sobra para
uma longa e/ou complexa navegao. Como j escrevi sobre o modelo flyout left antes,
vou poup-los da anlise de prs e contras. Em vez disso, estou disponibilizando uma lista
de referncias para modelos off-canvas.

Recursos para off-canvas

Off Canvas Multi-Device Layout
Off Canvas Multi-Device Layouts
Off-Canvas demo por Jason Weaver
Off Canvas Layouts na Zurb Foundation

Na web
Facebooks mobile site

CAROUSEL+
http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 7/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Este o menu da moda. O padro Carousel+ um carrossel contendo uma categoria

principal com opes de sub-navegao exibidas na parte inferior. O usurio pode
deslizar horizontalmente pelas opes de navegao ou usar as setas (direita/esquerda)
para mover-se pelo carrosel.

Prs
Relativamente atraente Esta certamente uma soluo nica e elegante para
navegaes mais complexas.
Funciona bem com touch screens A capacidade de deslizar por um pequeno
carrossel uma interao muito legal, e eficiente no sentido de conseguir chegar aonde
voc quer.

Contras
No exibe todas as categorias Assim como o modelo Priority+, o modelo Carousel+
requer uma interao antes de o usurio poder compreender todas as opes disponveis.
Pesado em dispositivos non-touch Ter um carrossel deslizante timo, mas ainda
existem muitos ambientes e dispositivos que no suportam eventos touch JavaScript. Para
esses ambientes, o usurio ter que recorrer a setas que avanam uma categoria de cada
vez, o que pode ser bem entendiante.

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 8/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

No recomendado para navegao multi-level Este padro funciona bem quando

a sub-navegao tem apenas um nvel. Mas, no escalvel alm disso.
Questes de proximidade entre a navegao principal e a sub-navegao A
distncia entre os itens do primeiro nvel da navegao e da sub-navegao muito
pequena. No fica muito legal. Sei l, talvez seja s pra mim.

Na web
Site mobile da Intel Sim, sei que no responsivo, mas no significa que este
padro no possa ser usado em um ambiente responsivo1.

ADIANTE!
No importa o que voc faa, ajustar uma navegao complexa e multi-level para small
screens algo difcil. Lembre-se de priorizar a busca, e de subtrair o que for possvel
antes de embarcar na implementao de uma navegao complexa. Essa coleo de
padres de navegao no est to abrangente, por isso fique a vontade para sugerir
outras solues interessantes que voc j viu.

1 Nota do tradutor: O site da Intel agora responsivo, e utiliza um outro padro de

menu. Mantive este link apenas para ser fiel a traduo. Vocs podem observar este
padro de menu pela imagem que abre a seo Carousel+. voltar ao texto

Artigo traduzido com autorizao 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 28 de junho de 2013

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 9/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Will Sales
WebDesigneregraduandoemdesenvolvimentodesistemasp/a
internet.Blogueironobbburp!(blogdetradues).

Vejamaisartigosdesteautor

LEIA TAMBM
Aproveite para ler estes posts tambm:

3 OUT 2016 26 SET 2016 19 SET 2016

Web.br 2016 A Um software para Menos mais com

Conferncia do front-end e UI Android
W3C no Brasil Designers Annotations

5Comentrios Tableless
1 Entrar

Recomendar 2 Compartilhar OrdenarporMaisrecentes

Participardadiscusso...

OnceBuilderCMSumanoatrs
Howaboutthishttp://responsivemultimenu.com...
Responder Compartilhar
http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 10/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

LojaTudoSaudvel2anosatrs
Muitobom,melembraoconceitodedesignpatterns.
Responder Compartilhar

CarlosGomes3anosatrs
Muitobomartigo.
Responder Compartilhar

BrunoRodrigues3anosatrs
timoartigoWill.

AchoqueaquestodanavegaoResponsivarealmenteumpontoquedevemostermuito
cuidado,eoconceitoaserusadovaidependermuitodoprojeto.Oimportantedeixara
navegaoomaisfcilpossvelparaousurio.
Responder Compartilhar

FelipeFialho3anosatrs
Beloartigo.

Lideicomesseproblemafazpoucotempo.Enoconheciaboapartedassoluesque
apresentou.

Dessas,nenhumameagradacompletamente,eachoquecomosempre,precisamos
analisardeacordocomoprojeto.
Responder Compartilhar

TAMBMEMTABLELESS

VocconheceAMP? 10sitesgratuitossobretecnologiae
8comentrios3mesesatrs empreendedorismo
kakateNo,soduasiniciativas 2comentrios3mesesatrs
parecidas,masadoFacebookoInstant MateusSouzaAchoqueocaraqueria
Articles.Oconceitoprimriodasduaso fazerumalistade15sites,fezs10,mas
mesmo,oquemudao esqueceudealteraronomedoarquivo...

UmpoucosobreimagensparaWeb LinkedDataeJSONLD
2comentrios3mesesatrs 4comentrios3mesesatrs
DiegoEisAceita,mascomotemum DiogoMachadoExcelenteDiego,as
nmerodecoreslimitada,oalphamuito vezescriamossitesepassamosporesses
ruim.Nosecomparacomocanalalpha detalhesquesoimportantssimos.
completodo
Inscrevase d AdicioneoDisqusnoseusiteAdicionarDisqusAdicionar Privacidade

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 11/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Posts recentes
Web.br 2016 A Conferncia do W3C no Brasil
Criando aplicaes portveis entre diferentes SGBDs usando
PDO(PHP Data Objects)
Um software para front-end e UI Designers
Construindo um rewall no WordPress Parte 2
Menos mais com Android Annotations

Newsletter
Seuprimeironome

Seuemail

insrever

Mais vistos
Web.br 2016 - A Conferncia do W3C no Brasil
Criando um Menu Horizontal com CSS
Centralizando um objeto na Horizontal e Vertical com CSS
Design Responsivo na prtica 2: do layout ao HTML
Dicas e truques de Sublime Text

Siga-nos
http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 12/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Twitter
Medium
Facebook
FEED Rss
Google+

Ns fazemos
Produzimos seu cdigo front-end
Micro Workshops Online

Leia tambm:
A pergunta que mais recebo desde que postei meu artigo sobre
Modelos responsivos de navegao : Como lidar com uma
navegao complexa no design responsivo? tima pergunta, mas
antes de entrar nos pormenores, eu vos peo: Use o celular como
uma desculpa para revisitar sua navegao. Observe suas anlises.
Quais os pontos chave da sua []

SOBRE
Contato
Anuncie no site
Seja um Autor
http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 13/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless

Sobre

INTERAJA
Frum
Feed
Twitter
Facebook

COMUNIDADE
Femug
MeetupCSS SP
Zofe
BrazilJS
FrontUX

Escritopelaeparaacomunidadewebbrasileira.Ajude.

http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 14/14