O que é o ícone hamburguer?
É um ícone de três linhas, inventado no princípio dos anos 80. Muito velhinho portanto. Estamos habituados a vê-lo principalmente na navegação em suporte móvel porque é compacto é simboliza as linhas de menu que aparecem quando se toca ou clica nele.
O ícone é muito menos saboroso.
Porquê para todos?
Porque este ícone, que até é prático quando não temos muito espaço para ter um menu de navegação extenso, está a invadir tudo: é como a erva das pampas, pouco a pouco apodera-se de tudo.
Não faz sentido, quando desde há anos temos a possibilidade de ter sites responsive que são específicos para três tamanhos diferentes - telemóvel, tablet e desktop - ter um ícone para compactar num site desktop o que não precisa de ser compactado.
Em Janeiro de 2016 o tamanho de ecrã mais utilizado é de 1366x768 com o 1920x1080 logo a seguir. Juntos são mais de 50%. E com todo o frenesim em torno dos suportes móveis, a verdade é que ainda pouco passam dos 5%, sim apenas 5% dos utilizadores totais (sei que em países como a Índia, ou em alguns países africanos, a utilização mobile é maioritária).
Ou seja, estamos a trazer para um ecrã de 20 ou 22'' de diagonal, um ícone que serve para compactar menus num dispositivo de 5''. Não estamos a facilitar a navegação, estamos a esconder o mais importante do site atrás de um ícone pouco explícito que até a Apple quer matar.
Mas é assim tão mau usar o botão hambúrguer?
Não, no tal contexto restrito de utilização móvel. Mas em desktop é mau, e parece ser só usado "porque é moda". E mesmo nas aplicações móveis é fácil de verificar que há melhores soluções alternativas (mais sobre este link em baixo).
Um bom exemplo de como isto é perturbador para a navegação é o site do Record. A utilização do ícone ali no canto, transforma o site disto...
...nisto:
E havia espaço para tudo (essa captura foi feita com o browser em 1366x768 ). O menú não só está escondido como tapa todo o conteúdo do site.
Como diria Kevin O'Leary
Veja ainda este link recomendado com análise aprofundada e alternativas: deep.design/the-hamburger-menu. Interessante o que aconteceu com o site da NBC analisado não é? Veremos como fica o site do Record daqui a uns tempos.
Actualização: Um excelente artigo com um estudo de usabilidade sobre este tipo de menu pode ser encontrado aqui: Hamburger Menus and Hidden Navigation Hurt UX Metrics. Cito:
Navigation Recommendations
What are the takeaways of this research for your next design project?
- Desktop: There is plenty of screen real estate for displaying navigation options, and we recommend:
- Do not use hidden navigation (such as hamburger icons) in desktop user interfaces.
- Instead display the top-level navigation options, usually across the top of the page or down the left side.
- Mobile: For phones, there is no hard-and-fast rule. But our general recommendations are:
- If your site has 4 or fewer top-level navigation links, display them as visible links.
- If your site has more than 4 top-level navigation links, the only reasonable solution is to hide some of these. We did find that the usability penalty imposed by hidden navigation is very present on mobile, but it is smaller than on the desktop. [...]