Menu hambúrguer: exemplos, prós e contras no e-commerce

Com cada vez mais pessoas usando o celular para fazer compras online, é essencial que sua loja virtual seja responsiva e fácil de usar em dispositivos móveis. O problema é que o espaço na tela do celular é limitado. Se os elementos de navegação estiverem amontoados ou confusos, é provável que os visitantes desistam e comprem em outro lugar.

É por isso que muitos sites e aplicativos recorrem ao canivete suíço da navegação móvel: o menu hambúrguer. O simples ícone de três linhas se tornou o símbolo internacional para "mais opções de navegação aqui", condensando o menu de um site em um único botão.

Veja a seguir mais sobre o poder e as armadilhas do menu hambúrguer: sua história, características e como usá-lo de forma eficaz no design do seu site mobile.

O que é um menu hambúrguer?

Durante anos, o método padrão de navegação de sites foi o menu horizontal: uma linha de palavras para cada categoria, estendida ao longo do topo da tela. Mas, com a explosão da navegação móvel no final dos anos 2000 e início dos anos 2010, impulsionada pelos avanços na tecnologia dos smartphones e na conectividade à internet móvel, os web designers precisavam de uma solução que aproveitasse melhor o espaço.

Foi aí que surgiu o menu hambúrguer (☰), um ícone simples formado por linhas horizontais paralelas empilhadas (o pão, digamos) com uma linha no meio (o hambúrguer em si), que permite aos usuários expandir e recolher as opções de navegação conforme a necessidade. Normalmente, você encontra o botão do menu hambúrguer no canto superior esquerdo ou direito do site ou aplicativo.

A história do menu hambúrguer

O menu hambúrguer, na verdade, veio antes da popularização dos dispositivos móveis. No início dos anos 1980, o designer Norm Cox o criou para a interface da estação de trabalho Xerox Star, precursora da interface original do Apple Macintosh. Cox queria um ícone simples e reconhecível para abrir uma lista de itens acionáveis com um clique.

Após seu lançamento, o menu hambúrguer teve uso limitado e ficou praticamente esquecido até a disseminação dos celulares por volta de 2009. A necessidade de um jeito eficiente de apresentar o menu em telas pequenas sem sobrecarregar os usuários fez com que o ícone compacto do menu hambúrguer se tornasse a solução ideal.

A popularidade do menu hambúrguer foi consolidada quando o X (antigo Twitter) e outros aplicativos de celular o adotaram, seguidos pelo seu uso no aplicativo de gravação de voz do iPhone 3GS com o iOS 4, consolidando as três linhas como um símbolo popular de navegação.

Vantagens e desvantagens do menu hambúrguer

Os menus hambúrguer são ideais para dispositivos móveis, no entanto as barras de navegação e os menus com abas podem atender melhor aos usuários de computador. Veja por quê:

Vantagens

O tamanho compacto do ícone hambúrguer é seu maior atrativo. Ele economiza um espaço precioso na tela e organiza o design do site, especialmente em telas menores, como as dos smartphones. Ao clicar ou tocar no ícone hambúrguer, as opções de navegação do site são reveladas, seja por meio de um menu deslizante, de um menu suspenso ou de uma sobreposição em tela cheia. Isso pode melhorar a experiência do cliente em dispositivos móveis.

Desvantagens

Embora a economia de espaço seja uma vantagem inegável, alguns argumentam que os menus hambúrguer em navegadores de computador podem prejudicar a descoberta de conteúdo. Se os usuários não estiverem familiarizados com o ícone do menu, podem não notar que ele está ali, deixando passar conteúdos importantes ou opções de navegação do site.

Para resolver isso, considere implementar um design responsivo com estruturas de menu que se adaptam para diferentes tamanhos de tela. Um site pode exibir uma barra de navegação horizontal tradicional em computadores, enquanto em dispositivos móveis é exibido o menu hambúrguer para economizar espaço, deixando as opções ocultas, mas ainda acessíveis.

Exemplos reais: menus hambúrguer na prática

Na maior parte dos casos, os sites na versão para celulares apresentam o menu hambúrguer, enquanto no computador ele é exibido em outro formato. Não é regra, mas costuma ser algo comum. Veja aqui dois exemplos de e-commerce que usam o menu hambúrguer de forma eficaz.

Linus

A Linus preza pelo simples com um menu hambúrguer padrão, de três linhas, no topo do seu site na versão mobile. Ao clicar nele, uma lista de links é exibida no lado esquerdo, incluindo itens como Produtos, Coleções e Sobre Nós. O link Produtos tem uma pequena seta ao lado, sugerindo que há mais opções ao tocar.

O site para desktop da Linus também apresenta um menu hambúrguer, o que permite que uma fotografia de fundo em tela cheia e promoções atraentes assumam o protagonismo. Na versão móvel, o menu hambúrguer entra como uma sobreposição total, com o ícone de X para que o usuário possa ocultar e voltar à página em que estava navegando. O design do menu hambúrguer da Linus é:

