Se você quer atenção, evite o menu de hambúrguer

Sabe aquele ícone de três riscos na lateral de um aplicativo? Pouca gente clica.

Por maiores que sejam as telas dos smartphones atuais, elas ainda são pequenas se comparadas às que vemos em notebooks, tablets e TVs. Provando que tamanho não é documento, mesmo assim o smartphone já supera outros dispositivos maiores em número de acessos e tempo conectado à Internet.

Responsive web design concept. Desktop computer, tablet pc, lap

Esse cenário impõe um grande desafio a quem desenvolve sites e aplicativos: como encontrar o equilíbrio na apresentação nestes diversos dispositivos e dispor os elementos de interface de forma otimizada pra cada um deles? Especialmente para serviços que nasceram na web do desktop e, em algum ponto dos últimos nove anos, migraram para smartphones, essa pergunta é das mais difíceis. Mas não é uma sem resposta como nos mostra, na prática, diversas empresas que fizeram tal transição com sucesso — casos de Facebook, Twitter e YouTube, para citar algumas.

Qual é o dilema, afinal?

A área fisicamente menor da tela do dispositivo móvel exige concessões e comprometimentos. A forma como se encara essa situação é daquelas em que se pode ver o copo meio cheio ou meio vazio: no primeiro caso, enxergamos uma oportunidade de eliminar recursos e funções supérfluas e focar no que realmente importa.

No segundo, corre-se o risco de que com essa priorização forçada aspectos importantes do software tenham que ser eliminados contra a vontade de quem o desenvolve. Entre os dois extremos existe uma área cinzenta onde sobram promessas de mitigar os problemas que cada abordagem traz. Uma delas tem nome de comida gostosa porque, com um pouco de abstração, a lembra visualmente: o menu de hambúrguer.

Menu de hambúrguer: é de comer?

Muitos não o conhecem por esse nome, mas especialmente após a explosão de popularidade dos smartphones é quase impossível não saber do que se trata. O menu de hambúrguer é um ícone formado por três linhas horizontais, usado em aplicativos e sites móveis, geralmente posicionado no canto superior esquerdo da tela.

menu-de-hamburguer

A influência desse tipo de dispositivo fez com que esse menu fosse adotado em interfaces projetadas para outros dispositivos, mesmo aqueles que dispõem de telas grandes — os sites da Gawker, por exemplo, empregam esse menu.

O propósito do menu de hambúrguer é abrigar opções, ou seja, condensá-las em um ponto específico (e pequeno) da interface a fim de economizar espaço visual. Ao ser tocado ou clicado, ele se expande, exibindo links, informações e outras coisas que não couberam na interface.

Um pouco de história

Apesar da popularidade atual, o menu de hambúrguer foi criado há algumas décadas, em 1981, por Norm Cox, designer que, na época, trabalhava no sistema operacional Xerox Star — famoso por ter sido supostamente espionado por Steve Jobs que, meses mais tarde, lançaria novos computadores da Apple com uma interface gráfica que lembrava bastante a da rival de Palo Alto.

“[O menu de hambúrguer] foi feito para ser tão simples quanto uma placa de trânsito, funcionalmente memorável e imitar o visual do resultado exibido em formato de lista. Com poucos pixels para se trabalhar, ele precisava ser bastante distinto e, ao mesmo tempo, simples. Acho que tínhamos apenas 16×16 pixels para renderizar a imagem.” — Norm Cox

Em entrevista recente concedida ao site Mic, Cox compartilhou várias curiosidades interessantes sobre o menu de hambúrguer. Havia, por exemplo, dois candidatos ao ícone: as três linhas horizontais que acabaram escolhidas, e uma seta apontando para baixo a fim de indicar o caminho onde as opções se expandiriam ao se clicar no botão. (Essa acabou descartada porque poderia confundir o usuário no sentido dele achar que se tratava de uma orientação, e não de um sinal ilustrativo.)

Menu de Hambúrguer Xerox Corporation

Cox acredita que sua criação foi reinventada na era do smartphone: “meu palpite é que algum designer de interface de usuário em algum lugar renderizou um símbolo com três linhas para representar em um menu popup e sequer tinha noção de sua existência original no Xerox Star,” disse à Mic. Faz sentido, visto que por duas décadas o menu de hambúrguer permaneceu esquecido e subutilizado. Ele voltou com o “boom” do smartphone e caiu no gosto dos designers por ser uma solução fácil a um problema recorrente e dos mais chatos de lidar.

Da mesma forma que esconde opções e atalhos, por trás do menu de hambúrguer também há uma grande discussão acerca da sua validade. Quando é válido usá-lo? Sequer devemos usá-lo? Muitos criticam esse artifício porque ele tem alguns problemas.

Não existe solução fácil

De dois anos para cá, o menu de hambúrguer, até então tido como uma saída fácil para comportar as muitas opções de software feito para telas maiores nas pequeninas do smartphone, passou a ser demonizado. Aplicativos populares como Foursquare e Facebook, que até então usavam-no, seguiram em frente abandonando ou diminuindo a proeminência do menu de hambúrguer em suas interfaces, provavelmente embasados pelo resultado de testes do tipo A/B.

Falar em menu de hambúrguer virou o equivalente a ir numa fashion week calçando Crocs.

Tamanho criticismo é justificado? Não, claro que não. O problema reside em encarar o menu de hambúrguer como um coringa, uma solução universal para os problemas de interface que se apresentam ao designer. Não existe receita de bolo — inclusive para isso. É mais trabalhoso quebrar a cabeça e distribuir, de forma coesa e atraente, elementos numa interface, mas o retorno que se tem em engajamento e satisfação do usuário geralmente vale o esforço.

