IGTI Blog

Padrões de navegação mobile: Vantagens e desvantagens

 

Um estudo feito com 179 pessoas, realizado pelo Nielsen Norman Group concluiu que os menus de navegação são mais usados nos dispositivos móveis (tablets e smartphones) que nos computadores desktop (apesar do termo, os notebooks também entram nessa categoria). A equipe analisou seis websites com grande volume de acesso:

  •         7digital (música, e-commerce)
  •         BBC (notícias)
  •         Bloomberg Business (notícias sobre negócios)
  •         Business Insider UK (notícias sobre negócios)
  •         Supermarket HQ (e-commerce)
  •         Slate (notícias)

Figura 1 - O uso do elemento de navegação é maior no mobile que no desktop

Figura 1 – O uso do elemento de navegação é maior no mobile que no desktop

Em todos os casos, o uso do elemento de navegação foi maior no mobile que no desktop. Esse estudo é um ótimo indicativo do comportamento de uso em dispositivos móveis, pois, ao contrário do que se pensava (sim, a equipe no NN/g acreditava no contrário… e eu também) os menus são mais acessados nas telas menores, o que indica que boa parte dos usuários já entendem as estratégias mais comuns que os designers utilizam para prover a navegação de um conteúdo para outro.

Quando alguém começa a usar um aplicativo, ou um website responsivo, geralmente esse usuário precisa saber como navegar de uma tela para outra e, principalmente, saber de onde veio e para onde pode ir. Uma boa estratégia de navegação é como um ônibus confortável que leva os usuários aonde querem. Porém, estabelecer uma boa navegação num dispositivo móvel é um grande desafio devido às limitações da tela pequena e a necessidade de priorizar o conteúdo em relação aos menus, pois, ao contrário do desktop, não é aconselhável “gastar espaço” da tela enchendo-a com abas, menus e links. Afinal, esse espaço poderia ser melhor aproveitado com o conteúdo principal, não é mesmo?

Por causa disso, diferentes padrões de navegação foram concebidos para resolvereste desafio de diferentes maneiras, mas todos eles sofrem com umavariedade de problemas de usabilidade.

Mas como usabilidade é contexto, neste artigo, examinaremos cinco padrões básicos de navegação móvel e descreveremos os pontos fortes e fracos de cada um deles.

1.  Menu Hambúrguer

Em mobile, espaço da tela é algo precioso e o menu de hambúrguer (ou drawer lateral) é um dos padrões de navegação móvel mais populares para economizar espaço. O painel drawer permite ocultar a navegação além da margem esquerda da tela e revelá-la somente após o usuário clicar no ícone das três barrinhas (daí vem o nome Hambúrguer).

Figura 2 - Drawer fechado e aberto após clicar no ícone hambúrguer

Figura 2 – Drawer fechado e aberto após clicar no ícone hambúrguer

Vantagens

Grande número de opções de menu

A principal vantagem deste menu é que ele pode acomodar um grande número de opções de navegação em um espaço minúsculo.

Layout mais limpo

Design limpo e minimalista, que interfere muito pouco na composição da tela e dá mais importância ano conteúdo.

Desvantagens

Sua percepção ainda é baixa

Quando o drawer está fechado, boa parte dos usuários ainda não percebem a presença do ícone. É certo que esse tipo de navegação está se tornando padrão e muitos usuários mobile já estão familiarizados com o famoso “ícone das três barrinhas”. Entretanto, muitas pessoas simplesmente nem pensam em abri-lo.

Conflita com regras de navegação do sistema operacional

O menu de hambúrguer tornou-se quase um padrão no Android, mas no iOS, seu uso pode ser um tanto arriscadopois pode concorrer visualmente com os elementos básicos do sistema, e isso pode sobrecarregar a barra de navegação.

Figura 3 - Barra de navegação do iOS

Figura 3 – Barra de navegação do iOS

Perde-se o contexto

