Should I reduce the number of menu items when showing on smaller devices, or use a 'hamburger' responsive menu?

Question

So I was thinking about how I could make a responsive menu a better experience rather than just firing it into a drop down on mobile that has a hamburger as an icon.

Would it perhaps be a better user experience to limit the amount of navigation items, for example if you had:

(We'll use this site as an example)

Questions, Tags, Users, Badges, Unanswered and Ask Question...

To perhaps keep the menu visible but only hide the less important navigation items under a drop down called more with:

Questions, More and Ask Question

Or is the hamburger menu the better experience?

Answer 1

Paddi MacDonnell wrote an interesting article on the hamburger menu and related mobile-first approaches to design a few days ago:

It outlines some of the problems of hamburger menus, and concludes with the observation that the device is something of a way to brush the navigation of a complex app under the carpet of the hamburger icon (my carpet analogy, not hers!).

Facebook’s app famously swapped their hamburger icon for a tab bar, and as a result saw improved conversions. But Facebook have done something far more significant than swap menu designs. Recently they’ve released their Messenger app, and the big deal about that is that they already had a perfectly functional and popular app that they could have integrated the messaging with. Facebook have compartmentalized their functions, by focusing each app’s role they’ve arrived at two simple apps, instead of one complex one. The reduced functionality results in a reduced set of menu options, and less need for a hamburger menu.

Good apps are highly focussed, and they’ve evolved that way through far more rigorous user testing than the Web is subjected to. To create an app-style experience we need to simplify our sites, simplify again, and then simplify a bit more. If necessary, break your architecture down into manageable bite-sized pieces, microsites almost. When we present our users with a simple set of options, the problem of a complex menu never arises.

Making use of the hamburger icon is like slapping a band-aid on an injury: it patches it up, but underneath something is still broken.

As suggested in the question, if you can sensibly break down the architecture of the app/site in such a way that you can supply enough relevant and useful navigational items without having to resort to the hamburger icon, then that simplifies things for the user.

If, superficially it seems impossible to reduce the number of items to a manageable number, then perhaps it may be worth taking a step back and considering what you might have to do in order to make it possible - and whether that chunking or restructuring process would improve the mobile experience overall.

I would add that while reducing the navigation to the point where a hamburger menu is not needed, you should ensure that you still provide the basic navigation needs of being able to go back to where you came from, proceed to a similar item, move to a next stage, and avoid being left down a dead end.

Edit: See also: Why and How to avoid Hamburger Menus by Luis Abreu, where the same conclusion is reached:

The solution is reviewing your information architecture.

Answer 2

I'd definitely opt for fewer navigation items if you can. Brent Jackson has argued aginst flyout (hamburger) navigation. The hamburger solution only really covers number 1 or the following utilities:

Good navigation should do at least three things well: (1) it should allow the user to navigate; (2) it should serve as wayfinding, letting the user know where they are; and (3) it should help the user understand what the product is capable of. If your navigation is not doing these three things, something’s wrong.

http://jxnblk.tumblr.com/post/36218805036/hamburgers-basements-why-not-to-use-left-nav-flyouts

Answer 3

I'd prefer expandable and collapsible parent menu items on mobile devices. Each parent item that is expanded, automatically closes any others. This keeps the navigation compact and user friendly across mobile devices.

Whether you trigger this menu via a hamburger icon or otherwise is just one option of many but at least it is a relatively known representation of a menu now on mobiles.

Along the lines of the below:-

Definitely reduce menu items as much as possible for mobile devices but at least this method offers a condensed and user friendly functionality whilst still providing the ability to offer a relatively substantial amount of menu items.