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.

It is ā€“ and it looks way better. Thanks!

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?

2 Likes

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

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?

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.

4 Likes

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

5 Likes

Itā€™s an improvement either way. Thanks for listening to our feedback :slight_smile:

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

5 Likes

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

3 Likes

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
2 Likes

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 Likes

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

3 Likes

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 Like

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 Likes

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 Likes