Qual o grande problema desse menu?

Esses problemas começam pelo seu próprio comportamento: ao ser tocado, o que acontece? Depende. Ele pode deslizar a tela para o lado, abrir uma janela modal que ocupe a tela inteira ou revelar um menu suspenso simples. Essa inconsistência é ruim porque a imprevisibilidade experimentada em múltiplos aplicativos gera certa aversão no usuário. Aversão leva à preguiça e o resultado é que as funções por trás do menu acabam ignoradas.

O maior, aliás, é justamente esse: a diminuição tangível em engajamento das opções que ficam escondidas no menu de hambúrguer. Menos gente clica no menu. Aqui, vale aquele velho ditado que diz que “quem não é visto, não é lembrado”. O menu implica em um toque extra para acessar partes que o usuário não conhece de antemão. É de se imaginar que isso diminua os acessos a essas partes ocultas por padrão — e algumas pesquisas como esta, realizada pela Zeebox que acabou famosa, confirmam na prática tal suspeita.

A frequência semanal de acesso ao aplicativocom menu de hambúrguer foi de 2,5 vezes. Já com o layout que apresenta logo de cara as opções em um menu no topo, frequência foi de 3,9 vezes.

Nessa pesquisa, os desenvolvedores realizaram um teste A/B com um design baseado no menu de hambúguer e outro com os ícones dispostos no topo da tela. Eles observaram que todas as métricas foram menores no design do menu de hambúrguer. A frequência semanal de acesso com e sem o menu de hambúrguer saltou de 2,5 vezes para 3,9 vezes, um aumento de 56%.

O diretor de produtos do Google, ex-CEO e co-fundador da Polar, empresa adquirida pelo Google em 2014, tem mais exemplos de queda no engajamento devido ao uso do menu de hambúrguer. O gráfico abaixo, de quando ele decidiu adotar o menu para deixar a interface do aplicativo Polar mais limpa, diz tudo:

Segmented Control x Toggle Menu

Mais exemplos? O Redbooth, um software de gerenciamento de projetos, viu o número de usuários ativos diários saltar 65%, da noite para o dia, e o tempo de cada sessão aumentar em 70% apenas substituindo o menu de hambúrguer por abas na parte inferior da tela

Alternativa ao menu de hamburguer da Redbooth

Menu de hambúrguer Spotify

Maus exemplos são menos frequentes

Felizmente, maus exemplos são cada vez mais raros. O mais proeminente talvez seja o aplicativo do Spotify. Em seu menu de hambúrguer ficam escondidas as grandes áreas do aplicativo, locais por onde o usuário sempre, obrigatoriamente, transita ao utilizá-lo.

É desastroso, tanto que uma nova versão com abas (quase sempre uma ótima alternativa ao uso indiscriminado do menu de hambúrguer) está sendo liberada gradualmente após a empresa constatar, em um teste limitado no iOS, que os toques nas áreas que antes ficavam no menu de hambúrguer aumentaram em 30% quando elas viraram abas fixas, sempre visíveis, na parte inferior da tela, como mostra a imagem ao lado.

Quando, então, usar o menu de hambúrguer? Depende. Ele vem a calhar especialmente quando se intenciona interfaces mais limpas, com bastante espaço para respirar. Nesse sentido, pode ser uma boa implementá-lo, a fim de ocultar recursos que não são usados com muita frequência.

Boas práticas

O Tinder, por exemplo, coloca as suas configurações e definições do perfil escondidas em um menu de hambúrguer (que, apesar de não ser um hambúrguer, e sim o logo do aplicativo, se comporta como tal).

Menu de hambúrguer Tinder

Outro exemplo é o HERE Maps, um aplicativo de mapas e navegação curva-a-curva onde o importante é mostrar o mapa, o campo de busca e pontos de interesse — e todos esses ficam devidamente dispostos direto na tela inicial, sem que seja preciso recorrer ao menu; opções mais esporádicas, essas sim ficam guardadas ali, como deve ser.

O Facebook também se destaca, pois embora preserve o menu, tira dele as opções mais importantes (acesso ao feed, conversas e notificações).

Perceber padrões, observar o comportamento do usuário, iterar e se esquivar de modinhas, do “fazer porque todo mundo faz” são atividades constantes na vida do designer de interfaces. O menu de hambúrguer é um caso emblemático desse trabalho: a não ser por situações bem específicas em que ele seja justificável, o melhor mesmo é que o único hambúrguer disponível durante o desenvolvimento de um aplicativo seja aquele que você devora para saciar a fome, de preferência bem recheado e com um bom ketchup acompanhando.

Ainda em dúvida sobre o uso do menu de hambúrguer?

Há casos em que o uso do menu de hambúrguer é desaconselhável de pronto, mas em outros essa decisão é mais complexa. É preciso pensar como o usuário pensa, entender profundamente o produto e, se possível, contar com testes, análises e outras fontes de dados que embasam a tomada de decisões.

A One Day Testing pode lhe ajudar a determinar o melhor layout para o seu aplicativo e mais — como bugs impactam a experiência do usuário, que características dele está afastando ou desestimulando o usuário a completar ações, como preparar telas, formulários e outros elementos de maneira a otimizada as conversões.

Se você ficou com alguma dúvida, me mande um e-mail em julio.viegas@sofist.com.br ou ligue em (19) 3291-5321. Será um prazer ajudá-lo! =)