Raras são as pessoas que nunca tiveram problema com um site que usava menu de hambúrguer. Esse ícone foi uma revolução na década de 80, mas hoje é dificilmente conhecido por seu nome verdadeiro, e muitas vezes não chega nem a ser percebido na página. Se você ainda não se recordou, o menu de hambúrguer é aquele ícone de três linhas empilhadas, geralmente encontrado nos cantos superiores da tela, que serve para esconder o menu de navegação de um site e deixar a página mais “limpa”.
Esse ícone foi criado ainda na década de 80, e foi usado na primeira interface gráfica do mundo, a da Xerox Cox. Dentre as muitas teorias criadas para explicar a sua criação, acredita-se que ele tem relação com o símbolo matemático de barra tripla, que significa “equivalência absoluta”. Seja por questões estéticas ou de personalização, o ícone que havia caído em desuso voltou a aparecer, principalmente com o surgimento dos smartphones que necessitavam de uma tela mais compacta, sem espaço para grandes menus detalhados. No entanto, o que parece ser ideal para a tela pequena de um smartphone acaba sendo um problema de navegação para sites em desktop, como mostrou uma pesquisa realizada recentemente pela Nielsen Norman Group.
Mas afinal, porque evitar o menu hambúrguer na navegação principal?
Para quem não está habituado com sites que fazem o uso do menu de hambúrguer, esse ícone pode parecer apenas mais um elemento gráfico usado para melhorar o site. No entanto, uma pesquisa realizada pela Nielsen Norman Group mostrou que esse ícone possui muitos pontos negativos. Foi aplicado um teste de usabilidade em sites que usavam o menu oculto e o menu de hambúrguer, e o resultado mostrou que:
- A navegação oculta é menos perceptível e por isso os usuários estão menos propensos a usá-la;
- Independente do dispositivo usado (desktop, smartphone e tablet), a navegação oculta é associada com uma pior experiência por parte do usuário;
- Esconder a navegação torna o conteúdo menos visível e acessível.
Mas se, ainda assim, você acredita que o menu de hambúrguer, juntamente a navegação oculta, pode ser uma boa opção em alguns casos, podemos citar alguns motivos que tornam essa forma de navegação menos eficaz:
- O ícone possui uma baixa relevância na tela: o menu de hambúrguer não fica evidente na tela e muitas vezes passa despercebido durante a navegação;
- Para saber se o que você precisa está lá, você tem que abrir o menu: o usuário não sabe se o site possui o que ele está procurando, pois só consegue essa informação ao abrir o menu hambúrguer, que muitas vezes passa despercebido pelo usuário, que acaba não encontrando o que precisava.
- Não há um padrão de onde deixar a navegação escondida: usuários que não estão habituados com o site podem ter dificuldades para localizar o menu hambúrguer em desktops pois não há um padrão de onde esse ícone deve ser colocado.
Usando o menu de hambúrguer como navegação secundária
O problema não é exatamente o menu de hambúrguer, mas sim ocultar a navegação atrás dele. O menu de hambúrguer pode ser usado como uma estratégia de navegação secundária, otimizando a página de uma forma correta. Se ele for usado como uma forma de navegação secundária ele pode ser uma estratégia para ocultar informações que não são indispensáveis em um primeiro momento, podendo até mesmo melhorar a usabilidade do site.
Um exemplo clássico disso com o qual estamos familiarizados é a interface do aplicativo da Uber. Quando o usuário abre o aplicativo da Uber ele se depara com as informações essenciais para solicitar o serviço:
- Mapa com sua localização atual e um campo para inserir o endereço de destino;
- Preço da viagem de acordo com a modalidade de Uber solicitada.
Com essas informações o usuário é capaz de chamar um Uber, sem a necessidade de um menu secundário para solicitar o serviço principal. No entanto, no canto superior esquerdo da tela há um menu hambúrguer onde estão disponíveis outras opções importantes para o usuário, mas que não são essenciais para o serviço principal: solicitar um carro de transporte. Dessa forma, o menu hambúrguer é um complemento muito útil para o serviço principal, mas não esconde as informações necessárias, como ocorre na navegação oculta.
Outro exemplo clássico de aplicativo que faz bom uso do menu hambúrguer é o Nubank. Ao abrir a tela inicial do aplicativo o usuário se depara com o valor da fatura de seu cartão de crédito, o saldo de sua conta corrente, e algumas opções essenciais, como as de PIX, de pagamentos de boletos e outras funcionalidades essenciais da conta. No canto superior direito da tela está disponível um menu secundário, onde o cliente tem detalhes sobre sua fatura, seu limite de crédito, seu rendimento mensal e outras informações muito importantes, mas que são complementares às informações já fornecidas na página inicial.
Se por um lado, um menu de navegação oculto pode não fornecer informações suficientes para o usuário, por outro, um menu visível com excesso de informações e elementos pode servir de distração para o usuário e dificultar a sua navegação. Nesses casos, o ideal é o equilíbrio: um menu de navegação que tenha as informações necessárias, mas sem excessos de elementos. No entanto, nunca se esqueça de levar em consideração o contexto do uso do menu de hambúrguer e a finalidade da página.
Outros tipos de menu para navegação secundária que você pode experimentar
O menu ideal dependerá da finalidade do site, por isso os principais modelos que podem ser usados são:
- Menu de hambúrguer;
- Kebab Menu (aquele menu com três pontos empilhados);
- Doner Menu (parecido com o hambúrguer, mas os traços não são equiláteros);
- Bento Menu (onde nove quadrados compõem um quadrado maior);
- Meat Balls Menu (uma linha composta por três pontinhos);
- Double Hamburguer Menu (onde são posicionados dois menus de hambúrguer, um de cada lado).
Não se esqueça de sempre testar a usabilidade desses menus, assim será possível identificar qual mais se adequa às necessidades de sua interface.
