Feedback on new 🍔 and user menus

On OS X 10.9.5 and Chrome stable the right portion of the menu goes off screen when zoomed in.

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

It is – and it looks way better. Thanks!

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

The latest commit definitely looks and feels much nicer… but position: fixed; makes for a rough experience. I imagine that’s temporary and in the process of getting addressed?

3 إعجابات

Yup the latest build, deploying shortly has it changed to absolute following a suggestion from @Sam.

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

Just grabbed the latest commit on my instance. Feels much better! I also like how the hamburger menu no longer has a transition. I wanted to remove the transition from the other glyphs to match, but I couldn’t find the styles. Are you doing them in JS instead of CSS?

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

So, since all the screenshots seem to focus on the upper edge of the new menu, let me be the one to tell you that this is quite silly


It’s not full height for me and I even get a scrollbar. This is not me messing with the window, either (resizing, etc).

Windows 10
Opera 30.0
1366x768 laptop-resolution.

Filed Under: Not sure if all fixes are deployed. I refreshed before taking the screenshot

Addendum: If this is the way it is supposed to look, I apologize. I just have the feeling this is not how it’s supposed to look like.

5 إعجابات

Yeah @eviltrout I think there is a tiny bit too much margin from the bottom.

Similarly we need to adjust to content size here, otherwise you get this which looks real odd

6 إعجابات

It’s an improvement either way. Thanks for listening to our feedback :slight_smile:

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

Not sure if this should be a separate :bug: report, but the = shortcut to open the hamburger no longer functions.

(Firefox 40 & Chromium Version 44.0.2403.89 on Ubuntu Gnome 15.04.)

6 إعجابات

This must have happened recently, as I tested that when it was the slide out menu and it worked then. :slight_smile: Good catch!

4 إعجابات

Didn’t have much time to comment the other day, but the changes made so far are pretty much exactly what I would suggest — the structure disconnect with the slideout on desktop was real weird!

I’m not going to jump to necessarily removing things… some of this stuff is “better to have it and not need it than to need it and not have it”… but let’s take a look at organization.

Housekeeping stuff: About, FAQs, Keyboard Shortcuts

Taxonomy: users, badges, tags, categories

‘Latest’ is a bit odd on its own… are people using that? I generally click on the logo to go back to the latest page (though this behavior differs depending on preferences, and maybe that’s ok?)


Menus could be

  • Search (keep as is - expanding it inline along the buttons is a cool idea… but I think the “search this topic” and “options” are nice and warrant the extra click)
  • Hamburger
    • About
    • FAQs
    • Keyboard Shortcuts
    • Badges
    • Users
    • Tags
    • Categories
  • User (combining these is interesting… I like the mockup… but does it downplay notifications too much?)
    • Profile
    • Preferences
    • Log Out
    • Messages
    • Notifications
  • Admin (may be worth setting apart and/or expanding?)
  • Dashboard
  • Site Settings
  • Flags
  • Needs Approval
  • Akismet
3 إعجابات

Great feedback

This is one thing that we decided to keep just on the user page, inviting people to “Log Out” every time they open notifications is super weird.

I think its really interesting as an experiment to tease out admin from the hamburger. It would allow us a more comprehensive admin menu right from the header. A direct link to “site settings” for example would be mighty useful to me.

إعجابَين (2)

There is also a strong need to jump to Top, New, Unread directly which is not listed here.

4 إعجابات

For me as well. So much so that I have a plugin that adds it to the hamburger menu.
It’s localhost development so I use it extremely often.

I can’t see it being as useful for an established production site, but maybe.

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

New (3) Unread (4) in the user drop down may fit better than in the hamburger

I honestly feel About, FAQs and Keyboard Shortcuts should be at the bottom of the dropdown/slide out menu all on the bottom line. For the most part those are things that would live in the footer but aren’t possible with infinite scroll. Having them at the bottom of the menu makes it easy to find them contextually and also leaves space for more important and more used links/actions.

I think joining them might be valuable as well, or at least user and current hamburger. Having notifications be it’s own thing is good since I feel there is more that can be done as Discourse is polished and made more active.

As far as the search icon, maybe it isn’t a choice of icon that you have to click over input already available. How about an input that is smaller (not much larger than the icon itself, that when you click into it expands to take up more space and gives you the full search input. I’ve seen other sites do that and it was really intuitive and easy to use.

إعجابَين (2)

Yeah we did the search thing back at stack overflow. I really like it. (but you would lose the ability to pick context prior to searching that sucks a bit, unless we do a big revamp.)

Several people have said this and I hate saying “impossible”. It would just require some design changes, such as an always-visible footer (like the current header). I’m not saying I like that idea, but I can’t stand starting with the presumption of impossibility. :smile:

Same here. I like to think that “With code, anything is possible”

In a way, the composer is like an on-demand footer.
I don’t know if that precludes there being a “nav footer”

Jumping in late to the feedback party here.

Our discourse instance is used a lot on mobile and a full height menu with adequately sized menu items is very important. Currently I often find myself second guessing touching any menu item in the hamburger menu.

One example of good and scalable top menu design I came across is the one on 99designs.com.

The hamburger menu is on the left hand side and is expanded based on the available width (scales perfectly between mobile and desktop).

User notification and profile management is on the right hand side and also offers a popup or slide out based on the canvas width

3 إعجابات