How hamburger menus should be implemented universally in Windows

[badshar]

Someone made this concept: Hamburgers on Windows ? A possible solution | The Verge

I think it looks great, what about you guys?

EDIT: Please vote on UserVoice: https://windowsphone.uservoice.com/...utiful-productive-universal-design-between-wi

The Reddit community did their job by voting (over 1000 votes). Now WC, do yours!!

 

[Legoboyii]

Just base the UI on OneDrive, pivot with app bar and the dreaded button. Good compromise I guess?

 

[Legoboyii]

Someone made this concept: Hamburgers on Windows ? A possible solution | The Verge

I think it looks great, what about you guys?

It does look great, just change the arrow in the app bar to look more like a metro arrow than an android triangle...

As for the overall design, make Microsoft hire him and make him the like COO on WP design ASAP!

 

[mjrtoo]

I'm a beta tester of the new amazing weather HD and they utilize this concept. I could live with it...

 

[benjer3]

I do think this compromises fairly well, and would prefer it over the current version. However, I think it could be better.

Having both a hamburger menu and three-dots menu on the desktop is kind of redundant and confusing. I feel there should be only one menu button that merged the functions of both (without the navigational menu). The button could then be changed to something that looks both like a menu button and something you can pull up (or down on larger touch devices?) in order to make it work with both the desktop and phone.

I don't think merging them would be a problem. What's typically on the app bar (in a classic Metro app) when you pull it up? Settings and the like and commands that are less common than the ones on the top of the app bar but usually global within the app. What's under the hamburger menu on desktop apps? The same things.

I don't see why the pivot shouldn't be the only navigation tool on the phone for getting around the main hub. I also don't really like a pivot that stops at the ends rather than going all the way around, as it's slower.

As for the more complex apps like Word and Excel, I do realize that there's a conundrum if you try to keep everything reachable, as there are two separate things (the ribbon menu and quick actions) that want to be in the same place. I'm not sure how that would be solved, or if it's solvable.

 

[elwin lobo]

feel this is great... I actually assumed this would be the next iteration of pivots

 

[drachen23]

