To kill a mocking burger

A complilation of arguements, my views and a few solutions.


Intro

Now then. A lot has been said across the internet about the infamous ‘Hamburger’ icon, some defending it, and others wanting it destroyed. I have been compiling both arguments for a few months now, and this post will hopefully help make digestible why it’s such a topic of controversy, explain it’s origin through an analysis of an interview by it’s creator, discuss both sides to the argument and disclose my own research based views as an interaction designer. I will make it clear from the outset, that I personally feel the icon should be put into history as an anomaly and something to learn from.


History

The hamburger icon, that three lined controversy contributor, has been around for longer than most realise. Though made famous through the likes of iOS, Facebook and Google, it first appeared in 1981 before any of these big names existed. It was designed by Norm Cox and made its debut into the digital world through Xerox Star, an information system for desktop and was the first system to use a fully integrated desktop metaphor and an application suite. Cox said “the hamburger widget was designed out of pure necessity; for a singular purpose; to meet a specific need within the visual and interactive interface paradigm of the Xerox Star; and (graphically) constrained by the limits of the display at the time (black and white, 72 dpi).” In today’s day and age we are not bound by such constraints and yet this one small icon has had hundreds of thousands of apps and websites built around it for their navigation.


Why is it used?

We require smarter devices year on year, that have new features and more functionality, but with this comes new constraints. As designers we have to accommodate for small screen dimensions, multi device operating systems, thumb reach, varying levels of hierarchy and an overwhelming amount of of content. This is why interaction designers are needed — to create digital platforms that accommodate all these user wants. Unfortunately, this conundrum caused the conjuring and re-emergence of the hamburger icon; it is the result of the design problem how to cram a desktop website into a mobile phone. It is used to represent — in most cases — a navigation menu. Some argue that the icon allows for less screen real-estate usage, and declutters a phone screen by moving the menu and feature list off screen.

It is certainly not a design solution. In my opinion it is a design compromise. It is very unimaginative, creates a navigation system that is bad on web, and even worse on mobile. Hiding features behind drawer functionality and a lack of persistent global navigation creates ambiguity leading to poor user understanding and experience.


Out of sight, out of mind

This is one of the more obvious points from an interaction design stance. As a practice, we do our upmost to ensure clear navigation through digital platforms. The short of it is, that the better the online service you provide and the less pain you course a user on their journey, the more money is made to pay your wage. So why do we see constantly that the main features of both websites and mobile apps are hidden away with no direct link from the landing page? No hint to what the app can or cannot do in terms of its feature set because it’s tucked away off screen with no indication where it is?

Even if people are aware and value a feature, this pattern introduces navigation friction since it forces people to first open the menu and only then allowing them to see and reach their objective. It is crucial for an app to be successful that it has a seamless navigation. The user needs to understand and enjoy their way around a website or app very quickly without causing confusion — the second this happens, the ‘removal moment’ occurs. This is when a user classes it as negative and removes the app to never download it again. In platforms such as iOS, the hamburger icon creates dissonance when being implemented into navigation as it clashes with standard navigation patterns. This clashing of the norm is what creates the ‘removal moment’.

In a recent interview with Norm Cox he described the icon and its role in navigation as a double edged sword:

“As you might expect, it’s a two-edged sword. As a positive (to some users), it helps to hide clutter and unnecessary actions. As a negative (to some users), it hides actions that they may deem necessary.” — Norm Cox

Vincent Flanders, part of the Web Pages that Suck site coined the term “mystery meat navigation” over 17 years ago. It represents an issue that resonates within todays current digital design environment; website navigation that makes no sense to the user. 
 
 I personally enjoy seeing design that disrupts current trends — within reason. Intuitive design solutions that create new and stable flowing navigation throughout a digital or physical space is what I strive to achieve each working day. However, when a user comes onto a site they need to feel like they’ve been on it a thousand times and that they are in control. Piecing these two together is difficult, but achievable through sound user and research and practice knowledge. However some ‘solutions’ I have seen are simply diabolical. User interfaces that are designed to be fun and enjoyable are actually confusing and misleading. The second you think that a user will look past the frustrating interface because it has a fun looking animation is the same second you need to reevaluate your process.

User’s need to be told where to go, don’t leave it up to them to guess — it will only end badly.

You’ll be amazed at how many users come onto a platform without knowing actually what they want. This is where you need digital sign posts to point them in the right direction — a visible breadcrumb trail that they can refer back to at any given moment. Words and representational iconography to guide them to different places keeping them engaged and interested even if they’re simply here to have a browse, not having it all hidden in a hamburger.


The size war

One of the main arguments in favour of using the hamburger icon to cluster navigation, removing it from view, is simply “it makes more space on the screen, and less clutter means more focused attention.” Fair enough, it does create more space on the screen which can allow for a user’s focus to be targeted at certain features. However, when you can only see one feature of the app at a time, that tends to happen. By removing representational iconography that delineates a feature, grouping it with non-related features crammed into an off screen drawer list that is represented by a generalised icon made up of three horizontal lines, you’ve successfully blocked a user from understanding your online platform and hidden 90% of the features — as well as content — all because “it makes more space”.

My second issue with this argument is that not only doesn’t take more time to navigate through a digital platform due to added unnecessary taps, but it also isn’t that plain cut. The hamburger icon navigation only takes up less screen real estate if you don’t want to ever navigate away from that page.

The other day when amidst this debate I was asked “which takes up more space, having 5 icons on the bottom or having 1 in the top left corner?” — a question designed to stump me, as of course the answer here is that 5 takes up more space than 1. But this misses the point entirely. The question is not what takes up more space, the hamburger icon or the tab bar, the question is which method intrudes most when the navigation is on show and therefore direction and clarity is made visible to the user. For those of you that like facts and figures, I’ve got some for your ass.

Let’s take an iPhone 7. It has a 750 x 1334 pixel screen (1,000,500 pixels). Now, let’s look at a tab bar. iOS’s default tab bar is set at 750 x 98 pixels (73,500 pixels). This means that the tab bar takes up 7.31% of the iPhone 7’s screen. Now let’s look at the when a hamburger icon is expanded to reveal the navigation via the drawer function. After testing 55 apps released for iOS10, the average expanded menu was 576 x 1334 pixels (768384 pixels). So after boasting on it saves space on the screen, to be able to actually use features on the app and navigate around it, the hamburger intrudes and takes over 76.46% of the iPhone 7 display. Just to hammer it home, that means that the hamburger navigation method takes up 945.42% more space than the tab bar.


List? Menu? Hamburger?

Vagueness is another key issue with hamburger, beginning to be recognised as a menu icon by both web and app users, despite the lack of directional link to represent this. Throughout history iconography has been used to break down language barriers, from the age of the Egyptians and hieroglyphics to modern day emoji’s. Icons have been, and are still, used to represent emotion, functionality, direction and convey context.

The icon itself is found in a lot of different places representing a lot of different functions. For example it is found in text alignment to justify text, it is found in the iOS operating system as a list view toggle and has been used in countless apps to represent ‘more’ instead of menu. In fact in a user survey I carried out using Survey Monkey published through social media, only 26/64 participants knew that the hamburger icon, for a common news report app, was a menu indicator. The majority of participants thought it was a ‘more’ button. This meant that the 60% of the participants wouldn’t have known how to navigate around the app to see the rest of its features or pages — which seems pretty crazy to me.

Something that I feel is missed constantly across digital design is the user. Sure you know what the user wants and that’s why you’re designing a website or app to meet a user need, but 9 times out of 10 designers simply assume that the user knows the platform and its entire architecture as well as they do.

I find it amusing when I ask designers that use the hamburger icon “so how do I get to profile?” and the common reply is “well, it’s obvious. You simply tap on the menu icon and then tap onto profile!” Obvious you say..? The assumption here is the issue that, firstly, the user is going to know that the hamburger icon is in fact a menu icon and none of the other four meanings it has. Secondly, that they know that profile is going to be in this hidden stack of navigation crammed into an off screen drawer function and that the user will actively pursue it. Thirdly you’re giving the average user far to much credit, you have to design for an incompetent user and not imaging they “just know” what they’re doing.

User’s don’t think as designers do.

User’s follow their digital nose when it comes to navigating round a website or app. If they have come on for a singular purpose then they will look around for key words or iconography linked to that. Let’s put this in context: 
 
 When a user is hunting on a site for a company’s phone number, they will sniff around the site looking for words and phrases such as “contact”, “get in touch”, “talk to us” or icons such as the telephone icon, or phone book. If they can’t find what they’re looking for in their first attempt, more times often than not they will eave the website and simply Google something like “[company name]’s phone number” and pray that it appears.

Following on from this, one thing that certainly doesn’t ever represent a contact function or anything for that matter is the hamburger icon. That three lined item works as Schrödinger’s icon — features are perceived to both be in and not be in there but this can only be known until the drawer is opened. The icon itself simply represents nothing, it has no connotation nor give any inkling as to what could be hidden behind it.


Trend

In recent months, the iOS and web world has seen big boys boycott the burger. Google were the first big name to opt out of using the icon, Facebook then removed it, followed by Twitter, Spotify, YouTube and other large multi million user mediums. All have replaced the hamburger with different iconography and UI design, or — in Facebook and Spotify’s case — a completely remodelling of their information architecture and user experience.

But all of these big names still used the hamburger icon for Android Navigation. So surely the issue then isn’t just with individual companies, but instead in the Material Design Guidelines? Why Does a company have both a beautiful navigation for iOS and Web, but a damnable one for Android?

In March 2016, I was looking into Android Guidelines for a colleague to try and create a piece of navigation that didn’t use a top navigation bar as it was a very simple app. This is where I found that Google had implemented into the Material Design Guidelines, and permitted the use of bottom navigation and in essence, a tool bar. Along side being excited by the prospect of being able to design apps for Android that didn’t mean breaking my thumb to reach the hamburger icon, or holding a test device at stupid angles to be able to get around an app, I wrote a Facebook status :

“This will be the end of the hamburger, hallelujah.”

This was, and still is, my prediction: that through the implementation of bottom based navigation the hamburger icon will be phased out across all mobile platforms and put into a the History books as a misguided anomaly. Granted, this will not be immediate by any means.

It was only till August 2016 when I found myself designing an app in the Fintech market for iOS, Android and web, that I was able to use the Android tool bar in my own work (most of my agency work is for iOS). Before introducing the material design toolbar into my designs, I did some heavy research — where a lot of this blog stems from — and found an interesting article by Kara Pernice and Raluca Budui named “Hamburger Menus and Hidden Navigation Hurt UX Metrics”. The paper looks at navigation usage, content discoverability, time to complete tasks and task difficulty.

When looking at navigation usage, Pernice and Budui discovered that on desktop, only 27% of users interacted with hidden navigation (such as the hamburger icon) and yet engagement increases to 48% when the navigation is present on the screen. Similarly on mobile interaction was at 57% and this increased to 86%.

Then onto content discoverability. The content discoverability for hidden navigation was lower (54%) than for visible navigation for both mobile (85%) and desktop (77%). So there was a significant increase in discoverability when visible navigation was present.

In Pernice and Budui’s tests they found that on average users were able to navigate through digital spaces to 5–7 seconds quicker per task when the navigation was on show and not hidden in a drawer function.

When users were given a series of tasks, they were asked to rate them based on difficulty (1 low difficulty, 7 high difficulty). the results were that on average users voted the hidden navigation tasks to be a “2.6” difficulty score, whereas the visible was at a “2.1”.

The average task time followed suit. On the desktop, people were at least 39% slower when the navigation was hidden (compared with the visible or combo conditions). On mobile people were 15% slower when the navigation was hidden (compared with the combo condition).

