Navegação res­pon­siva: menus dinâmicos em dis­po­si­ti­vos móveis

A navegação res­pon­siva ou res­pon­sive na­vi­ga­tion é um dos aspetos fun­da­men­tais da oti­mi­za­ção móvel. Se a navegação móvel não permitir que os uti­li­za­do­res se desloquem fa­cil­mente de um ponto a outro, é provável que abandonem ra­pi­da­mente a página, o que se traduz numa perda de tráfego e, acima de tudo, de receitas. Existem di­fe­ren­tes abor­da­gens, como a navegação suspensa ou a barra de navegação inferior, que podem ajudar a resolver este problema.

O que ca­rac­te­riza uma boa navegação na web?

Uma boa navegação na web é o eixo central de uma página web, pois torna-se a fer­ra­menta através da qual o uti­li­za­dor encontra as in­for­ma­ções re­le­van­tes para ele. Portanto, os elementos de controlo devem funcionar com eficácia e a estrutura deve ser com­pre­en­sí­vel e ex­pli­ca­tiva, além de permitir um manuseio intuitivo. O desafio es­pe­cí­fico dos menus de navegação res­pon­si­vos é, acima de tudo, a falta de espaço e o método de entrada tátil próprio dos dis­po­si­ti­vos móveis. No entanto, hoje em dia existem algumas soluções res­pon­si­vas que permitem uma navegação web clara e fácil de usar. A ideia básica por trás do design res­pon­sivo é que tanto o conteúdo como o design das páginas web se adaptem di­na­mi­ca­mente às res­pe­ti­vas condições e ao tamanho do terminal.

Na maioria dos casos, é adequado optar pela abordagem«mobile first»para criar páginas web. A oti­mi­za­ção móvel coloca em primeiro plano o conceito de design, ou seja, a conceção, a usa­bi­li­dade e o de­sem­pe­nho da versão móvel têm pre­fe­rên­cia, enquanto, em segundo lugar, fica a adaptação para poder ser vi­su­a­li­zada em com­pu­ta­do­res de se­cre­tá­ria e portáteis. Adaptar uma navegação web existente a dis­po­si­ti­vos móveis costuma ser mais com­pli­cado e tra­ba­lhoso. Antes de começar com o pla­ne­a­mento e a im­ple­men­ta­ção de uma navegação res­pon­siva, é fun­da­men­tal responder a algumas questões básicas, es­pe­ci­al­mente no que diz respeito à lo­ca­li­za­ção e à estrutura geral da navegação.

Onde deve ser colocado o menu de navegação?

Os locais mais comuns para o menu de navegação são o rodapé (footer) e a parte superior da página. No caso da navegação lo­ca­li­zada no rodapé, os uti­li­za­do­res encontram apenas no início da versão móvel um link para a secção do rodapé, onde se encontram os di­fe­ren­tes elementos do menu.

No entanto, as na­ve­ga­ções colocadas no rodapé da página não são muito práticas, pois os uti­li­za­do­res esperam que os elementos im­por­tan­tes de navegação sejam fa­cil­mente aces­sí­veis, pelo que esta opção é cada vez menos utilizada. Por isso, hoje em dia é mais comum encontrar a navegação móvel (mobile na­vi­ga­tion) na parte superior da página. Esta versão de navegação é mais familiar para a maioria das pessoas.

Como é es­tru­tu­rado este tipo de menus de navegação?

As pos­si­bi­li­da­des para es­tru­tu­rar este tipo de menus são variadas. Os menus de navegação por meio de listas ou por meio de qua­dri­cu­la­dos estão entre os métodos mais uti­li­za­dos.

A apre­sen­ta­ção clássica em forma de lista é utilizada tanto em menus de navegação simples como em menus mais complexos e com vários níveis. As suas vantagens residem na sua fácil im­ple­men­ta­ção e no facto de responder aos hábitos de navegação dos uti­li­za­do­res.

A navegação em grelha é ideal quando os elementos do menu são curtos e é es­pe­ci­al­mente útil no comércio ele­tró­nico. Os elementos são apre­sen­ta­dos lado a lado em formato de grelha e o número de colunas varia de acordo com o tamanho do ecrã. Se optar por uma grelha de duas colunas, é re­co­men­dá­vel que haja um número par de elementos para evitar uma apre­sen­ta­ção as­si­mé­trica.

Que tipos de navegação móvel existem?

Chegamos agora à pergunta fun­da­men­tal: como se abre o menu de navegação nos te­le­mó­veis? A forma como o menu é apre­sen­tado determina o conceito de navegação. As opções de vi­su­a­li­za­ção são muito variadas: o menu pode estar visível desde o início ou ser exibido apenas ao tocar num ícone, pode deslocar o conteúdo ou sobrepor-se a ele. A seguir, mostramos alguns exemplos.

Navegação através do menu suspenso

Os menus suspensos são um dos modelos clássicos da navegação res­pon­siva. Eles evocam a estrutura da navegação em com­pu­ta­do­res desktop, con­quis­tam a confiança dos uti­li­za­do­res e são fre­quen­te­mente um conceito de navegação muito seleto. O menu de navegação é ativado ao clicar num botão ou no ícone cor­res­pon­dente e sobrepõe-se ao conteúdo, sem o cobrir com­ple­ta­mente.

Navegação na web através de menu des­li­zante

Outro tipo de navegação muito popular é a chamada navegação des­li­zante para baixo (slidedown), também conhecida como navegação tipo acordeão ou menu suspenso ex­pan­sí­vel. Ao clicar no botão do menu, este é exibido. Ao contrário do menu suspenso clássico, a versão des­li­zante para baixo não se sobrepõe ao conteúdo, mas empurra-o para baixo. Embora a sua im­ple­men­ta­ção seja um pouco mais complexa, é con­si­de­rada uma opção muito escalável e que economiza espaço. Graças à pos­si­bi­li­dade de integrar submenus, oferece uma solução elegante tanto para menus simples como para es­tru­tu­ras mais complexas.

Barra de navegação inferior

A barra de navegação inferior é uma solução cada vez mais popular em apli­ca­ções móveis e páginas web, na qual o menu é apre­sen­tado na parte inferior do ecrã. Este tipo de navegação é es­pe­ci­al­mente con­for­tá­vel, uma vez que nos smartpho­nes é muito fácil de alcançar com o polegar. É ideal para projetos com poucos, mas im­por­tan­tes, elementos de navegação e oferece uma estrutura clara e or­ga­ni­zada que ajuda os uti­li­za­do­res a moverem-se ra­pi­da­mente entre as prin­ci­pais secções da página.

Menu de navegação fora do ecrã

Nesta solução, a navegação res­pon­siva fica fora da área visível habitual. O menu não está integrado no design, pelo que a navegação fora do ecrã é uma solução que permite poupar espaço, uma vez que o menu não é visível na janela. Este aparece ao tocar no ícone do menu, após o que a sua estrutura se torna visível. Esta opção é indicada para hi­e­rar­quias de navegação de grande en­ver­ga­dura que possuem di­fe­ren­tes submenus.