“Falem mal, mas falem de mim” – se o menu hambúrguer tivesse consciência, esse provavelmente seria seu lema nos dias de hoje.

Nunca se falou tanto no ícone de três linhas paralelas, popularizado com a massificação dos dispositivos móveis. Esse tipo de menu parecia a solução perfeita para contornar a limitação das telas de aparelhos menores e economizar espaço, condensando informações num contêiner escondido que pode ser expandido quando clicado ou tocado.

A história do hambúrguer

O menu hambúrguer data de 1981. O ícone foi criado pelo designer americano Norm Cox enquanto trabalhava na interface do sistema operacional Xerox Star.

Como Cox não tinha muitos pixels com que trabalhar, precisava criar algo único e simples ao mesmo tempo. Pensou numa seta triangular apontada para baixo, que mais parecia um ícone direcional que de interação, mas escolheu as três linhas paralelas no canto superior direito das janelas.

A função do contêiner era listar uma série de comandos relacionados a um elemento, como os que vemos hoje quando pressionamos o botão direito do mouse. Bem diferente dos menus hambúrguer atuais.

Na época, Cox e sua equipe pensavam no ícone como uma ventilação para resfriar a janela do programa executado no OS. “Meu palpite é que algum designer de UI renderizou um símbolo com três linhas para representar um menu pop-up e nem sabia da sua existência anterior no Xerox Star”, disse Cox em entrevista ao Readme.Mic no fim do ano passado.

O preço a pagar

Desde 2014, no entanto, o menu hambúrguer parece ter feito mais inimigos que aliados, dos mais “moderados” (O menu hambúrguer não funciona) aos mais “extremistas” (Matem o botão hambúrguer).

Não é arbitrariedade – UX, afinal, é muito mais ciência que opinião. Por mais belo e elegante que esse tipo de menu seja, além de incrivelmente conveniente em telas de celulares, os resultados dos mais diversos testes A/B não lhe são nada favoráveis.

“É tentador confiar em controles de menu para simplificar designs de interfaces mobile — especialmente em telas pequenas”, já escreveu Luke Wroblewski, hoje diretor de produto de Google. “Mas esconder partes críticas de uma aplicação sob esses tipos de menus pode impactar sua utilização negativamente.”

Wroblewski era CEO da Polar, desenvolvedora de um app de pesquisas online, antes de ser contratado pelo Google. Certa vez, substituiu um menu segmentado que mostrava todas as três seções principais do seu aplicativo por um menu retrátil. As métricas mostraram uma queda brusca no engajamento diários dos usuários.

O mesmo aconteceu com o antigo app de TV social Zeebox, que foi relançado como Beamly em 2014. O tempo de engajamento com o produto caiu pela metade quando a equipe trocou as abas no topo da tela pelo menu hambúrguer.

Em 2014, a NBC News seguiu a moda do menu hambúrguer e escondeu suas categorias de notícias atrás do ícone, no topo esquerdo na página, acompanhado da descrição “menu”. Não vingou.

Adicionaram instruções de como utilizar o site e até coloriram o ícone de amarelo. No fim, voltaram a mostrar as seções de notícias, que hoje se encontram agrupadas num menu retrátil chamado Sections. Ainda não ideal a partir do ponto de vista da visibilidade, mas bem mais claro que três riscos posicionados no cabeçalho.

Cardápio variado

Significa que o menu hambúrguer deve ser evitado em todas as ocasiões? É óbvio que não. Ele pode ser uma péssima solução de navegação primária, por causa de sua baixa eficiência e descoberta, como vimos nos exemplos acima.

No entanto, se utilizado para levar o usuário a seções ou funcionalidades secundárias, aquelas não essenciais do seu aplicativo, o menu escondido é bem-vindo. Exatamente porque tudo de que seu usuário precisa para usar as principais funcionalidades do seu app já se encontra na primeira tela. Veja o Uber, que manteve o menu hambúrguer em seu design mais novo, à direita:

E quando a experiência básica do usuário depende de outras seções do seu aplicativo para ser minimamente completa e satisfatória?

Abas

As abas parecem estar se tornando o substituto padrão do menu hambúrguer, posicionadas tanto no topo quanto na borda inferior dos aplicativos.

Recentemente, o Spotify as adotou no novo design do seu app para dispositivos móveis. Em seu último redesign, o Airbnb também abraçou esse tipo de navegação, presente em apps como Instagram e Twitter há muito tempo.

Ao substituir o menu hambúrguer por abas, a Redbooth viu o número de sessões em seu app de gestão de tarefas e projetos da Redbooth mais que dobrar. Além de aumentos de 65% no número de usuários diários ativos e de 70% no tempo das sessões.

As abas funcionam porque não escondem a navegação primária do aplicativo, reduzindo a quantidade de toques do usuário, e indicam claramente a seção em que ele se encontra. Claro, desde que construídas adequadamente. Por isso, algumas regras básicas:

• a primeira aba deve ser sempre a de início, enquanto a ordem das seguintes depende de sua prioridade ou lógica de fluxo de uso;
• uma aba deve estar sempre ativa e destacada das outras;
• os ícones das seções, se utilizados, devem ter etiquetas – curtas, de uma linha – a não ser que sejam muito conhecidos pelo público;
• não deve haver mais de cinco abas.

Se precisar incluir mais seções na navegação primária do seu aplicativo, a última aba pode ser substituída por um botão de “mais” que, quando clicado, revela opções adicionais para o usuário.

A partir daqui, voltamos a esconder e dificultar o acesso ao conteúdo, ainda que não como em um menu hambúrguer, por isso a prioridade das abas é tão importante.

Menu retrátil

Em inglês, collapsing menu. É uma versão sofisticada do menu acima para quando há mais de cinco opções. Ele se adapta à largura da tela, mostrando o máximo de abas possível e agrupando, se necessário, o restante dentro do contêiner ativado pelo botão de “mais” .

É uma boa alternativa para sites de notícias ou e-commerces que vendam muitas categorias de produtos por exemplo. No cabeçalho do site da BBC, vemos esse tipo de menu em ação.

Mais uma vez, atente-se às prioridades das seções.

Navegação de rolagem

Às vezes, agrupar algumas seções num contêiner de “mais” pode ser comprometedor. Uma solução é listar todas as seções ou categorias de navegação primária, uma ao lado da outra, e permitir ao usuário navegar por elas rolando o menu para a esquerda ou direita.

O aplicativo de busca do Google aposta nessa opção. Quando retorna os resultados de uma pesquisa, mostra resultados de todos os tipos (All), mas podemos limitá-los a imagens, vídeos, livros, mapas e compras. Em sua versão mobile, o site do Medium também dispõe os temas de artigos mais discutidos dessa forma.

É muito importante dar dicas visuais para apontar o comportamento desse menu ao usuário, ou as abas fora dos limites da tela podem passar despercebidas. Muitos garantem que os textos aos extremos do ecrã estejam cortados, sugerindo uma continuação.

Para entender melhor cada uma dessas alternativas de navegação mobile e conhecer outras, recomendo a leitura do artigo iOs e Android: em busca da navegação perfeita, publicado aqui no iMasters.