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