Um pouco de história

O ícone foi criado em 1980 pelo designer americano Norm Cox para a Xerox Star, a primeira interface gráfica de usuário do mundo.

Existem algumas teorias sobre suas origens, sendo uma delas o símbolo de matemática conhecido como “barra tripla”, que significa equivalência absoluta. Outras explicações são que as “barras” pretendiam se parecer com gavetas de um armário de arquivo.

Após o Xerox Star, o ícone desapareceu por algum tempo.

O que marcou seu retorno? Alguns dizem que a Apple foi o maior motivo para o ressurgimento. O smartphone e a necessidade de uma tela compacta mudaram o jogo. Steve Jobs já era um fã das ideias da Xerox e o resto é história.

Vamos ao que interessa…

O ícone de três linhas empilhadas (dois pães e a carne no meio) costuma representar um menu. Um toque no ícone e… SHAZAM! — é revelada as opções de navegação disponíveis. Um tempo atrás isso deu uma discussão com vários artigos contra e a favor — mais contra do que a favor.

Se você não leu nenhum, irei indicar um artigo da NNGroup — Hidden Navigation Hurt UX Metrics e outro de Luke Wroblewski — Obvious Always Wins — gerente de produto do Google.

Em resumo, não se trata do ícone em si, mas sim o ato de ocultar a navegação atrás dele. No entanto, em alguns casos, o menu de hamburguer pode ser uma boa solução.

Menu de hambúrguer como navegação secundária

Não é recomendado utilizar essa opção como navegação principal.

Como é sabido de todos, a principal desvantagem do menu de três linhas é a ocultação da informação. Logo, não é recomendado utilizar essa opção como navegação principal.

Mas, ao projetar a navegação secundária, essa solução pode ser uma mão na roda. Com as principais opções disponíveis na tela, o menu de hambuguer pode ser um bom local para toda a navegação secundária.

Vamos ver isso na prática com a tela principal do Uber por exemplo:

O mapa e a pesquisa são dois elementos de navegação importantes para esta tela — são visíveis o tempo todo. As funções básicas para chamar o carro estão na tela principal também.

As opções secundárias como Pagamento, Histórico, Configurações etc podem ser escondidas atrás do menu . Por que? É improvável que esses recursos sejam utilizados sempre que uma pessoa abre o aplicativo. O menu não distrai os usuários para a tarefa principal e ainda assim, é uma boa opção de acesso aos recursos secundários.

Segundo exemplo é o Nubank. Quais as principais informações que sempre estão visíveis? !uais ações que estão sempre disponíveis?

1. Saldo (crédito disponível), fatura atual e próximas faturas
2. Limite de crédito (ajuste de limite total), bloqueio do cartão e botão para gerar boleto (código de barras)

E o resto? Menu no lado superior do lado esquerdo.

Menos elementos de navegação significam menos distrações quando o usuário interage com o aplicativo. Minimizar a navegação concentra a atenção do usuário ao completar a tarefa.

No geral, se você optar usar o menu de hambúrguer, considere a regra 80/20  –  80% das consequências advêm de 20% das causas, e 80% dos resultados advêm de 20% de esforço. As opções que você vai esconder no menu de hambúrguer estão 80% abaixo do uso regular? Se sua resposta for sim, então colocá-los em um menu de hambúrguer vai ser uma ótima solução.

Eu explico essa regra — 80/20 — no meu artigo sobre Experiência Onboarding.

Concluindo

O contexto é mais importante.

Toda decisão de design sempre tem que obedecer um contexto no objetivo do aplicativo. Não há padrão “bom” ou “ruim”. O contexto é que importa.

Referência

• When To Use a Hamburger Menu
• History of the Hamburger Icon in Your Navigation
• Obvious Always Wins
• How Apple Borrowed iOS’s Hamburger Icon From Xerox PARC

Gosto de ouvir opiniões. Se tiver alguma, estamos aí!