Full height, slide out hamburger menu

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…

4 Likes

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?

  • It’d be closer to all the other “index” shortcuts, i.e. home-button, category-button and tag-button.
  • It makes two menus immediately available via swipe.
  • Left-to-right is hamburger
  • Right-to-left is notifications or profile or both, depending on where we land on that.

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.

7 Likes

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.

Yes…notifications often take a few seconds to show themselves. Let’s not kill the other menus with that sort of response, too.

1 Like

How it is now is fine.

The notifications menu is its own distinct thing - it isn’t cluttered up with other menu options that I’ll have to look past and make sure I don’t accidentally click.
Maybe the user menu is “lame” but it also keeps those options I use rarely out of the way of the options I use waaaaaaaaay more often.

I disagree that it is on mobile, I would way prefer

Swipe right to see notifications

Swipe left to see navigation

Also user drop down is weird

2 Likes

Oh mobile? Yeah, that’s different.

2 Likes

That is a lot of hidden magic there. How does one teach the mobile users of such?

I’d much rather have one menu when you swipe left or right. It can contain the menu, profile, search, what-have-you. You simply click the section and it expands the menu for that action.

Yeah, but mobile is generally not fine.

1 Like

not really … click hamburger you see an effect showing its sliding stuff in from the right to the left, swipe left is just a discoverable shortcut, commonly used on slack, gmail and plenty of other mobile apps.

Not for me…

Android 5.0.1, latest version of Chrome

Plus slack doesn’t do what you say it does… (at least on Android). The swiping moves between tabs that are already visible. It isn’t bringing out a menu that didn’t have any prior existence previously. All of the swiping features in slack, have buttons that are visible and perform that action as well (from what I can tell). There isn’t any magic that you have to guess to find notifications (I was getting the suspicion that we’re removing the buttons in Discourse… is that not true).

It has always been my understanding that we’re merely talking about swipe-gestures as an alternative to clicking a button that will be visible regardless.

Going back to the hamburger menu on the left: I don’t know about iOS, but on Android there’s definitely a trend of slide-in menus from the left, always discoverable via a visible hamburger bar.

And the menu tends to be a content-portal.

Note: These all had a visible hamburger icon in the top left corner before I clicked/swiped to reveal the menu.

I think this convention makes a lot of sense for Discourse as well.

Interestingly, none of these has a slide-in, full height menu on the right.

5 Likes

The left-swipe navigation drawer on android is a well-established standard. Google has detailed design guidelines here:

However, they typically contain many far fewer items than Discourse’s hamburger menu. ie. <10 so that no scrolling is required. Slack have just changed their interface, but the previous version had a nav drawer for channels, contacts and groups.

The current meta.discourse hamburger has 30 items, which is more than I have in my Slack nav drawer (~20). It’s an uncontrollable number of course, since people can run forums with 100 categories if they want. On my site, it’s only 14, but that’s without including sub-categories (which I’d like to see, as it happens).

+1 for consolidation of Notifications and avatar menu. It would be very clear if the hamburger on the left was for “places” and the avatar on the right was for “me” Again, this is how the previous version of the Slack app did things. (although they had no dedicated notifications area, just (1) next to channels/people who’d @mentioned you)

I think @erlend_sh’s mockup gets it just right (although I’d keep search as a glyph rather than a text box, to conserve space on mobile)

Another vote for left-hand slideout. It’s quickly becoming the standard, at least on mobile.

Maybe this is best for a separate discussion, but I’d also be in favor of removing/slimming down the number of categories listed. Maybe its just me, but I never find myself clicking them… there are other easier paths to find any given category. Instead, maybe combine all the useful “feature pages” and user menu items on the hamburger slideout, and make the user avatar handle notifications a la Rewphus.

1 Like

Okay, ignore me then :slight_smile: I mis-read something along the way. Sorry for the interruption.

Edit: As per @codinghorror’s suggestion, I started a new thread to discuss this more radical change further.

5 Likes

We are done here for now, implemented… closing.