UX: Será que o ícone do menu hamburger é claro para todos os usuários?

A resposta é: NÃO. Muitos usuários ainda não sabem o que é o ícone menu hamburger e o que pode encontrar dentro dele. Quando se esconde a principal navegação de um site dentro de um menu hamburger, a descoberta do usuário para encontrar a navegação é cortado pela metade.

Esse estudo foi publicado recentemente pela Nielsen Norman Group.

O teste de usabilidade aplicado mostrava aos usuários os menus ocultos (com o ícone do hamburger) e menus visíveis (links na parte superior das páginas) e o resultado foi:

  • Navegação oculta é menos detectável do que a navegação visível ou parcialmente visível. Quando a navegação está escondida, os usuários são menos propensos a usá-la.
  • Navegação oculta fornece ao usuário uma experiência pior do que a navegação visível ou parcialmente visível, tanto em smartphone quanto desktop. Esses resultados avaliaram métricas de UX como: dificuldade, o tempo gasto e sucesso dos usuários na tarefa.
  • No desktop, quando se esconde a principal navegação dentro do menu hamburger a experiência e a descoberta do usuário é prejudicada mais do que no smartphone.
  • Escondendo a navegação afeta principalmente o conteúdo que não é acessível através de um link diretamente.

Tanto no desktop quanto no smartphone, as pessoas eram mais propensos a usar a navegação quando eram visível ou parcialmente visível.

  • No desktop as pessoas utilizaram os menus ocultos (menu hamburger) apenas em 27% dos casos, enquanto na navegação visível em 48% e parcialmente visível em 50%.
  • No smartphone, a navegação escondida foi utilizada em 57% dos casos (isso mostra que as pessoas estão mais familiarizadas com esse tipo de navegação no mobile) e a navegação parcialmente visível em 86% dos casos.

Por quê a navegação escondida é menos eficaz?

  1. Baixa relevância: Um pequeno ícone do menu hamburger é mais difícil de percebê-lo em uma tela grande.
  2. Informações com baixo significado: O ícone do menu hamburger não costuma dizer aos usuários o que está dentro dele.
  3. Trabalho extra: Para descobrir o que está dentro do menu, as pessoas devem expandi-lo. Isso aumenta o custo de interação dos usuários.
  4. Falta de normas: Navegação escondida é utilizada de diferentes maneiras nos sites. No mobile, os padrões estão começando a se formar, mas no desktop existem uma grande quantidade de variabilidade e inconsistência na navegação escondida.
  5. Baixa familiaridade: Especialmente no desktop, não é comum esconder a navegação e os usuários não esperam encontrar a principal navegação sob um menu expansível. Algumas pessoas podem ainda não estar familiarizados com o ícone do menu hamburger.

Recomendações de navegação

Desktop: Há um grande espaço na tela para exibir a navegação, então:

  • Evite utilizar a navegação escondida (menu hamburger) em interfaces desktop.
  • Deixe visível as opções da navegação, geralmente na parte superior da página ou no lado esquerdo.

Mobile: Não há nenhuma regra rígida, algumas sugestões são:

  • Se o site tem 4 ou menos links de navegação, exiba eles como links visíveis.
  • Se o site tiver mais de 4 links de navegação a solução razoável é ocultar alguns deles. A penalidade de usabilidade imposta pela navegação escondida (menu hamburger) está presente no mobile, porém é menor do que no desktop.