O menu hambúrguer não comunica a localização atual. Para o usuário saber onde ele se encontra,é necessário clicar no ícone antes.

Figura 4 - O drawer esconde a localização atual do usuário

Figura 4 – O drawer esconde a localização atual do usuário

2.  Painel de abas (tab bar)

[AV1] O painel de abas ou tab bar é mais um exemplo de padrão de interação herdado do desktop. Geralmente, contém poucos itens que possuem o mesmo grau de importância e oferecem acesso direto de qualquer lugar do aplicativo/website.

Figura 5 - O painel de abas é vivível em qualquer tela

Figura 5 – O painel de abas é vivível em qualquer tela

Vantagens

O contexto é facilmente percebido

O painel de abasinforma muito bem a localização atual. As pistas visuais adequadamente utilizadas (ícones, etiquetas e cores) permitem ao usuário entender sua localização atual de uma só vez.

Acesso rápido e fácil

As abas são fixas. Com isso, a navegação permanece à vista independentemente da página que o usuário está visualizando. O usuário tem visibilidade clara de todas as áreas/seções do aplicativo e pode acessá-las com um único clique.

Dentro do que chamamos de Thumb Zone o painel de abasé mais facilmente acessado, quando localizado na parteinferior da tela. Recentemente, até o Google com o Material Design já adotou o padrão de abas inferiores. Até 2016, o Material Design adotava apenas as abas superiores.

Figura 6 - Posição ideal para a utilização das abas de acordo com oUXmag.

Figura 6 – Posição ideal para a utilização das abas de acordo com oUXmag.

Desvantagens

As opções são limitadas

Se o menu de navegação do seu aplicativo tiver mais de cinco opções, mantê-los em um painel de abas pode ser uma tarefa árdua. Considere a opção de usar o menu hambúrguer nesses casos.

Tamanho é documento

Deve-se garantir que cada aba tenha, no mínimo, 10mm de largura ou altura.

Figura 7 - 10mm quadrados são suficientes para a grande maioria dos usuários

Figura 7 – 10mm quadrados são suficientes para a grande maioria dos usuários

3.  Hub de navegação

O hub de navegação é uma página (geralmente a página inicial) que lista todas as opções de navegação. Para navegar para uma nova tela ou seção, os usuários devem primeiro voltar ao hub e usar uma das opções listadas lá.

Esse tipo de navegação é mais útil quando o app ou website é mais orientado à execução de tarefas e menos em conteúdo.

Figura 8 - Fonte: Smashing Magazine

Figura 8 – Fonte: Smashing Magazine

Vantagens

Sem distrações

Pode funcionar bem em sites e aplicativos baseados em tarefas, especialmente quando os usuários tendem a se limitar a usar apenas um ramo da hierarquia de navegação, ou seja, realizam apenas uma tarefa durante a sessão.

Caminho seguro

Pode ser mais adequado e seguro para usuários que precisam realizar uma tarefa muito específica, comofazer check-innum voo ou alterar as configurações do telefone, por exemplo.

Figura 9 - Hub de navegação do Yelp

Figura 9 – Hub de navegação do Yelp

Desvantagens

Pode ser um desperdício

Um hub de navegação precisa “gastar” uma página inteira só com links para outras áreas do app.

Pode ser enfadonho

Ter que voltar à página inicial toda vez que quiser navegar para outra área do app pode irritar bastante os usuários.

4.  Floating Action Button (FAB)

Este pode até ser entendido mais como um botão de ação primária do que como um elemento de navegação. De toda forma, o FAB pode sim ser usado para saltar de uma seção para outra.

O FloatAction Button é um dos principais expoentes do Material Design. Trata-se de um botão circular que flutua por sobre a interface com uma cor bem distinta do restante.

Figura 10 - O FAB pode ter duas ações, como Play e Pause

Figura 10 – O FAB pode ter duas ações, como Play e Pause

