O caso do (menu) hambúrguer

Como um único elemento mudou meu Design.

Antonio Salgado
Pão com ovo
5 min readOct 2, 2018

--

Hambúrgueres são lindos, gostosos e tentadores.

O debate sobre o Menu pode ser antigo. Mesmo assim gostaria de deixar aqui os meus pitacos, junto de um estudo de caso sobre o App que desenvolvi, com mais 3 amigos, no Apple Developer Academy.

Eu me considero um usuário da internet desde a época em que era tudo mato. Me conectava na madrugada, via internet discada, para acessar sites e interagir com os meus amigos. Lembro do surgimento das lan houses, da internet via cabo( de 256 kbps!) e principalmente da primeira vez que acessei a internet através do meu celular.

Os primeiros websites não tinham grandes ambições ou investimentos em usabilidade desktop. Sendo assim, o investimento no mobile, um mercado praticamente nulo e sem grande perspectiva à época, também era pouco.

O primeiro iPhone surgiu em 2007. Com ele criou-se um paradigma de acesso à internet, acarretando um aumento exponencial dos usuários de internet mobile.

A partir desse momento surgiu a necessidade de se investir mais em usabilidade, principalmente. As primeiras ideias sobre design responsivo e mobile first surgiram em 2009–2010 apenas. Eis que o menu hambúrguer ressuscitou e ganhou nova popularidade.

Ele é uma solução de 1981 desenvolvida por Norm Cox, para o Xerox Star, a primeira interface gráfica do mundo. Seu objetivo é demonstrar a existência de uma lista de itens escondida. Sua aplicação tem pros e contras, há quem os ame e quem os odeie.

Fazendo o hambúrguer perfeito.

Em 2017, no meu primeiro projeto dentro do Apple Academy Rio de Janeiro, Libre, eu possuía bem menos conhecimento do que hoje. Havia desenvolvido apenas um projeto web e feito o design de no máximo 2, de uma forma ainda superficial. Durante a fase de prototipação eu criei telas utilizando o menu hambúrguer. A maioria dos feedbacks foram negativos.

“Não gosto de hambúrguer.”

“Parece uma ferramenta dos anos 90.”

“Tem algo que eu não gosto.”

Alguns usuários se sentiam incomodados por algo que não sabiam descrever. Mas o meu design, principalmente, se mostrou afetado como um todo por toda a carga cultural carregada pelo menu. Me libertar dele me ajudou a melhorar muito a experiência dos meus usuários e o visual do meu app, rendendo ainda um destaque de quase 1 mês na App Store.

Primeiro protótipo do Libre.

É obvio que o Hambúrguer não era o único responsável pelo design ruim. Os principais fatores eram a minha inexperiência e desconhecimento. Por isso é importante a pesquisa, testes com usuários, estudos e constante atualização. Além disso, é preciso receber os feedbacks de mente e ouvidos bem abertos. Meu próximo passo foi estudar o problema e soluções viáveis.

Por que o menu hambúrguer não funciona?

Não há como chamá-lo de uma solução ruim, para a sua época pode ser considerado até genial. Mas eu tenho uma ideia de que precisamos estar constantemente nos renovando. Ir atrás de uma solução pronta de 1981 pode ser fácil, rápida e demandar menos recursos, porém onde está a inovação? Contextualização?

Mesmo sendo um recurso velho, ele não é legível para todas as gerações. À época da sua criação, poucas pessoas utilizavam computadores e muito menos o Xerox Star. As gerações mais novas já o absorveram por osmose, mas isso não significa que o compreenderam.

Ele esconde o conteúdo do usuário. Alguns clicam por curiosidade, sem entender ou saber o que está ali.

Ele representa bem uma hierarquia vertical, mesmo que os elementos tenham o mesmo nível eles sempre aparentarão ter uma hierarquia.

Eles não são acessíveis. Sua localização, geralmente no canto superior esquerdo, não é fácil de se alcançar com uma única mão nos smartphones modernos.

Algumas vezes ele atrapalha o layout mais do que ajuda. Ele se torna um corpo estranho e acaba destoando da proposta do aplicativo ou site.

E o que seria melhor do que o hambúrguer?

Tab Bars

O novo visual do Libre

As tab bars deram uma nova cara e vida ao meu projeto. O visual ficou mais moderno e minimalista, ao mesmo tempo que a navegação ganhou visibilidade. Dessa forma o usuário consegue se localizar mais fácil e visualizar os caminhos disponíveis.

Além disso, o Page Menu, adotado em algumas tabs, ajudou na navegação horizontal dentro delas. Os testes com os usuários se mostraram muito mais satisfatórios. O App foi considerado intuitivo, bonito e agradável. Por fim, conseguimos destaque de 1 mês na App Store!

Destaque do App na App Store.

Há outras soluções. Às vezes é válido aplicar o Hambúrguer. Para ser sincero, o problema não é na utilização, mas sim como utilizar. Como designers devemos estudar soluções e sempre buscar aperfeiçoá-las, ou encontrar novas, não apenas replicar sem pensar. Novas tecnologias surgem cada vez mais rápido, junto delas novas formas de se consumir conteúdo.

Por mais que hoje o debate já esteja solidificado, e as novas soluções estejam firmes no mercado, fica aqui o meu relato sobre o hambúrguer e meu caso com ele. Foi uma experiência muito bacana desenvolver o Libre e todo o aprendizado adquirido com isso. Através desse projeto que passei a me identificar como um UX Designer.

Obrigado e abraços,

https://www.behance.net/gallery/54620545/LibreApp

--

--

Antonio Salgado
Pão com ovo

I am a brazilian Designer, graduated at PUC-Rio. I love working with digital media projects, learning new things and meeting new people