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:
- Icon ambiguous or unknown: Many users just don’t get the icon without training.
- 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).
- 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:
- Access to less commonly used functions that don’t need to be displayed at a top level.
- Access to key pages (like Latest) at any page in the app, even when scrolled down.
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.
- 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?
- If the “About” page is the primary navigation item, what’s the default sub-nav tab? Should About be repeated? Should it be renamed?
- 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?