Feedback on new 🍔 and user menus

@eviltrout just deployed the new full height, slide-out-from-the-right hamburger menu.

Try it out and see what you think. We’ll collect feedback here.

11 إعجابًا
  • the “X” should stay fixed no matter where we scroll

  • clicking on the body should dismiss the hamburger

  • Add a delimiting line between some of the items, particularly above Categories

  • A few of the menu items are strongly related and should be in columns on the same line, this will also save a fair bit of space

(two last bullets are inspired by Chrome hamburger menu)

إعجابَين (2)

Currently, on Safari (after shift-reload) there’s an always present white thing on the right that covers the hamburger menu button and so on:

3 إعجابات

On a widescreen, clicking the menu results in the menu being very far to the right of where the user has clicked.

7 إعجابات

I don’t think that’s avoidable. Here’s me doing ultra-widescreen with three monitors and Ghost.

Also, that’s not a knoife. This is a knoife.

إعجابَين (2)

Of course it’s avoidable; it could be full height and pop down from where the actual menu button is. Does being right-aligned with the window add any value by it’s own?

5 إعجابات

Mmm… is there something going to be added that makes this slide-out menu more worthwhile?

Right now:

  • It takes up a lot more screen space (I switched to height: auto, it looked rather silly full height with a small number of categories on display)
  • Is less responsive: you have to click the X instead of clicking anywhere else, like Chrome’s hamburger menu or the previous hamburger menu, and it slides out relatively slowly
  • It no longer works like the buttons around it, which makes for a kind of surprising UI element, not sure this is desirable

It’s not gonna kill me or anything, but I’m not feeling a lot of upsides to this switch at the moment.

9 إعجابات

Much better use of screen space is the main reason. We have a lot of stuff to show there, including the full category palette.

NB: Hamburger is actually missing a fair bunch of stuff. How pray tell do you get to /top from Hamburger? psst you can’t

إعجاب واحد (1)

It’s broken for right-to-left layouts. transform: translateX(330px); pushes the menu in the wrong direction. I just set a PR to fix it.

5 إعجابات

At a reasonable window width, the top right menu icons are visible in Chrome, but are covered up in Safari. Here’s this topic with Chrome on top and Safari below:

إعجابَين (2)

Yes. Just updated to v1.4.0.beta10 +5, and now Safari is broken. Can’t see hamburger menu, or notifications, etc. Help!

إعجاب واحد (1)

Why is the UX different here than for all the other top-right menus?

3 إعجابات

It appears that the hamburger menu slide out is set to “slid out” state on Safari without the menu items and unable to slide it back in.

إعجاب واحد (1)

Another minor annoyance, and this is really nit-picky, is the menu covers the progress bar. So when you are reading a topic, should you open the menu and keep scrolling, you have no idea how far down the topic you really are.

إعجابَين (2)

Perhaps we should look again at @rewphus’s proposal to merge the user drop-down with it…

6 إعجابات

Worth considering, but perhaps adopt the same behavior with notifications and search too?

إعجاب واحد (1)

I think it makes the most sense to combine hamburger with user since user has basically nothing on it and they are both “rightmost”

I also really like the idea of one less glyph on the screen a lot.

6 إعجابات

System won’t let me post screen shot. Replace xx’s to see Safari issue on our site.

إعجاب واحد (1)

You need to use -webkit-transform: translateX (0) and -webkit-transform: translateX (330px) to get it working on Safari

إعجاب واحد (1)

@sam says Safari fixes were already checked in, so you might want to check GitHub before reporting this any more?

إعجاب واحد (1)