Proposing a left-aligned slide out hamburger menu


(Erlend Sogge Heggen) #1

Continuing the discussion from Full height, slide out hamburger menu:

Here, I will make my argument in support of the left-aligned hamburger menu convention, combined with a reworking of Discourse’s default navigation of index pages.

Upon entering meta.discourse.org, you would see this:

Drilling into a Category, you see this:

  • Hamburger menu has absorbed the top sub-navigation.
  • Hamburger menu is shown by default on index pages (on Desktop, not Mobile)
  • Fills the same need as the sticky navigation.

On topic pages it is hidden by default. Here’s what it would look like if clicked:

  • In the context of a topic the hamburger serves the exact same purpose as it did before: Jump anywhere you’d like. It’s just way more familiar this way, as opposed to designing a separate menu serving up the same options.

The miscellaneous page links formerly kept in the hamburger menu has been moved to an even more subtle drop-down menu adjacent to the About link. (Though I think all of these pages should be discoverable via the About page itself as well, like some of those links already are.)

Noteworthy:

  • This means more code re-use since there’s no longer any special treatment required to make the category selection inside the old hamburger display in a smart way. The one-and-only Category drop-down should be made to scale well for forums big and small. Developers or designers should not have to worry about more than one category selector.
  • If some forum puts Tags or Badges or what-have-you to special use, they should have an official way of adding proper, prominent navigational items for these, similar to how Meta has special shortcuts for Bugs and Features.
  • I removed views to make room for the sticky sidebar.
  • I think links like “Admin” and “Flags” ought to be moved to the Profile menu, which will hopefully consume the notifications menu.

Once again, Flarum is an obvious inspiration here. That being said, I don’t like the way they turn the sidebar into a mini-topic-list once you’ve dug into a topic (Vanilla Forum also pulls a fast one on you in the sidebar sometimes). I want my left-hand sidebar to be my trusty lighthouse.

Essentially what we’re getting out of this is VBulletin’s old “quick jump menu”, but on UX steroids.


Full height, slide out hamburger menu
Topic list tabs for user-customizeable saved filters
Idea for new navigation scheme to re-purpose the hamburger
Category Sidebar
(Stephanie) #2

How would that work on mobile? There’s not much room for the navigation to go on the side like that.


(Erlend Sogge Heggen) #3

Right. I forgot to mention that the default-on is only intended for Desktop screens. On mobile, you’d always have to click the hamburger icon (or swipe from left to right) to reveal the menu, like most conventional Android apps:


(Stephanie) #4

That swipe could be tricky on iOS, since left-to-right swipe is how to go back.


(Jeff Atwood) #5

Default-on would not work for me as my browser width is 1280px. In general I think this is too radical a change to take on at any point in the next 12 months.


(Erlend Sogge Heggen) #6

I’ve done a fresh take on this. Forget about the more radical idea of having a toggle-able, fixed-by-default sidebar on desktop. I’m refocusing my proposal on two simple things:

  1. Moving the hamburger menu to the left
  2. Cleaning up the hamburger menu

This is what I’ve come up with:

  • Instead of the current hamburger’s overwhelming list of categories, we just re-use the standard category selector.
  • A new “Most popular” section, simply based on the most active categories on the site. This would also be an opening for other customisations, such as a curated “Recommended” or even a user-specific “My favorites”.
  • A new “Overview” section, that points to all those other pages.
  • Staff menu only visible to admins/moderators.
  • We’d end up with a much more straight forward space for site-owners to add their own custom menu items if they so wish.

Header bar: improvements?
(Jeff Atwood) #7

This is such a radical design change, very unlikely to happen in 2016.

I also find the left aligned hamburger glyph hugely problematic; it takes precedence over the brand logo which is very odd.

I think this makes a bit more sense on mobile, where the swipe in from left is just implicit – see Slack app, etc.


(Jeff Atwood) #8

I think it’s defensible to consider this on mobile, where I already feel the current hamburger menu should be almost fullscreen already… and on desktop if the browser is mega-wide we could do something on the sides with responsive design, etc.


Hamburger menu column misalignment
(Joe) #9

Albeit the content of the side panel is different in my case, I’ve been trying to put together something similar.

