Headaches with the Hamburger Icon
In October 2012 I stumbled across an article called “The Semantic Responsive Navicon” by Jordon Moore on Smashing Magazine. The article discusses the emergence of the yet-to-be-christened “hamburger icon” and how it was starting to fulfill a much needed role of providing a standard icon for revealing off-canvas navigation.
The article highlighted additional icons website authors had used to represent hidden navigation, urging designers to stick with a uniform choice as to not dilute the meaning of the icon:
“…there is a disparity in the way the action is presented. If icons are a language, then we are sending mixed messages where responsive navigation is concerned… …The message we deliver needs to be consistent and clear, the icon is part of this message, part of the greater language”
Fast forward to May 2014, an article on Tech Crunch titled “Kill the Hamburger Button” is published by Josh Constine. The article tells a different story about the familiar navigation icon, opening with the sentence:
“That little three-lined button is the devil.”
The article references a written piece by Luis Abreu titled “Why and How to avoid Hamburger Menus”, explaining that the main issue with the hamburger icon is not about recognition but simply the fact that it hides actions and options.
The focus on these articles is with app design, however with the increased blurring of web design and web app design, the case put forward should be interesting to both web designers and app developers alike.
Josh Constine’s article drew conclusions from various case studies that a tab bar style navigation is a wiser choice, providing immediate access to core functions with an optional hamburger icon labelled “More” for less popular/related options.
The tab bar’s constant presence can also signify additional information to the user, a white number “2” in a red circle sitting on top of an envelope icon signifies that there are two unread messages. This information would otherwise be hidden aware from a user if the design relied upon an all encompassing, off-canvas sidebar.
How can we apply this to web design? How can we take a clothing retailers website for example, and condense that navigation down to a few icons in a single bar?
Also, how can we get this square peg into this round hole? Yes, joking aside it seems like a no win situation. A website can have hundreds of categories, sub categories and menus, we can’t all provide them with mobile screen space gold.
The hamburger icon’s popularity and increasing recognition makes it an obvious choice for most websites. It is now an icon we look for and understand without the label of “menu”.
Perhaps we can meet somewhere in the middle.
In an article entitled “Responsive Navigation On Complex Websites” appearing on Smashing Magazine, Jon Rundle opens up about how his team tackled the mobile navigation of a large website with a complex sitemap.
Jon’s approach was a result of research and analysis, studying users as they navigate actual wireframes made by the team. One of Jon’s goals was to breakdown the navigation into manageable groups and to determine the hierarchy of those groups, he did this by maintaining a close relationship with the client throughout the design process
“We started by meeting with all of the committee members who were appointed to work on the website, to determine which parts of the website were most important. After hearing each group state its case as to why its information needed to be prominent on the website, we started to build a proper hierarchy. “
The design Jon and his team produced utilized four, text based, drop down menus. Each labelled under the main category title and each representing the four main areas of the site. An Additional hamburger button labelled “sub navigation” was employed to provide access to typical web pages such as Careers and Contact Us, pages that weren’t so essential to the main subject matter.
Jon’s method does an excellent job at balancing discover-ability with responsive aesthetics.
Perhaps we should be analysing our navigation more, drawing up a hierarchy of importance or discovering relationships with various options. Should this link live behind a hamburger button, be grouped with a series of important links under a unique category or perhaps be awarded its own icon button on specific pages?
It’s still early days in the realm of responsive web design, but I’m pleased we are tackling these issues head on, always endeavoring to find a better solution.