I thought heavily around the navigation I wanted to use, looking at Android apps that had now adopted the bottom navigation approach (though few had) to work out what really was the best for my product. Being a big fan of bottom based navigation such as the tool bar, and after constructing an efficient architecture for the app, I was excited to implement this into a global app, so I did just that. I was met with some challenging questions from other designers and the lead Android developer but still felt this was firstly the best design solution for the app, and also a great opportunity to test the material design component in the real world.

The app has since been built and released privately. Though I cannot disclose the app currently, I will share a line from the client who used the android app: “It is easy to get around isn’t it?” — A sentence I want framed on a wall. This feedback was echoed in the response from other designers in my studio and test users alike. Since this I have designed a few other Android apps to use bottom navigation and steer clear from the hamburger drawer function.


Designing for the Thumb

Most users navigation using their thumb. So why do we insist on using a navigational system that isn’t usable by the average thumb? How daft is that? A common image that is flooded around the internet is the thumb reach on a screen, but what isn’t included is where the hamburger icon is situated. So here’s a visual for you to share about.

Thumb reach is often overlooked. However, it should be considered in the very beginning of your mobile design and checked against constantly throughout your project. The easier it is for your user to use the app, the better the user experience. Again, make sure you don’t choose UI over UX, instead use both simultaneously.

I’ve noticed a theme amongst designers which is that as soon as there’s more than 3 features to an app, the design moves from tab bar to hamburger icon navigation. This is ridiculous. In the iOS Guidelines and in their UI kits, the tab bar accommodates for 5 icons to sit on the tab bar without any issue for all screen sizes. Secondly, what the tab bar allows for is contextual iconography. It gives the user 5 hints to what the app includes instead of 1 vague hamburger. If you have more than 5, this is where you introduce feature association. Feature association is where you group certain pieces of functionality together that are related to an icon or label.

Android has somehow always missed this. They’ve always lacked bottom navigation leaving apps with a hamburger icon. To try and make navigation visible without breaking the Material Design Guidelines, tabs at the top of the screen were used by designers to accommodate for the lack of bottom navigation. While tabs work for simple apps, space problems occur when a second level of navigation needs to be added or there are more than 3 destinations. Considering mobile devices’ “Thumb Zones” the top area can also be seen as ergonomically challenging to smartphone users especially compared to a navigation at the bottom.


Navigational acronym

As digital designers we need to make a user’s experience as efficient, enjoyable and logical as possible. Through my experience as a digital designer I have a phrase I like to use when designing the navigation of a digital platform, fuck it. No, I’m not saying give up on it, instead it’s an acronym of points to help me ensure I am making a navigation that is right; these are as followed.

Features.

The point of an app or a website is to bring some form of service to a user. Be that simply a blog post like the one you’re reading or buying a multi-pack of pickled onion monster munch from Amazon because your corner shop stopped selling them (twats). Make sure the features of your app are not wasted by being hidden behind poorly designed drawer functionality hamburger icons.

Understandable.

The navigation can’t be complex, nesting information in menus inside of nests inside of menus — exactly, what? This is where I point out the most useful tool in my arsenal, I call her ‘mummy’. My lovely mum makes a mean lasagne but is not the sharpest with technology, but this makes her perfect for user testing. If she can’t use the navigation system without being told what to press — start again.

Clear.

Whatever this service is, it needs to be clear and visible. If it’s not clear and if it’s not visible you’re hoping that your user can guess how to navigate to your app or site’s features — why leave it to chance. You need to make it clear where everything is and use correct iconography and word association to direct them through your platform.

Knowledge based.