So it’s a great coincidence this topic resurfaces two years later. :sweat_smile:

I had to think about how to make this as non-intrusive as possible, so I’d like to share my findings / what I ended up going with:

:warning: Please note that the short clips below contain music - because I took them for a different purpose, mute the videos before starting if that’s an issue.

If on small screen:

Panel covers content and is either full-screen width or 450px wide (whichever is smaller)

If on medium screen:

Panel covers content and is 450px wide

If on Large screen

Where there is enough space content for the content to be at least 800px wide + width of the panel to be 450px + a bit of breathing space, the content is pushed to the side

On extra large screens

Where there’s just way too much space, the content is not pushed, the side panel just comes out:


(Hakan) #10

we still can not do that, we are expecting: D


(Erlend Sogge Heggen) #11

Any particular reason why this would be useful to you? We’ve not seen an overwhelming amount of interest for this proposal, so it’s not on the roadmap yet.


(Bhanu Sharma) #12

I came across this today only. It looks really cool. If it can be added as a theme component then it’s definitely worth a shot as it would sort the overlapping issue caused by the brand headers theme component.


(Jeff Atwood) #13

It would be good to follow up on this because on mobile I feel the full height slide out hamburger / user notifications has compelling arguments in its favor.


(Hakan) #15

It would be nice to get the top, new, and top components in the top menu and the hamburger menu in the left. For example reddit is new


(ginger man) #16

@Johani great work…are you planning to create a theme for this or it will be part of the core ?


(François Douville) #17

Very nice, would love to see this as a theme !!


(Yihan "Misaka 0x4e21" X.) #18

Updates

I created another theme based on the customized one listed in the original post:


It is more generic, and supports i18n locales, but it still needs some cleaning and improvements though.
You might like to have a first look:

(The screenshot presents how it works with the official Material Design Theme)


(Original post)

Well…It is possible to implement it by reopen some widget and rewrite the hamburger menu in a theme with a script block of type “text/discourse-plugin”, but it may result in a large amount of unused code rendered to the user.

I agree that it is better to include the design into the core.

The simplest way is to reattach the menu button (#toggle-hamburger-menu) in the front of header. Nevertheless, a clear DOM structure of the menu itself should be better.

Actually, I’ve developed a theme for my own website for a few months.
Warning: The theme above contains a lot of non-internationalized, hard-coded string, and many dirty hacks / improper coding practices. (It supports only zh-cn :cold_sweat:)


(Alex) #19

That looks nice! :+1:


(Kris) #21

I think it’s definitely worth considering something like this for core… one thing I’m not convinced on is having the hamburger icon on the top left. I don’t have a particularly large phone, and it’s impossible for me to reach that top left corner with one hand (the top right is pretty far away too, but it’s at least possible). Swiping helps, but we’ve also got the native browser gestures to compete with.

Also for what it’s worth, it’s starting to feel like more apps are beginning to move away from the top-left hamburger menu on mobile in favor of the bottom bar. (For example: Google’s new News app and the latest Netflix redesign have their primary navigation links in the bottom tab bar.) Bottom tab nav is a whole different conversation (and we’ve got a nice plugin already!).

One of the trickier things in the hamburger menu is how we handle categories. I think the flat list is starting to be a bit limiting for sites with long category lists, and it’s not particularly well suited for subcategories. Should we limit to popular categories (globally popular, then personally popular?) and rely on the full category page for the list of everything?


(Erlend Sogge Heggen) #22

I have a long history of burying the lead and otherwise conflating multiple independent ideas in this topic :sweat_smile:

Because this:

Can by and large be kept completely separate from this:

There’s really 3 separate UX discussions to be had here:

  1. Figuring out how to do a full-height, slide-out hamburger menu, which turned out to be more difficult than expected the last time we tried it: Full height, slide out hamburger menu

  2. Is the hamburger menu due for a redesign? My personal opinion is a resounding YES.

  3. Where should this menu be clickable and come sliding in from? That is highly subjective and ideally it’s the sort of thing that could be easily tweaked in a theme component anyway. The discussion comes down to what should be the default. Considering we already have a long-standing default in the top-right, I suggest we table this discussion indefinitely and in the meantime users like @misaka4e21 can enlighten us with theme experimentation.