Just capturing this as it is a target for Discourse 1.4.
Our hamburger menu should be a full-height, slide out from the right. Sort of how Google Inbox does it:
This also implies search and notifications should maybe be full height slide outs, too – search is absolutely a right hand panel in Slack, for example – but let’s cross that bridge when we get there I guess?
Is it also a goal to support touch gestures? So if I’m browsing a Discourse forum on a mobile device, I could simply drag the menu in by swiping from right (edge) to left.
Some example libraries:
As long as it doesn’t trigger when you slide from the middle. Holy shit, Blogger is annoying with that…
Love the idea, seems smoother 
I might be getting WAY too far ahead of myself, but what are your thoughts on combining the avatar and notifications to clean it up a bit? Something like this perhaps?
This is interesting - I’m a little concerned with the possible size of clickable / touchable elements or menu options… they should target being finger sized (48dp).
Good point. My example was simply for a desktop view. It would have to be cut down considerably for mobile, but I think that could easily be done by eliminating the number of entries/categories shown, etc…
It’s not just mobile as more desktops and laptops are coming with dual inputs both touchpads, a mouse and touch screens.
It’s also bad practice to hide content on varying screen sizes simply because it doesn’t fit, so I may have to put my foot in my mouth on that one…
###Never completely hide content
Be careful when choosing what content to hide or show depending on screen size. Don’t simply hide content just because you can’t fit it on screen. Screen size is not a definitive indication of what a user may want. For example, eliminating the pollen count from the weather forecast could be a serious issue for spring time allergy sufferers who need the information to determine if they can go outside or not.
Back to the drawing board…
Maybe not. I think this idea could easily be enhanced by making each section (Messages, Notifications, Bookmarks) a collapsing/expanding node. Since bookmarks may be considered a little less important, perhaps that section should be collapsed by default. Add a scrollbar to the right and you may have a workable solution.
The only thing I can see throwing a wrench into the works with this idea is the addition of a Flags section for staff.
I like this a whole hell of a lot the more I think about it. User menu is so lame with so few items:
That could easily be combined. But why did you put user in the middle? Fitts law says it’ll be better on the edge, rightmost…
I really like the idea of reducing the number of permanent, non-scrolling glyphs by one, and the notification numbers being right on your face seems better to me (conceptually speaking).
What do you think @mcwumbly and @awesomerobot?
For mobile I really like this:
Maybe something like this? need to think through the details.
Woah, this is amazing, really clear and effective!
I personally always expect to see a hamburger menu at the edge. Of course that’s because it usually is the only full slide out menu. It also is generally the place you go when you can’t find what you are looking for in the main navigation, so while it’s not supposed to function as a catch-all, it really is and that’s why logically I expect it either first or last. It’s essentially just a continuation of the nav bar.
Other than discourse, I’ve never seen a hamburger not be on one edge or another, especially when it’s going to cause something to slide out from that edge… I think that’s why you see a number of apps end up putting the user avatar rightmost and the hamburger leftmost.
As for combining notifications and the user menu… I’m not sure. There aren’t a ton of items in the user menu right now, sure… but do I really want to see them underneath my notifications everytime I click to review where I’ve been liked or mentioned?
Many apps just have ‘Log out’ and ‘Preferences’ under the avatar.
I think combining them may be fighting against the grain.
Is combining those two really practical?
How would the popup look like on desktop and mobile?
As a user I want a fast way to all my notifications. Just one click. No scrolling or mentally skipping a number of menu items that are irrelevant at that time. That’s how it works right now and it’s great.
If you find a way to make it even better, that’s fine with me. But don’t make it harder to get to my list of notifications just to remove one glyph.
BTW: Google, Facebook and whatnot all use separate icons for the user and notifications…
That’s a fair point. My goal was to brainstorm ways to solve:
But i’m not really sure if those have to be full height slide outs. I’m not a big fan of having multiple slide outs, especially from the same side, so maybe it would be better just to keep it the way it is (Inbox still uses dropdowns for those features), except for the hamburger menu.
I still suggest moving the hamburger menu to the far right if it’s going to be the only slide out, even though it does go against standards of having the avatar in the top right corner.
I’ll probably get beaten for this, but what if we actually did have the hamburger menu on the left?
And maybe on mobile, the hamburger menu could show the Topic title and category as well.
[quote=“mcwumbly, post:18, topic:29789”]
As for combining notifications and the user menu… I’m not sure. There aren’t a ton of items in the user menu right now, sure… but do I really want to see them underneath my notifications everytime I click to review where I’ve been liked or mentioned?
[/quote]With a clear separation as exemplified in @rewphus’ mockup, I don’t think visual noise would be a major factor.
On the other hand, one less icon for the brain to see, understand and memorise is a pretty big deal. Also the leftover space in the header means more room for experiments like a sticky page counter or the addition of another icon for forums with (currently hypothetical) Chat enabled.
I’m all for it.
Whew, I’m glad it was you that said it and not me. I also wanted to suggest this, but was afraid I wouldn’t have enough to back it up.
I also really like the idea of giving search more emphasis, particularly on desktop. Not sure if it would be needed as much on mobile if it meant picking that over the site name, but that is for another topic.
I really like the combined notifications and avatar.
However, I don’t see all that much value in the hamburger. I have hidden it via CSS on a test site, and the only link in it that I miss is the one to admin.