• Limpo. Além de deixar as páginas focadas nos produtos e coleções, as opções exibidas ao clicar no menu hambúrguer são bem planejadas para que o usuário encontre com mais facilidade o que busca.
• Familiar. Ao padronizar o menu hambúrguer para todos os dispositivos, além dos três riscos horizontais já serem comuns na internet, deixa a interação com o site alinhada em qualquer tela.
• Deixa o palco para os produtos. Ao esconder as opções do menu por trás do botão, as fotografias dos produtos ganham mais destaque.

PINC

O site da PINC é um ótimo exemplo de como um site para computador pode ser diferente da sua versão otimizada para dispositivos móveis. 

No computador, não há menu hambúrguer; no entanto, no celular, ele aparece no canto superior esquerdo, com linhas horizontais de tamanhos diferentes. Ao tocar nele, surge uma caixa de busca e submenus de categorias de produtos da parte inferior da tela. Para voltar à página original, basta arrastar o menu para baixo.

O menu hambúrguer da PINC funciona bem porque prioriza o que mais importa: mostra produtos e a página Sobre Nós primeiro. Além disso, outros pontos fortes incluem:

• Credibilidade: O site gerando confiança mostrando no menu as páginas de Prescritores e Revenda, com foco em negócios e B2B. 
• Aproveita para engajar: O uso do menu para levar os visitantes para as redes sociais também funciona, ao invés de deixar os links escondidos no fim da página.

Dicas para o sucesso do menu hambúrguer

As seis dicas a seguir podem ser úteis para aprimorar a experiência do usuário e melhorar as taxas de conversão em sites que adotam o menu hambúrguer:

Deixe visível

Na maioria dos casos, o menu hambúrguer é pequeno. Garanta que ele seja fácil de localizar e que não fique perdido quando sobreposto às cores do fundo. Coloque-o no canto superior esquerdo ou direito da tela, onde os usuários costumam olhar, e mantenha sempre na posição em todas as páginas do seu site.

Use o ícone hambúrguer padrão

Utilize as três linhas horizontais paralelas (☰), amplamente reconhecidas, para o seu menu hambúrguer. Esse ícone é o padrão visto em diversos sites e apps, por isso a maioria dos usuários entende instantaneamente para que servem.

Priorize a hierarquia dos itens do menu

Organize os itens do menu de forma lógica. Você pode adicionar uma caixa de busca e, em seguida, classificar as categorias ou páginas mais acessadas de cima para baixo.

Otimize para dispositivos móveis

Garanta que o seu menu funcione bem em todos os dispositivos móveis e telas de toque. Os itens do menu devem ser grandes o suficiente para serem tocados facilmente com o dedo.

Adicione animação e efeitos visuais

À medida que o usuário interage com o menu, efeitos sutis oferecem pistas visuais. Por exemplo, as linhas podem girar e se transformar em um X ou + para indicar a abertura e o fechamento. As linhas podem mudar de espessura ou se expandir sutilmente. Efeitos de esmaecimento e deslocamento acrescentam profundidade conforme o usuário interage. Você pode mudar a cor ou fazer uma leve animação para a opção selecionada.

Teste e peça feedback

Antes de compartilhar o seu menu hambúrguer com o mundo, teste-o com usuários reais. Observe como eles interagem, se o ícone é encontrado facilmente e reúna feedback para aprimorar a UX na sua loja virtual.

Como usar um menu hambúrguer com outras ferramentas de navegação

Às vezes, a melhor forma de melhorar a usabilidade de um site é combinar diferentes botões e menus. Cada ferramenta tem seus pontos fortes e fracos, mas, quando usadas em conjunto, podem criar uma navegação mais fluida e eficaz.

Os web designers de e-commerce podem usar combinações que facilitam a descoberta de produtos, com acesso claro e direto ao carrinho e ao processo de checkout. Verifique se todos os elementos de navegação podem ser selecionados facilmente em telas sensíveis ao toque. Teste diferentes combinações para ver o que funciona melhor para o seu público-alvo:

• Navegação no topo e hambúrguer. Use a navegação no topo para categorias e funções essenciais, como loja e carrinho, e reserve o menu hambúrguer para acessar recursos de navegação acessados com menos frequência, como Contato, Atendimento ao Cliente e Políticas. Isso mantém a tela principal limpa, mas ainda oferece acesso rápido às páginas necessárias.
• Navegação em abas e hambúrguer. Use a navegação em abas dentro de uma página de categoria de produtos para filtrar ou ordenar itens, como Novidades, Mais Vendidos e Ordenar por Preço. Isso permite que os usuários filtrem rapidamente a busca por produtos depois de usar o menu hambúrguer para a navegação geral do site.
• Cabeçalho fixo e hambúrguer. O cabeçalho fixo exibe links para as principais categorias e permanece no topo da tela enquanto você rola a página. O menu hambúrguer pode ser usado para páginas secundárias.

Por exemplo, o site da Fly by Jing usa um menu hambúrguer para seleções amplas de menu, mas a própria página da loja usa um menu em abas com quatro opções ("Molhos", "Kits", "Despensa" e "Merch") para levar o visitante direto às coleções de interesse.