Escolar Documentos
Profissional Documentos
Cultura Documentos
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
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.
http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 3/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless
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
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.
Na web
Facebooks mobile site
CAROUSEL+
http://tableless.com.br/padroescomplexosdenavegacaonodesignresponsivo/ 7/14
05/10/2016 PadresComplexosdeNavegaonoDesignResponsivoTableless
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
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.
Acesse o artigo original em Brad Frost Web Complex Navigation Pattern for Responsive
Design 27 de agosto de 2012.
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:
5Comentrios Tableless
1 Entrar
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