Como resolver o problema do ícone do hambúrguer
O ícone do hambúrguer - três pequenas barras usadas para indicar um link para um menu - é uma das técnicas mais controversas da Web no momento. Designers, nos dizem, todos odeiam isso; clientes, dizemos a todos, odeiem também. Por que então, está em todo lugar?
O ícone do hambúrguer é facilmente escalável e se encaixa perfeitamente em uma grade de pixels. Originalmente, era um ícone de lista que foi pressionado para sua função atual, mas como um menu é simplesmente uma lista de opções, é semanticamente correto usar o item da lista dessa maneira.
Tem havido uma enorme quantidade de debates, testes A / B, comentários sobre blogs e estudos de usuários sobre o assunto, mas esses estudos quase sempre se concentram no design de aplicativos. Quando o ícone do hambúrguer é usado em web design, isso indica um problema muito mais significativo.
O problema com o ícone do hambúrguer
Há muitos designers que questionam o valor do próprio ícone do hambúrguer. É freqüentemente visto como um ícone de estilo do iOS, embora tenha sido usado dessa maneira antes que a Apple o adotasse.
Existe, de fato, uma grande quantidade de evidências conflitantes sobre se o ícone do hambúrguer é utilizável como uma indicação de um menu. Alguns designers argumentam que o ícone é facilmente reconhecido por um grupo demográfico mais jovem, outros sugerem que um grupo demográfico mais velho o reconhece se for alfabetizado na web. A única conclusão que podemos realmente extrair dessa evidência é que os testes de usabilidade se mostraram inconclusivos, com testes paralelos retornando resultados conflitantes.
O que é universalmente aceito é que os usuários não reconhecem o ícone do hambúrguer como um único link - provavelmente porque ele foi projetado para parecer um grupo de links, em vez de uma única coisa. Algo que é suportado é que cercando o ícone do hambúrguer com uma borda, ou dando-lhe um fundo, para que pareça mais como um botão - ouso dizer, mais skeuomorphic - resultará em mais cliques.
Mais problemas com o ícone do hambúrguer
Além do design do próprio ícone, a abordagem de usar um ícone de hambúrguer também está repleta de problemas.
Em primeiro lugar, e talvez o mais significativo, o ícone do hambúrguer adiciona uma ação extra à sua navegação; Quando deve levar um clique para chegar a uma determinada página, agora serão necessários dois. A regra prática para web designers sempre foi um máximo de três cliques (sempre que possível), longe de resolver um problema de navegação, a técnica do ícone do hambúrguer simplesmente troca um problema por outro. Claro, isso não é apenas um problema para o ícone do hambúrguer, é um problema para qualquer navegação disposta dessa maneira. Você pode usar a palavra 'Menu' no lugar do ícone do hambúrguer e você terá a mesma obstrução, a diferença é que o ícone do hambúrguer não pode ser usado de outra maneira.
A técnica do hambúrguer também esconde seu conteúdo. Do ponto de vista da experiência do usuário, os usuários não precisam realizar uma ação para descobrir quais ações podem realizar. É muito fácil esquecer de 'compartilhar no Twitter' ou 'ir ao Checkout', quando essas opções não estão imediatamente à sua frente. Os usuários simplesmente não irão procurar por um link que eles não sabem que existe.
Finalmente, a técnica do ícone do hambúrguer esconde o estado atual do seu site e a posição do usuário nele. Os estados inativos em um menu fornecem informações contextuais a um usuário que a técnica do ícone do hambúrguer obscurece.
O que o ícone do hambúrguer faz bem?
Dado que o ícone do hambúrguer é universalmente odiado e resulta em uma série de problemas, por que é usado em todos os lugares?
Na minha experiência, certamente entre certos dados demográficos, o ícone do hambúrguer chegou recentemente ao ponto de ser facilmente reconhecido. Estudos que refutam que tendem a ser um ano ou mais de idade e um ano é um longo tempo na interweb.
Na verdade, o ícone de link é muito mais reconhecível do que o ícone de link ou o ícone de compartilhamento , cujas formas definitivas ainda precisam surgir. O ícone do hambúrguer é consistente em qualquer número de designs diferentes.
O mais importante é que o ícone do hambúrguer faz o que se propõe a fazer: ele nos poupa uma tonelada de imóveis na tela. Se um cliente lhe apresentar uma lista de itens de gagillion que precisam ser adicionados a um menu, alterá-los para fora da tela e vinculá-los a eles é uma maneira bruta, mas eficaz de criar espaço para o conteúdo que o cliente também deseja.
Eu gostaria de dizer que o ícone do hambúrguer resolve o problema melhor do que outras soluções, mas não é verdade. Em vez disso, direi que o ícone do hambúrguer resolve o problema menos do que outras soluções.
A raiz do problema
O ícone do hambúrguer tende a ser empregado porque os projetistas - ou, mais frequentemente, os clientes - não estão totalmente comprometidos com uma abordagem baseada em dispositivos móveis. Eles querem um site 'regular', mas apertaram o telefone da avó.
Os opositores do ícone do hambúrguer tendem a substituí-lo pela palavra "Menu" - ao fazê-lo, eles estão totalmente ausentes do ponto. O ícone do hambúrguer adquiriu, agora ou não, o seu significado agora, mas os usuários que entendem para que serve o botão não resolvem o maior problema, que é que ocultar a navegação, ocultar as opções dos usuários, é um ato terrível de auto -sabotar.
Em suma, o ícone do hambúrguer é um sintoma do nosso fracasso coletivo em abraçar de todo coração todos os aspectos da abordagem do primeiro celular.
Uma solução melhor
Para resolver a questão do hambúrguer, temos que aceitar que a Web como a conhecemos não funciona. A ascensão da web móvel significa muito mais do que reduzir o número de colunas que usamos e soltar alguns dos arquivos de imagem mais pesados.
A web móvel é usada de uma maneira diferente da web antiga. A Web para dispositivos móveis existe no contexto de aplicativos dedicados e os usuários esperam que a Web seja experimentada de maneira semelhante.
O aplicativo do Facebook trocou o famoso ícone do hambúrguer por uma barra de guias e, como resultado, obteve conversões aprimoradas. Mas o Facebook fez algo muito mais significativo do que os designs de menu de troca. Recentemente eles lançaram o aplicativo Messenger, e o grande problema é que eles já tinham um aplicativo perfeitamente funcional e popular com o qual poderiam ter integrado as mensagens. O Facebook compartimentou suas funções, concentrando o papel de cada aplicativo em que chegaram a dois aplicativos simples, em vez de um complexo. A funcionalidade reduzida resulta em um conjunto reduzido de opções de menu e menos necessidade de um menu de hambúrguer.
Bons aplicativos são altamente focados e evoluíram dessa maneira por meio de testes de usuário muito mais rigorosos do que os da Web estão sujeitos. Para criar uma experiência no estilo de aplicativo, precisamos simplificar nossos sites, simplificar novamente e simplificar um pouco mais. Se necessário, divida sua arquitetura em pedaços de tamanho médio, microsites quase. Quando apresentamos aos nossos usuários um conjunto simples de opções, o problema de um menu complexo nunca surge.
Usar o ícone do hambúrguer é como colocar um band-aid em uma lesão: remendá-lo, mas por baixo de algo ainda está quebrado.
Somente se adotarmos plenamente uma abordagem mobile-first e aplicá-la não apenas ao nosso design, mas também ao nosso conteúdo e à nossa arquitetura de informações, consignaremos o menu de hambúrgueres à história.
Imagem / miniatura em destaque, usa Imagem de hambúrguer via Mononc 'Paul