Remove hamburger menu

The “beautiful, elegant solution that gets it all wrong”:

http://deep.design/the-hamburger-menu/

3 Likes

By “Remove” I assume you mean “Replace”

Please provide a mockup of a better alternative that will work on both desktop and mobile

5 Likes

These could be improved on:

My guess is that in most forums people will understand what the hamburger icon means. For forums where the hamburger icon is not clear to the users (forums aimed at senior citizens groups could be an example) it should be fairly easy to customize the menu toggle with a plugin.

2 Likes

LOL, it really should not be your where your main options are, but for not that used options it still a very nice UX.

I mean, if the reply button was at the hamburguer that would be bad, but for keyboard shortcuts and the like? Ok for me.

1 Like

I just recently saw this article and definitely agree with the author’s position, but “remove the hamburger menu” isn’t necessarily the solution, and is definitely an over-simplification of what the article is saying.

The point that article is trying to make is to use the hamburger correctly. For example, you don’t use it to hide priority links that you want your users to engage with.

So is Discourse making that mistake? I’m not so sure, many of the important links in the hamburger menu are duplicated elsewhere (e.g. Latest, Categories). The rest don’t seem terribly important, so perhaps it’s being used correctly. Seems like if an individual community wants to highlight one of those links, they could add it to somewhere else in the UI, like the top-nav (is it possible to add custom links to that top-nav? I thought it was).

“Menu” doesn’t solve the problem either (if it exists here), and the article points that out. The problem that “Menu” shares with the hamburger menu is there’s no “information scent,” as the article puts it. So just adding or replacing it with the word “menu” doesn’t change anything.

7 Likes
li .categories.dropdown {
   display: none;
}

Great!! OK what kind of step 2 are you recommending here?

Mockups please.

2 Likes

From our current evil hamburger menu, here’s a proposal of how to kill it:

  1. Latest - this is redundant with the navigation at the top of the topic lists.
  2. Badges - could be moved under the user menu and renamed “My Badges”.
  3. Users - could be moved under the user menu and renamed “All Users” or “Leaderboard”.
  4. Tags - could be moved to the navigation at the top of the topic lists.
  5. Keyboard Shortcuts, FAQ, and About should be moved to the footer.
  6. Categories are redundant and are already accessible from the navigation at the top of the topic lists.

1 Like

Infinite scrolling makes footer links really difficult on some pages. I think replacing the hamburger is a noble effort; but those would have to live elsewhere (anecdotally I’m finding quite often that outside of power users, the average person still doesn’t know what the three bars button means unless it’s labeled as “menu”).

There are some valid points and examples in this article

3 Likes

@rewphus previously suggested merging the notifications button with the profile button:

This could be taken a step further, merging the hamburger menu in there as well.

Another thing to remember is the hamburger menu we have now provides access to certain features from any scroll position and on any page in the app, unlike the top-nav (where Latest normally lives) which is only available on certain pages at the top of the screen. Removing “redundant” items from the hamburger is not a solution if we want those items to remain accessible. In that way they’re not really redundant, and it’s OK to have links in multiple places if it serves a purpose.

I think the better question to ask is: What are the links that communities deem important that their users are having trouble finding? i.e. Is there an actual problem here, instead of “let’s remove the hamburger because we can.” Are users not finding FAQ? About? If these links were more visible, would users ignore them anyway? Are they more important than what we already show at the top level?

I was thinking perhaps a Priority+ interaction could help if we make the fixed header adaptive with more links if screen space allows, but I’m not sure exactly how it would work and if the extra links would just distract users from what’s really important.

2 Likes

Yep and that’s what we did. Great work @rewphus! :wink: