Feedback on new šŸ” and user menus

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ā€¦

8 Likes

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.

3 Likes

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.

5 Likes

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.

3 Likes

Point taken.

I guess Iā€™ve always used my browsers full screen and never thought about it.

2 Likes

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?

3 Likes

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,

4 Likes

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

4 Likes

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.

7 Likes

ā€œ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!

2 Likes

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.

3 Likes

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.

20 Likes

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. :slight_smile:

8 Likes

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.

4 Likes

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).

5 Likes

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.
6 Likes

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

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)

5 Likes

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

1 Like

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

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

2 Likes

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.

4 Likes