Make your decision based on sound knowledge and research. Different services require different navigation icons, layout, terminology and functionality. Make sure you know the apps target audience and what market it is being used for. You also need to know the platform guidelines. The agency I work for build iOS and Android apps and therefore I ensure I adhere to their guidelines which are free to get your hands on (iOS guideline : https://developer.apple.com/ios/human-interface-guidelines/ , Android : https://developer.android.com/design/index.html)

Intuitive.

There’s always room for improvement and in the highly competitive digital world we live in this is where interaction designers are vital. Improving navigation on a platform could be the difference between a 60% sale conversion rate and an 80% because it was one tap less for the user.

Test.

Before you sign off the UX of your digital platform, test it. Get some of the designers in your agency, — these are the guys that are paid to be picky. Get people off the street, these are the general public that will . Just make sure you test your navigation on a few different users and check that it is user friendly.


Do it better than before

The icon. As mentioned in the Norm Cox interview, the hamburger was designed out of constraint, it was limited to the technology of the time. In 1981, the icon had to be black and white, and work in 72 dpi. Norm Cox went on to say “With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16x16 pixels to render the image.” So why, in a time such as ours with technology taking leaps and bounds do we feel we have to use the same icon with the same constraints despite the shackles that caused the icon to be made in the first place don’t exist anymore?

Use iconography that hints features not a menu. The hamburger icon does not represent a profile, so why not use a profile icon instead? Simple.


The tool bar

Bottom navigation, the tool bar. It is by far the best way for a user to interact with an app. It’s obvious, visible, features are represented on screen by identifiable iconography and even on small screens can accommodate 5 lead features comfortably. It’s proven to increase usability, and with increased usability comes a better user experience — the reason for doing what we do as designers. Design your app with “thumb zones” in mind. Don’t make a main feature or your navigation a stretch to get too. The easier it is, the better the experience.


Apple’s solution

Apple looked off the visible screen to create a solution to the hamburger icon. They created their 3D Touch technology. Apple is making a move that could eventually kill the convoluted, infamously confusing hamburger menu that they have put into place on the wearable technologies and the iPhones 6 & 7 models.

On Apple Watch, Force Touch is used to boycott the need of a drawer function that houses all the additional features and functions. Instead they use it to make each item that has ‘more’ functions attached to it Force Touch enabled so by pressing into the item ‘more’, you get the additional functionality that is directly associated with that item.

Now this is being implemented more into the mobile devices, it offers a method to eradicate the hamburger menu entirely from its interface, and leave a more accurate ‘more’ function in its place.

If Apple can keep its users interacting with the technology, and as the method of interaction becomes expected, constant and standardised, then it could be a real method of removing the icon completely from iOS based apps as the ‘norm’ can be shifted away from poorly implemented off screen drawer function navigation.


Change your thinking

What I will quite bluntly point out is that as interaction and digital designers the goal is to create harmony between form and function — not choose the aesthetic over the experience. So by designing with this frame of mind, as an interactions designer, you’ve failed.

Norm Cox, the designer of the hamburger icon, said in a recent interview that success is determined by the tenets of compatibility, usability, effectiveness and efficiency within the context of the application. What may work for one class of user, may not work for another. So why do we generalise navigation and assume this icon is appropriate for all forms of digital platforms when its own designer argues against it?

It’s clear to see that the icon isn’t entirely to blame here, but the lack of research and understanding from the designers that are putting them into practice. It seems as though user testing and guideline research is simply ignored in many agencies leading to poor app performance and user engagement. However the icon itself, through over use, is becoming a standardised and recognised method of navigation making it harder for designers to create new intuitive designs that break away from it. Despite my strong feelings toward it, the hamburger icon is simply a tool. The old saying “only a poor workman blames his tools” is fitting. It is up to designers to ensure they’re using the right tool for the job.

Likewise, simply not using because some nerd in the north east said it is daft, you’re a designer with a mind — educate yourself. Dig out the guidelines provided to you by the likes of Apple and Android, find out their best practices and build on them to create seamless navigations. Research constantly. Don’t wait around for someone in your office to find out that you’ve been designing based on misguided principles because that’ll be too late.

If you can adopt a truly mobile first approach in all of your digital creation process including information architecture and how the platform is orchestrated, we can see a reduction in hidden navigation and an increase in usability and user experience — golden times, duck.