This doesn't really solve the problem. I like that it's an innovative solution and tries to use the existing Metro design language (sort of, there's the matter of text size and spacing) to better solve the problem that the hamburger is trying to solve. There are two problems with the hamburger: First, it hides UI elements. Second, it's not easy to use with just one hand. This solution still hides UI elements. The main difference is that you have to swipe left anywhere instead of tap an inconveniently located button. Ok, it's definitely easier to activate, assuming you are on the opening pivot. It still doesn't obviously answer the "so what exactly can I do with this app?" question until you activate it.

Now here's the rub: activating the menu is now do-able with one hand. Now all of the stuff I'm likely to do is... at the top again. The less-used menu items like "settings" and "accounts" are easy to access with the thumb, but not the other stuff. The first few items still have the hamburger location problem. The current appbar is still superior. Assuming the icons are meaningful, the "what can I do?" question is answered by the icon buttons and when the menu is activated, everything is within thumbs reach.

The in-menu pivot after the user hits the lower menu button on the Excel mockup scares me a bit. It's like an app within an app. Overall, it's an innovative stab at it, but I don't think it solves all the problems that the bottom menu solves compared to the hamburger.

 

[a5cent]

I appreciate the effort this person put into the concept, and no doubt he's talented, but like many others, this guy misunderstands the purpose of the pivot and when it's appropriate.

In an earlier post I described how the pivot is primarily intended for filtering/sorting purposes (like in the default e-mail app). Pivots were never intended for navigation between distinct/unrelated parts of an app. Microsoft states the exact same thing in their developer guidelines

An app can easily have more than three or four distinct sections. The photo album app used in the concept has five, but apps can easily have double that amount. IMHO a pivot with five sections is already unpleasant to use. It necessitates an unacceptable amount of swiping. Worse, it's often not obvious which direction brings us to the desired section with the fewest number of swipes. Ultimately, a pivot works best with three sections. Four sections is still tolerable. Any more and the UX deteriorates exponentially. That's not adequate for use as a general purpose navigational mechanism.

The reason pivots are often misused as a navigational mechanism is because WP provides no suitable alternatives! The hub is the only exception, but that is only appropriate for media focused apps. For developers the pivot is a ready-made and simple choice, but when applied to navigational problems that's all it is. Simple for developers. It's not a good solution for users.

A better concept would completely divorce the concepts of filtering/sorting from navigation. Instead of trying to carry the missuses of the pivot over into W10M, it would be better to invent a wholly new and unrelated mechanism tailored specifically to navigation, while narrowing the pivots focus towards what it does best... filtering and sorting, like in the e-mail app, or as it is used in Tapatalk. Nothing more.

 

[mjrtoo]

I see lots of reasons why not, but how about some alternative ideas then. What are your ideas? I like the windows central app, utilize the back button. Have deeper pivots that you can back out of, why not just keep it that way?

 

[floopydoodle]

I appreciate the effort this person put into the concept, and no doubt he's talented, but like many others, this guy misunderstands the purpose of the pivot and when it's appropriate.

In an earlier post I described how the pivot is primarily intended for filtering/sorting purposes (like in the default e-mail app). Pivots were never intended for navigation between distinct/unrelated parts of an app. Microsoft states the exact same thing in their developer guidelines.

[The above quote is shortened and links removed because of insufficient post count.]

I think the idea is that this will replace both the pivot and panorama controls. These two always confused me a bit because of their similarities and I imagine a lot of developers were too. To be honest they behave very similarly from an end user perspective.

I think this mockup is brilliant compared to the mess that Microsoft has shown so far. I was very late to the smartphone game. My first one was a WP7 device. Every time I've tried to use an iPhone or Android device in the past I would be forced to use it two handed (Granted, this would probably get easier over time.). Windows Phone was the only OS that got it right.

I don't understand why MS has to butcher their UI just because of "everyone else does it" mentality.

 

[a5cent]

I see lots of reasons why not, but how about some alternative ideas then. What are your ideas? I like the windows central app, utilize the back button. Have deeper pivots that you can back out of, why not just keep it that way?

As far as I'm concerned the main argument against designing solutions is that we as a community don't yet have a good understanding of the problems. Solving a problem we don't yet fully understand is obviously doomed to fail. Furthermore, lacking a shared understanding also makes it difficult to critique any potential solution, as everyone ends up contrasting the proposals with their own unique ad-hoc understanding of what is being solved.

So far the entire debate has focused on single-handed usability of the hamburger button. While I understand the point and think it's important, it's just one part of the puzzle, and IMHO not the most important part.

I think the entire debate needs to be reframed. It's not a hamburger button problem, but a more general navigational problem. That requires a more widespread understanding of what I mentioned above, enriched with one or two dozen requirements outlining the problems that a good navigational solution should address. If we had a thread devoted to something like that I think we might eventually get to a point where it makes sense to discuss solutions. Right now I'd consider that premature.

 

[a5cent]

I think this mockup is brilliant compared to the mess that Microsoft has shown so far.

Also not a huge hurdle to overcome :devil:

I think the idea is that this will replace both the pivot and panorama controls. These two always confused me a bit because of their similarities and I imagine a lot of developers were too. To be honest they behave very similarly from an end user perspective.

Pivots and panoramas have a lot of similarities. True. Combining the two is not the problem the author was trying to solve however, or at least that's not what I see. The author doesn't actually list a single specific problem the concept is intended to solve. That's why we're guessing. The problem statement is reduced to a very short and vague paragraph at the start of the article. I think that's this concept's first major stumble. It's not clear about what it's trying to solve.

I'd characterize these efforts as an attempt to more naturally integrate the hamburger button into the Metro design language while better optimizing for single handed usage.

IMHO the concept is not suggesting a navigational solution that is any better (functionally) than what we already have. The biggest issue is that this concept retains the ability to misuse the pivot control (far too many sections and too much swiping). Instead of killing it, this concept would allow that misguided "tradition" to continue. It's still making the huge mistake of lumping sorting/filtering in with navigation and hoping the same UI constructs can be used for both. It doesn't solve that problem any better than WP already does, meaning it doesn't solve it at all.

 

[mjrtoo]

It's just a discussion, it's not a development forum.

 

[drachen23]

What's even stranger about that design now that I think about it is that the "hamburger pivot" is a listing of the other pivots, plus settings.

To get to the Places pivot from the Collection pivot:
With the updated pivot style:
- Method 1 (2 actions): swipe right -> swipe right
- Method 2 (2 actions): swipe right -> tap "Places" (harder because there is a hit target and because you have to move the thumb up)
- Method 3 (2 actions): tap hambuger -> tap "Places" (exact same as just a plain hamburger)
- Method 4 (4 actions): swipe left -> swipe left -> swipe left -> swipe left
- Method 5 (1 action): tap "Places" pivot name (basically same as the hamburger)

With the old pivot style:
- Method 1 (1 action): swipe right
- Method 2 (4 actions): swipe left -> swipe left -> swipe left -> swipe left
- Method 3 (1 action): tap "Places" pivot name (basically same as the hamburger)

To get to the People pivot to the Collection pivot:
With the updated pivot style:
- Method 1 (3 actions): swipe left -> swipe left -> swipe left
- Method 2 (3 actions): swipe right -> swipe right -> swipe right
- Method 3 (2 actions): tap hamburger -> tap "Collection"
- Method 4 (3 actions): swipe left -> swipe left -> tap "Collection" (this is one of the crazier things with this design)
- Method 5 (1 action): tap "Collection" pivot name

With the old pivot style:
- Method 1 (2 actions): swipe left -> swipe left
- Method 2 (3 actions): swipe right -> swipe right -> swipe right
- Method 3 (1 action): tap "Collection" pivot name

The bottom line is that it just adds another pivot item without providing a better navigation experience than either just a hamburger or just a pain pivot. There are now more ways of doing the exact same thing, which is confusing to the user.

It does suggest a path to solving the problem of having to keep swiping to get to the pivot you want and to make the pivot more amenable to being a navigation tool. Hubs in WP 8.1 and Win8 (what in WP7-8 were panoramas) have a built-in menu system of sorts. If you tap the title of a hub section, it can zoom out to a menu-like display (semantic zoom). Perhaps the same sort of mechanism can be used. Perhaps a special navigation icon on the left side of the menubar opposite the menu icon? Sounds like it would get a bit cluttered on the bottom and it's really kind of a hamburger button in a more reachable spot. That last part in itself is a win. Thoughts?

 

[a5cent]

^ in terms of usage that reflects my understanding too.

I'm not sure I exactly understand what you're getting at in your last paragraph, but semantic zoom controlled from the bottom app bar (if I'm understanding correctly) at least sounds interesting to me, provided the ellipsis menu and the navigational menu are combined into a single "thing". As long as it separates navigation from the pivot, I'd probably think it's at least heading in the right direction.

What I like most about the concept is how the ribbon was integrated into the bottom command bar, where the ribbon tabs are displayed at the top allowing the user to swipe between them, while providing two columns of commands to choose actions from. That is exactly the first thing that came to my mind when I saw the W10 presentation last month. That's a bit of a side show however, as it relates neither to pivots nor navigation, but I think it's by far the best part of the concept.

 

[mjrtoo]

^ in terms of usage that reflects my understanding too.

I'm not sure I exactly understand what you're getting at in your last paragraph, but semantic zoom controlled from the bottom app bar (if I'm understanding correctly) at least sounds interesting to me, provided the ellipsis menu and the navigational menu are combined into a single "thing". As long as it separates navigation from the pivot, I'd probably think it's at least heading in the right direction.

What I like most about the concept is how the ribbon was integrated into the bottom command bar, where the ribbon tabs are displayed at the top allowing the user to swipe between them, while providing two columns of commands to choose actions from. That is exactly the first thing that came to my mind when I saw the W10 presentation last month. That's a bit of a side show however, as it relates neither to pivots nor navigation, but I think it's by far the best part of the concept.

I would agree that if they were to implement a ribbon concept within the ellipses menu most people would be all over that.

 

[a5cent]

I would agree that if they were to implement a ribbon concept within the ellipses menu most people would be all over that.

That's a given, as we already saw exactly that at the W10 announcement. It just wasn't quite as good as what is shown in this concept. On the other hand, it also wasn't finished ;-) *fingers crossed*

 

[drachen23]

emantic zoom controlled from the bottom app bar (if I'm understanding correctly) at least sounds interesting to me, provided the ellipsis menu and the navigational menu are combined into a single "thing". As long as it separates navigation from the pivot, I'd probably think it's at least heading in the right direction.

I don't know how it would be combined with the ellipsis menu easily. The ellipsis menu should ideally be short. It's kind of a junk drawer. Combining them would make one button for showing tab navigation AND menu functions. It could be done in theory, but any design could get messy or confusing. They are separate concepts and should be separate button presses. Again, I think that idea makes it look a little busy. It also wouldn't work without an app bar present and visible. Just playing with the idea, I'm certainly not convinced by it. The main and only advantage over the top hamburger is that it's in easy thumb range. It's also slightly different from the hamburger in that it is clearly ONLY for navigation, not for settings, actions or anything else. Those go in the ellipsis menu.

I was thinking of something like this, with the semantic zoom button on the far left (excuse the crappy iconography, I'm not a designer by trade):

What I like most about the concept is how the ribbon was integrated into the bottom command bar, where the ribbon tabs are displayed at the top allowing the user to swipe between them, while providing two columns of commands to choose actions from. That is exactly the first thing that came to my mind when I saw the W10 presentation last month. That's a bit of a side show however, as it relates neither to pivots nor navigation, but I think it's by far the best part of the concept.

I think it's very innovative and it is the best Metro representation of the Office ribbon I've seen. I just personally hate the Office ribbon. My opinion can be summed up by this scene from Airplane:
this scene from Airplane.
It's way too busy, way too complex and hard to find what you are looking for quickly.

The bottom half of the mockup screen is now a completely separate pivot(?) and behaves very differently than the standard ellipsis menu people are used to. It's in easy reach of the thumb, which is good. Adapting Excel's massive ribbon (mine has 9 tabs plus File) would be a challenge for any designer to fit into a phone. The example has only 4 pivot items with less than 8 items and has vanishingly small descriptive text. I agree that it's a much cooler-looking design than what was demoed by MS in Jan, however.

 

[a5cent]

^ Yup, my thoughts too. You're right that the ellipsis menu and navigational menu are two separate things that shouldn't be combined. Brain hiccup there. What I was thinking of at that moment is the possibility of a command bar that registers upward swipes along its entire length, which would then open the navigation menu. That would work even if you're swiping over the ellipsis button. In that sense they'd be specially "combined" but triggered by different gestures. You could also provide a dedicated button for that purpose, like the button at the far left you suggested, just to provide an explicit visual queue.

Anyway, that's what I was thinking, but I'm not a huge fan of the idea as it seems to put too much into the bottom app bar:
- ellipsis menu
- navigational menu
- ribbon menu
All of those would open a bottom drawer pulling up separate options. It seems the amount of content "down there" could quickly become confusing (how do you get what), not to mention that it would take quite a lot of the space that is otherwise available to normal commands.

 

[c0br4]

Maybe you can add the user voice link to the top of this thread.
It's at the end of the article from the Verge.