Concrete Logo
Hamburger button

iOS e Android: em busca da navegação perfeita

  • Blog
  • 3 de Maio de 2016
Share

Estava há tempos preparando um post sobre o polêmico hamburger menu. Era uma análise de tudo o que andei lendo por aí, desde guidelines das plataformas mobile até alguns cases mostrando as diferenças de resultados de testes A/B. O tempo passou, alguns posts sobre o assunto ajudaram a enriquecer o debate, acabei não terminando o meu post e, alguns meses depois, como tudo hoje em dia, novidades surgiram e resolvi retomar ao assunto. Agora, porém, abordando a navegação em geral, seja intra ou entre-apps.

Semanas atrás a Google incluiu nas suas guidelines do Material Design a tab bar inferior, praticamente igual à do iOS. Para quem estuda as guidelines das plataformas e acompanha os updates, é possível identificar uma convergência gradual entre elas. Essa convergência (não total, claro – há ainda várias diferenças de interação entre os sistemas) fica clara para mim ao listar os seguintes pontos:

  • O botão VOLTAR do Android e do Windows Phone foi (timidamente) implementado no iOS9: ele serve para voltar ao app anterior. Essa iteração atual, apesar de útil, ainda sofre críticas, principalmente pela pequena área de toque (os 20 pontos de altura da status bar) e sua localização meio escondida, muito próxima do botão voltar que normalmente aparece no header dos aplicativos. Nas palavras da consultoria Nielsen Norman Group, “it feels almost like a Band-Aid on a beautifully finished product”. Ele tem implicações não apenas na navegação entre aplicativos, mas também em como algumas telas devem ser modificadas para “receber” essa novidade, como mostra o estudo dessa mesma consultoria.
Esquerda: Tumblr iOS com botão Voltar para App Store e tab bar inferior. Direita: Tumblr Android com tab bar superior. ( (fonte: UiOhMy)

Esquerda: Tumblr iOS com botão Voltar para App Store e tab bar inferior.
Direita: Tumblr Android com tab bar superior. ( (fonte: UiOhMy)

  • A adoção, pelo iOS9, de uma tela de Apps Recentes parecida com a do Android. A diferença é que na primeira a listagem é horizontal e a na segunda, vertical (aproveitando melhor a orientação de “retrato” da tela).

image02 image00

 

 

 

 

 

 

 

 

 

 

  • A adoção, no Material Design (presente no Android desde a versão Lollipop), do botão voltar no header dos aplicativos. Antes, o usuário contentava-se com o botão “físico” da plataforma, que volta para a tela anterior, seja do mesmo app, seja do app no qual se originou a navegação. Hoje, ao projetar um aplicativo Android, devemos considerar também essa opção, que não necessariamente tem o mesmo comportamento do botão inferior.
image03

AirBnb para Android: botão voltar no header (fonte: UiOhMy)

  • Por fim, a adoção no Material da tab barinferior, citado no começo do post, chamada de “bottom navigation”.
image06

Padrões de navegação do Android: tab bar superior com e sem ícones. (fonte: Material Design)

 

components_bottomnavigation_behavior_hierarchy

Nova opção de navegação do Android: tab bar inferior.

Voltando à questão do hamburguer menu, muito já se falou sobre ele, que seria a solução primária de navegação de um aplicativo Android. Os impactos de sua aplicação na capacidade do usuário de descobrir e usar certas funcionalidades é claro. Mas, enquanto a Apple desencoraja seu uso, a Google a descreve como uma solução padrão. E, de fato, para certos aplicativos, não tem como escapar. Se pegarmos, por exemplo, um aplicativo de transações financeiras, é impossível mostrar todas as funcionalidades na tela principal. Ao priorizar algumas, buscando aliar objetivos de negócio com as necessidades do usuário, você automaticamente esconde as restantes, seja na “navigation drawer” (hamburger menu), seja em uma opção “Outros/Mais…”. A discussão passa a ser justamente sobre priorizar features (seja por meio de pesquisas ou de machine learning) até seu desmembramento para a criação de uma família de aplicativos.

Bottom navigation

Com essa novidade do Material Design, ao projetar para o Android os designers têm referendada mais essa possibilidade de navegação, que facilita a navegação (e a exploração) para todo os tipos de usuário sem causar grande impacto na ocupação do espaço disponível da tela, principalmente agora que as telas grandes (~ 5 polegadas) começam a se tornar o padrão dos smartphones. Além disso, a localização do bottom navigation traz o menu para mais perto do alcance do dedão, no caso de o usuário estar usando apenas uma mão.

image05

Alcance do dedão. (fonte: LukeW.com)

Ainda assim, é importante considerar alguns pontos de atenção:

  • a curva de aprendizado dessa mudança para o usuário Android;
  • o uso de muitas soluções ao mesmo tempo: a tabbar inferior, a tabbar superior e o hamburger menu juntos podem confundir o usuário;
  • a proximidade dos itens do tabbar inferior com os botões de navegação do sistema;
  • o impacto do comportamento do tab bar (fixo ou retrátil) na rolagem do conteúdo.

image01

Importante lembrar que trato aqui de padrões “nativos” de navegação (que seguem as guidelines das plataformas), mais comumente implementados em aplicativos que buscam alcançar um amplo espectro de usuários (do light ao heavy), ou então em MVPs, que acabam se utilizando desses padrões para serem lançados mais rapidamente no mercado, com algum grau de segurança em relação à usabilidade.

Concluindo, a busca pela navegação perfeita no seu aplicativo, seja ela “nativa” ou não, deve considerar todas essas variáveis que causam impacto na usabilidade: o perfil do seu usuário e a familiaridade dele com o mundo mobile, guidelines das plataformas e curva de aprendizado de gestos e navegação não usuais, ergonomia e priorização de funcionalidades. Assim, as suas chances de sucesso serão com certeza maiores. Ficou alguma dúvida ou tem alguma sugestão? Fique à vontade nos campos abaixo. Até a próxima!

Temos vagas para UX Designer! Quer fazer parte do nosso time? Acesse aqui.