59

Some facts: The image below is from the article How Do Users Really Hold Mobile Devices?. You can find plenty of other articles on the web about how users use a mobile phone. The data was collected by observing thousands of mobile phone owners remotely. Dark Orange / Red - percentage of people who use their phone using thumb alone Violet - Percentage of ...


36

Nowadays there are plenty of options to show hidden navigation. It all boils down to what your favourite food is!: Kidding aside, ideally you want an evident way to show where you navigation lives. However I would dare say that hamburger menus have become so commonplace that people now expect them and understand the functionality behind them. There ...


30

Generally speaking they are used to open different types of menu. The 'burger' is used to open a 'burger menu', which is presented as a drawer that appears from the side of the screen and occupies most of the screen; The 'kebab' (three vertical dots), which originated in Google's Material Design languge, is designed to open a smaller inline menu from a ...


27

Replace hamburger menu with bottom navigation menu I know that I don't specifically answer your question but decided share the latest research about hamburger menus and a possible alternative. Lately, there has been a good amount of research about mobile navigation. It turns out that the bottom navigation menu was creating more user engagement for Facebook ...


20

Let's evaluate the scenarios Users expect clicking on menu to close If it closes on menu clicking => good Whether it closes touching outside or not=> don't care, because they'll use the button. Moreover most people won't be expecting a toggeable component to remain open when you click outside it and even if someone expect this, redoing the action won'...


19

To expand on Tohsters answer, one hamburger menu is already detrimental enough so adding a second one is only going to confuse matters more. If the client cannot be persuaded to follow other avenues then it's probably best to start looking at ways to make the best of a bad situation. (this blog post expands on this https://lmjabreu.com/post/why-and-how-to-...


16

If you're going to use a hamburger menu, then it should collapse when you click or tap elsewhere (on desktop too, if the menu sticks instead of responds to unhover). Also on mobile other elements should not be activated when tapping off the menu. But I think the correct answer, providing the best UX—which is your real goal, isn't it?—is: don't use a ...


16

When hamburger icons first started becoming ubiquitous, they were placed on the left side. But as apps started iterating, like yourselves, the icon shifted the right side because it's easier to click (given that the majority of people are right handed and the top right corner is slightly more accessible than the left one). (source) So I'd say keep it ...


15

This is a terrible idea You're right to be suspicious. One hamburger already sucks... Hamburger menus don't test very well to begin with. Here is Apple's UX lead on the subject, and more articles here and here, but to summarize: They hide links and content from the user instead of presenting the user with direct options. The hamburger icon is placed ...


15

The best icon is always text This being said, let's disect your problem a bit: First of all, that doesn't look like a hamburger menu at all, and the circle makes it even more confusing. On top of that, the whole iconography is a bit confusing. For example... why do you have a battery icon on the app and then a battery icon from the device? Does it serve to ...


9

Forget mobile breakpoints, there's no phone and tablet sizes outside marketing. Breakpoints should follow the content, not the screen size. As a simple example, let's consider the menu: Home | Products | Contacts Do you think you should ever provide a mobile menu? Do you really want to stick three elements in a hamburger menu? They can probably fit ...


8

The hamburger "menu" belongs to the menu class of UI patterns. therefor if you look how menus behave, they close in both instances when the user clicks/touches it again or somewhere outside its hit area. The same would apply to hamburger menus as well.


8

It all depends on the app itself and users' expectations. For instance, users expect Facebook's desktop website to always show: Friend requests Their messages New notifications The other options are hidden in menus and sub-menus. So, it's a logical step for Facebook to match the desktop version with the app. If you have the screen space to place the ...


7

If you want to follow Apple's Human Interface Guidelines then you have to think of another pattern, because last year they announced that hamburger menus are not a welcomed sight in iOS applications: And again, I’m not going to say that there’s no place for these controls categorically. I think there are some apps that could maybe use one. But I will say ...


6