Vantagens

É uma boa maneira de priorizar a ação mais importante na tela.

Ele ocupa pouco espaço na tela. Comparado com o painel de abas, ele não ocupa uma linha inteira.

Um estudo feito por Steve Jones demonstra que um FAB prejudica a usabilidade quando os usuários interagem pela primeira vez com o elemento. No entanto, uma vez que os usuários concluíram com êxito uma tarefa usando o FAB, eles são capazes de usá-lo de forma mais eficiente do que um botão de ação tradicional.

Desvantagens

Distrai o usuário do conteúdo

Por ter o intuito de ser chamativo, o FAB pode desviar a atenção do usuário do que realmente importa: o conteúdo.

Figura 11 - O FAB distrai o usuário do conteúdo

Figura 11 – O FAB distrai o usuário do conteúdo

 

Pode bloquear conteúdo

No aplicativo do Gmail, por exemplo,o FAB bloqueia o ícone de “favoritar” (estrela), bem como o label de data/hora da última linha.

Figura 12 - O usuário precisa deslocar o conteúdo para acessar o ícone de favoritar ou para ver a data/hora da mensagem

Figura 12 – O usuário precisa deslocar o conteúdo para acessar o ícone de favoritar ou para ver a data/hora da mensagem

5.  Navegação gestual

Com o uso cada vez mais difundido das telas multi-toque, muitos designers começaram a explorar a navegação entre telas além do gesto mais comum que é o clique (tap).

Figura 13 - App de tarefas que usa slide e pinch como gestos de navegação

Figura 13 – App de tarefas que usa slide e pinch como gestos de navegação

Esse padrão é útil quando os usuários desejam explorar os detalhes de conteúdo específico de forma fácil e intuitiva. É mais indicado para as situações em que os usuários passarão mais tempo com conteúdo do que propriamente navegando pelo app.

Vantagens

Resolve a “desordem” da interface

Usar gestos como o cerne da interação permite que você torne suas interfaces mais minimalistas e economize espaço de tela para conteúdo.

Torna a interação mais natural.

Luke Wroblewski fala sobre um estudo no qual 40 pessoas em 9 países foram convidadas a criar gestos para 28 tarefas diferentes, como exclusão, rolagem e zoom. Ele descobriu que os gestos tendem a ser semelhantes em todas as culturas e níveis de experiência analisados. Por exemplo, quando solicitado a “excluir”, a maioria das pessoas – independentemente da nacionalidade – tentou arrastar o objeto fora da tela.

Podem ser uma característica marcante de um produto

O Tinder popularizou massivamente o conceito de navegação baseada em gestos e, basicamente, fez com que esses swipes fossem quase sua marca registrada.

Figura 14 - O Swipe se tornou quase uma marca registrada do Tinder

Figura 14 – O Swipe se tornou quase uma marca registrada do Tinder

Desvantagens

É praticamente invisível

Uma regra importante na concepção de uma interface é a visibilidade: através dos menus, todas as ações possíveis devem ser visíveis e, portanto, facilmente detectáveis. Não é o caso da navegação por gestos.

Demanda mais habilidade do usuário

A maioria dos gestos não são naturais nem fáceis de aprender ou lembrar. Ao criar uma navegação por gestos, tenha em mente que a curva de aprendizado tende a aumentar e é natural que os usuários fiquem confusos no início.

Conclusão

Criar interfaces ricas, usáveis e acessíveis já é suficientemente difícil em qualquer dispositivo. Em mobile essa tarefa é ainda mais desafiadora, não só pelas limitações da tela reduzida, mas até mesmo pelas possibilidades que esses dispositivos oferecem.

Uma das grandes habilidades de qualquer designer de interação é conhecer bem o seu público e, principalmente, o contexto de operação do seu produto interativo. Com esses dois conceitos bem definidos, as chances de sucesso são muito maiores.

Professor autor: Alan Vasconcelos