Idea for new navigation scheme to re-purpose the hamburger

[jspautsch (Jonathan Pautsch)]

I’ve been thinking over the navigational scheme of Discourse, especially with the new menu, and the issues with the hamburger menu that have been highlighted recently in other threads.

I’d like to present another proposal for a potential re-architecture of the page navigation.

Fix the issues with the hamburger

First, the potential issues of the hamburger menu that I’d like to fix:

1. Icon ambiguous or unknown: Many users just don’t get the icon without training.
2. No information scent: Nothing to cue the user what’s inside, even if they know what the icon means, and so no reason for most users to ever click on it (and so don’t get trained on it).
3. Lack of context: Separated from all other navigation elements on the page, no spatial or hierarchical relationship to anything the user normally uses.

Keep the benefits of the current design

However, any solution that addresses these issues must keep the following utility that the current menu provides:

1. Access to less commonly used functions that don’t need to be displayed at a top level.
2. Access to key pages (like Latest) at any page in the app, even when scrolled down.

The solution?

What struck me after reviewing Discourse’s current navigation is that the primary navigation already exists elsewhere on the page: The category dropdown and sub-navigation (e.g. Latest, Top, etc.). So why not expand that with some modifications (e.g. to make it available when scrolling)? There are several advantages if this could be made to work:

• The user is already using it, so the menu is in a place that actually gets exposure.
• Because of that, the user can be trained what the hamburger means, so they don’t have to guess.
• The context of the adjacent nav items provide clues what the rest of the menu might contain.

How is this to be done? I’m glad you asked…

1. Add the hamburger icon to the current category dropdown

This dropdown now acts as the primary navigation on the page. The nav items to the right act as secondary navigation for whatever item is selected in the dropdown, very similar to now. The user photo dropdown is used for personal content (profile links, bookmarks, notifications, etc.) like it is now on meta. We now also have room for an inline searchbar, although that’s optional and not a key part of this redesign.

2. This dropdown now becomes the full menu

Now the user can learn what the hamburger means by interacting with the dropdown, which they do anyway. That way, when the user scrolls down…

3. Move the hamburger into the top-left of the header when scrolling

… We can move the hamburger to the header and the user actually knows what it does. At this point it’s very similar to what we have now, except the icon is on the left and hopefully the user has been trained as to what it means, solving the issues we had with the ambiguous hamburger icon before.

This should still work very well on mobile and the dropdown can become a full sidebar at smaller sizes.

Things still to work through…

Some potential issues remain that I have not had time to work through, although I have some ideas and am certain acceptable solutions can be found for all of them. Some aren’t really issues, just other cases we need to think about so we know how they should be handled given this new information architecture.

1. When on a page such as All Categories when some of the menu items, like Latest, are repeated in the sub-navigation, should those items be hidden from the menu to save space, or should they remain for consistency?
2. If the “About” page is the primary navigation item, what’s the default sub-nav tab? Should About be repeated? Should it be renamed?
3. My mockups only show the top-level categories in the menu now, like the category dropdown does, as a compromise between the two designs. One could argue the sub-categories clutter the menu, but I could also argue it’s important to list them somewhere besides the category page. Thoughts? Is there another way to display them?

Thoughts?

[erlend_sh (Erlend Sogge Heggen)]

I made a similar proposal a while back:

Proposing a left-aligned slide out hamburger menu

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: [image] Drilling into a Category, you see this: [image] Hamburger menu has absorbed the top sub-navigation. Hamburger menu is shown by default on index pages (on Desktop, not Mobile) Fills the same nee…

but I like how your proposal is less radical. I especially like the on-demand hamburger. I forgot that was a thing until recently when I was reminded of it by Amazon as well.

See that drop-down menu directly under the logo?

Scroll down a bit, aaand: Hamburger!

(For reasons I don’t understand however, they completely drop the sticky topnapv on mobile).

I think the design is fine as it stands as far as a first iteration goes. This, to me, is greatly preferable over the current solution.

1. The addition of Latest, Top, New, Unread makes it something I might actually use.
2. The “pop-in” nature of it improves discoverability slightly.
3. The new space on the right leaves up room for a much more inviting search button.

As for your RFC:

@jspautsch

When on a page such as All Categories when some of the menu items, like Latest, are repeated in the sub-navigation, should those items be hidden from the menu to save space, or should they remain for consistency?

I’d say just have it show everything for starters to keep it simple. Solving this problem more elegantly will require more radical changes I think. I’m pondering a unification of a left-hand hamburger and sticky index nav.

@jspautsch

If the “About” page is the primary navigation item, what’s the default sub-nav tab? Should About be repeated? Should it be renamed?

I don’t really understand what you mean here. I do think that menu still gets way too much screen estate though.

@jspautsch

My mockups only show the top-level categories in the menu now, like the category dropdown does, as a compromise between the two designs. One could argue the sub-categories clutter the menu, but I could also argue it’s important to list them somewhere besides the category page. Thoughts? Is there another way to display them?

This should be a per-forum kind of thing imo. Frankly, here on Meta we might as well be seeing sub-categories at all times, because there’s only like 7-8 or them.

[jspautsch (Jonathan Pautsch)]

@erlend_sh

I forgot that was a thing until recently when I was reminded of it by Amazon as well.

Ha, I didn’t even notice that! I think where this design improves on Amazon’s is that the hamburger icon itself is visible even when scrolled to the top, that way a mysterious hamburger doesn’t appear on scroll-down without any context.

@erlend_sh

(For reasons I don’t understand however, they completely drop the sticky topnapv on mobile).

Interestingly, another alternative idea I had was to make the topnav sticky. I don’t think you lose too much realestate on mobile and it would be more direct than the hamburger alone. But I understand if the devs want to keep things clean, so this is a good compromise proposal.

@erlend_sh

I’m pondering a unification of a left-hand hamburger and sticky index nav.

I think they’d blend very well together. Might be a bit tight on mobile to move the category dropdown into the header, but it could be done.

@erlend_sh

I don’t really understand what you mean here. I do think that menu still gets way too much screen estate though.

So with this new navigation, the menu dropdown is visible on every page, not just pages with categories. It’d be labeled with the name of the page, so e.g. if you were at tags you’d see the hamburger icon and “Tags” next to it, and then any sub-nav related to that page to the right.

On the About page, you’d see “About” in the dropdown, but then that page has several sub-navs: About, FAQ, Terms, etc. If About is both the name of the page and the name of one of the sub-navs, is that confusing?

[jspautsch (Jonathan Pautsch)]

@erlend_sh

I made a similar proposal a while back:

I should add that I loved your proposal as well, especially the "About … " (with the ellipsis) button for the additional menu items.

[holden]

@jspautsch I really like your ideas – really smart. I hope they’re considered.

[jspautsch (Jonathan Pautsch)]

For consistency, links in the new menu that act as shortcuts to sub-navigation items (e.g. All Categories > Latest) should be displayed somewhat differently, like using the new menu-links-header class being used in the new user menu.

This gives the hamburger menu a nice header and footer, since the About links are all sub-nav items.

Something more or less like this:

Not all those About links need to be listed but I included them to show what it would look like.

Ultimately though the menu doesn’t have to change very much from what it is now for this solution to work, especially if localization is a concern with the horizontal links. These are just some unrelated ideas on how to potentially save space.