Feedback on new 🍔 and user menus

[codinghorror (Jeff Atwood)]

I guess that’s true, what I care about is

• the merging of the glyphs for user and notifications
• having roughly the same content (maybe suppressing a few things for mobile)
• being full height

Whether it slides in from the literal right or drops down, perhaps we could make that decision based on the size of the viewport?

I’d rather have one behavior than two, though…

[riking (Kane York)]

@codinghorror

Whether it slides in from the literal right or drops down, perhaps we could make that decision based on the size of the viewport?

Looks like $('html').width() - $('#main-outlet').width() is a solid measurement… Did some experiments, the slide-out seems to get annoying around a result of 400 or so.

[jvzr (Jerry)]

Couldn’t agree more.

I tolerate the hamburger menu on mobile as I don’t see any other, better way to fit a full menu on screen. However, on desktop it really feels out of place. At work I have a shitty 1080p 20" monitor and it’s already an issue. At home, it’s going to be real bad on my 1440p 27" monitor. I don’t understand how @codinghorror is OK with that on his mutli-4K setup.

To be frank, I’m OK with full height (makes sense for Search, and the new User/Notifications dropdown is a really great idea) although for some forums it’ll look strange (ours only have 4 categories so we definitely do not have the issue Meta is having). However, the sliding from the right thing is really weirding me out, especially the (long) animation and the simple fact that the links I want to click are farther from my cursor than they have ever been.

[codinghorror (Jeff Atwood)]

Well, that’s because I run my browsers full-zoom (ala iPad). If you have browsers with giant exaggerated whitespace on each side, then yeah. But you’re wasting a ton of space on nothing.

[jvzr (Jerry)]

Point taken.

I guess I’ve always used my browsers full screen and never thought about it.

[Stephen]

It’s a bit of a problem for fixed width designs. Any easy fixes for this?

To clarify, that white rectangle is the menu before clicking:

Edit: a simple fix would just be to not set a background colour while slideright. Are there any more elegant approaches though?

[Chili]

A lot of people do use full-screen though, even if it is a waste of space. The hamburger sliding out to the extreme right is really quite jarring in those instances,

[codinghorror (Jeff Atwood)]

If you scroll up, you can read what I proposed. I’ll quote it again for clarity.

@codinghorror

Whether it slides in from the literal right or drops down, perhaps we could make that decision based on the size of the viewport?

@riking

Looks like $(‘html’).width() - $(’#main-outlet’).width() is a solid measurement… Did some experiments, the slide-out seems to get annoying around a result of 400 or so.

[erlend_sh (Erlend Sogge Heggen)]

If what comes out of this is a strictly full height hamburger menu (with slideout on mobile only), accompanied by the merging of the profile & notification buttons, I’ll rejoice.

I’d happily wager that Notifications, Search and Profile each out-click the Hamburger button 10-to-1. It could be removed today and only a small minority of users would care – of course, among them are Admins and Moderators, so it’s a breaking change. But I still maintain that the contents of the hamburger menu is in dire need of a rethink at some point further down the road.

I see hamburger improvements as more of a holdover change, whereas the avatar+notifications merger is significant progress that excites me.

[codinghorror (Jeff Atwood)]

“dire”? LOL. My main beef with hamburger, and customers have complained, is that there is no way to jump to New, Unread, etc. It’s missing a bunch of stuff!

[erlend_sh (Erlend Sogge Heggen)]

My main beef with hamburger, and customers have complained, is that there is no way to jump to New, Unread, etc. It’s missing a bunch of stuff!

That is exactly what I’m saying. The content is lacklustre, and is really way more important than the UX of the menu itself.

As long as the content remains unchanged, the hamburger menu is a top-level button - serving up low priority options - vying for attention next to your most important utilities.

[sam (Sam Saffron)]

OK, since there there is a ton here for @eviltrout to digest. The action items are.

1. Bring back old hamburger expansion logic on desktop (responsive) on width > 400

2. Keep new hamburger behavior on mobile, it is great

3. Add similar slide out for search and avatar on mobile

4. Get rid of notification bubble .fa-comment and just merge it into User

5. (I think) On narrow devices (places where you slide out) fade out the left hand side

6. Expand height of hamburger drop down on desktop

I am not totally convinced we need 2 behaviours on desktop though. Cause effectively all we will be doing is switching an expansion animation based on width which is weird.

[downey (Michael Downey)]

I think we’re ignoring the elephant in the room …

As I mentioned somewhere back earlier, most of the stuff between the buns is either redundant or doesn’t warrant being at the top of every single page.

The UX is great for top menus but we’re trying to put a bandage on the bigger problem rather than treat the cause.

[kensims]

I use the hamburger menu only for administrative functions, which means almost entirely “Admin”, plus “Needs Approval” when there is something pending.

I personally particularly find the list of categories (which is what can potentially make the menu quite long) to be especially useless.

Note that I use Discourse only on the desktop so I have no experience with it on mobile devices, and always maximized.

[downey (Michael Downey)]

the merging of the glyphs for user and notifications

Have you ever wondered why Facebook, Google, et al. don’t do this? I don’t know of any specific data on this but I would assume it’s related to directionality (stuff I’m telling you vs. stuff you’re telling me).

[fefrei (Felix Freiberger)]

Two smaller details:

1. Due to the shadows, the top-left corner always looks like the menu is one pixel too high. It’s not, but it looks strange to me.
2. Why does the x have its own line? I’d move all content up.

[eviltrout (Robin Ward)]

Due to the shadows, the top-left corner always looks like the menu is one pixel too high. It’s not, but it looks strange to me.

I’ve adjusted the shadow in the latest commit to make it more subtle. I think this helps.

Why does the x have its own line? I’d move all content up.

This is how I previously had it but @sam changed it, presumably because the yellow highlight went behind the X and it looked weird.

(I’m still working on it now, as I commit everyone will see improvements throughout the afternoon)

[john_mardlin (John)]

We have a lot of stuff to show there, including the full category palette.

I take it subtopics in the menu are being added with this feature, or are is it already an option to display them?

[fefrei (Felix Freiberger)]

This is how I previously had it but @sam changed it, presumably because the yellow highlight went behind the X and it looked weird.

Good point! I don’t have a perfect solution, my best idea is this:

I’ve adjusted the shadow in the latest commit to make it more subtle. I think this helps.

Should this already be running in meta? I still have have this problem.

[eviltrout (Robin Ward)]

Should this already be running in meta? I still have have this problem.

It is now, but perhaps you looked before our deploy finished (our deploys were snagged for a bit this afternoon.) There’s also a new one incoming with a few fixes, such as the menu not showing up sometimes.