The good and bad of bottom nav Bottom nav was a great idea when Apple first came out with it. Steve was laser-focused on one-handed usability. The bottom nav was designed to accommodate fast and convenient view switching where the mobile use case seemed to demand it. Unfortunately, bottom nav is a hierarchy nightmare when used for an app's main info ...


6

There's is a lot of research around that explains the way a reader's eyes naturally flow when reading, so you may find some of that useful. For example, you may get some insight from: http://vanseodesign.com/web-design/3-design-layouts/ How much of that applies to a User Interface is always open to debate. Your question doesn't specify whether you're ...


6

I was referring iOS and Android design guidelines and they never mention the 3 dot icon as "kebab menu". In Android, they call it Overflow menu whereas in iOS they term it as More. For reference: Android - https://material.io/design/components/app-bars-top.html#anatomy iOS - https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-...


5

As the developer of Picnic CSS, I have been wondering the same for a long time. I decided on closing it when clicked outside, but in any case, the action should be made obvious. To make it obvious, when the menu is opened, the rest of the content is obscured: A notable example of how not to do it is github. Visit it on your mobile, click on the menu and ...


5

I think this is a good example for asking the question "What does the client need?" vs. "What does the client want?". So if I understand your question correctly, your client wants to present two websites under one address and probably also under one one design. Whether this is a good idea or not is not within the scope of my answer – for now I just try to ...


5

On Android this is also very common pattern but with few differences. On Android you position this tabs on top of the screen (mainly because of hardware buttons on the bottom of the phone) You can use scrollable or fixed tabs (for more info: http://developer.android.com/design/building-blocks/tabs.html)


5

My conclusion after reading about UI structure in Google Material Guidelines is on the Left: Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, which contains secondary actions and menu items like help, settings, and feedback. Primary actions should be displayed on the right and secondary on the left (...


4

While I was initially tempted to just say that the word 'MENU' should stand the test of time, the trouble is I fear that the design as a whole might not. The hamburger menu isn't always the best option to hide a menu away because it does exactly that - it hides the menu! This case study from Redbooth details how they got rid of the generic hamburger menu, ...


4

Like with most questions like this, the tl;dr is: It depends. The correct navigational pattern is largely contingent upon three things: App structure (IA) Leaf page functionality (IxD) Desire to enforce prioritization by the product team (Organizational) App structure If your app is structured such that you can support fewer than 5 first-tier leaf pages, ...


4

I think you should reconsider the bottom navigation: Bottom navigation is very well established in mobile apps, far more so than top navigation, and there is good reason for this. In most cases i disagree with your point about incorrect information hierarchy - the content takes prime visual position in the interface, and the navigation is simply a tool for ...


4

Hamburger menus, like it or not, are widely recognized Inertia: everyone else is doing it, so we did it and now it's done (until the next major redesign/funding come along) Burgers take up very little space and lend themselves to being tucked into a corner of the screen In many instances, they are effective I want to address that last item in particular. ...


4

What if you surface some of the menu options that give you cold feet the most, and then provide a "More..." button? You could style the buttons to your liking and have as many or as few as you like.


3

Pick one of the two options. Don't make a second menu that's exactly the same. People will be confused or annoyed if they discover the same menu after spending a mouse click on a hamburger menu. So which one to choose? In apps Don't use a full page navigation, because mobile screens are small. A hamburger menu will do fine, because people can see it ...


3

Seems we're all in agreement here. I'll add another perspective on it. Fitts' Law indicates that a larger tap target is easier to hit than a smaller one. So if you can make the entire background a target for closing the menu, then go for it.


3

Both (hamburger and nav bar) have advantages and disadvantages that make them suitable in particular contexts. It very much comes down to how much value your users get from functionality that you consider for your main navigation, and more objectively, how often they use that functionality. Spotify is a great example where a nav bar makes a lot of sense: ...


3

Whether it's the hamburger menu or the menu bar, navigation should be consistent throughout your system. This features throughout most accessibility guidelines, is good for SEO, and is just generally good practice.


Only top voted, non community-wiki answers of a minimum length are eligible