Menus de hambúrguer no design do site

Quem usa a internet provavelmente já viu dezenas de exemplos de menus de hambúrguer na internet. Este ícone simples de três linhas está entre os botões mais reconhecíveis atualmente. Muitos sites estão usando para ocultar elementos de navegação geralmente robustos e economizar espaço. No entanto, apesar de sua utilidade, os menus de hambúrguer no design de sites ainda estão entre as opções de design da web mais discutíveis . Para alguns, é uma solução genuína que deve encontrar seu caminho em todos os designs responsivos. Para outros, é um efeito colateral infeliz que vem de uma má interpretação do projeto estrutural prático.

Uma introdução aos menus de hambúrguer no design de sites

Não exclusivamente, mas os menus de hambúrguer geralmente são encontrados em sites e aplicativos responsivos quando se ajustam a telas pequenas. Quer estejam do lado esquerdo ou direito, designers e desenvolvedores profissionais usam a mão de hambúrguer para economizar espaço valioso. Essa é uma solução popular porque oculta a navegação principal para deixar mais espaço para o restante do conteúdo . Mas, nem todos pensam que é uma solução adequada. Muitos afirmam exatamente o contrário.

Para ajudá-lo a entender melhor o menu de hambúrguer, aqui, discutiremos:

• O que são menus de hambúrguer
• O conceito de menus de hambúrguer no design do site
• A polêmica por trás disso
• Implementação alternativa
• Prós e contras gerais dos menus de hambúrguer no design do site

O que são menus de hambúrguer?

Simplificando, um menu de hambúrguer é uma alternativa simples e menor para grandes barras de navegação . Ele basicamente serve como uma gaveta onde você pode colocar tudo, desde a navegação que atrapalha seu site. Os menus de hambúrguer geralmente se parecem com três linhas umas sobre as outras. O nome vem de sua óbvia semelhança com hambúrgueres.

Tudo começou em 1981. na estação de trabalho Xerox Star. Norm Cox, o designer de interface gráfica do usuário da época, criou um ícone para abrir uma lista de elementos ocultos. A intenção era fornecer uma solução alternativa de economia de espaço para as longas listas de opções . Algo semelhante ao menu conceitual do botão direito do mouse em computadores desktop. Mas, até 2009, o menu de hambúrgueres não experimentou muita glória. Somente quando o Facebook e alguns outros sites o introduziram novamente, o menu de hambúrguer começou sua jornada. Foi uma solução quase perfeita para economizar espaço precioso na tela nos dispositivos móveis então emergentes.

Mas, foi?

A eterna discussão sobre o menu de hambúrguer

A intenção do criador original era criar algo simples, mas eficaz. Um pequeno botão que reduzirá a desordem seguindo o mesmo princípio por trás do menu do botão direito. Era para ser semelhante, memorável e fácil de usar. E é, mesmo em sua forma atual, para a qual não foi originalmente destinado.

No entanto, nem todos compartilham o mesmo entusiasmo quando se trata de menus de hambúrguer . Muitos designers criticam porque esconde a parte mais importante da navegação do site. Consequentemente, os visitantes terão dificuldade em encontrá-lo. Eles recomendam usar o menu Hambúrguer apenas quando houver mais de quatro elementos de navegação no menu. Por outro lado, essas alegações podem mudar no futuro, já que a maioria das pessoas já está se acostumando com a aparência e o funcionamento dos menus de hambúrguer.

Uso alternativo e implementação

Além da regra dos “quatro elementos” , existem outras sugestões sobre como melhorar a usabilidade do cardápio de hambúrgueres.

• Combine o menu de hambúrguer com outros recursos . Por exemplo, você pode colocar a função de pesquisa e o menu de hambúrguer um ao lado do outro.
• Use espaços reservados de diferentes formas , bordas e cores para tornar o “hambúrguer” mais distinguível.
• Encontre um posicionamento alternativo que não seja necessariamente um dos cantos.
• Crie um menu de hambúrguer flutuante com uma posição fixa assim que os visitantes começarem a rolar a página.

A ideia é fornecer um design limpo, mas distinto, conveniente para usuários móveis, independentemente do tamanho da tela do dispositivo.

Geral Prós e contras dos menus de hambúrguer no design do site

Do ponto de vista do UX (experiência do usuário), os menus de hambúrguer podem ser uma faca de dois gumes. Embora possa funcionar na maioria das situações, em outras pode criar confusão. Para entender quando usá-lo, é melhor verificar todos os Prós e Contras dos menus do Hambúrguer.

Prós:

• O menu de hambúrguer reduz a confusão – funciona quando mais importa. O uso adequado do espaço às vezes pode significar tudo para sites e aplicativos móveis. Considerando o tamanho da tela à sua disposição, qualquer coisa que possa lhe dar mais espaço é bom. Além disso, muitos elementos na tela só podem distrair os visitantes de prestar atenção ao conteúdo certo.
• Mantém a navegação compreensível – Quase todo mundo hoje entende para que é usado quando vê o menu de hambúrguer. Somos seres visuais e perceber um ícone que se parece com três linhas horizontais em uma coluna é fácil. Especialmente se nos lembrar de uma das refeições rápidas mais favoritas. Basta pensar em quantos ícones e logotipos de marcas diferentes você conhece pelo nome.
• Pode ser uma ótima opção para manter o elemento secundário de navegação fora do caminho – Não existe uma regra que diga que você precisa colocar toda a sua navegação no menu do hambúrguer. Muitas vezes, uma das melhores soluções é deixar os elementos de navegação principais no site e colocar todas as outras opções secundárias no menu de hambúrguer. Isso basicamente tira o melhor dos dois mundos e ainda serve ao seu propósito.

Contras:

• A navegação importante não é visível – Quando você transforma sua navegação em um menu de hambúrguer, você a torna quase invisível. Algumas pesquisas confirmam que o engajamento do site pode cair consideravelmente devido a esse motivo. Em outras palavras, algumas pessoas não clicarão mais porque não está chamando sua atenção imediatamente.
• Nem todo mundo entende – menos provável, mas ainda há visitantes que encontram os menus de hambúrguer pela primeira vez. Pode parecer familiar, mas não suficientemente motivador ou autoexplicativo para fazê-los realizar a ação. Eles vão deixá-lo como está porque não há outras indicações sobre o que é usado. Isso está mudando, mas às vezes pode não ser intuitivo. Especialmente quando os designers usam muita liberdade e a tornam completamente abstrata. Ou o próprio “hambúrguer” não é visualmente distinto o suficiente.
• O menu de hambúrguer requer “esforço” adicional para usar – Embora possa parecer bobo, mas, tecnicamente, um menu de hambúrguer leva alguns passos a mais do que a navegação típica. Sem mencionar o fato de que nem todos podem alcançá-lo com os polegares ao segurar seus telefones em uma mão.

Seja qual for sua opinião subjetiva, nunca se esqueça de considerar qual é a melhor opção para seus usuários. Você pode gostar de menus de hambúrguer, mas, ainda assim, acaba não os usando se as circunstâncias não parecerem adequadas. Ou você pode odiá-lo completamente, mas pode ser a melhor solução para seu site ou aplicativo. Lembre-se de que a aplicação correta da hamburger manus no design do site pode ser situacional e diferente de caso para caso . Para ver se é para você, faça alguns testes A/B e veja o que seu público pensa sobre isso.