Page MenuHomePhabricator

Use better site navigation on large screens for Minerva
Open, MediumPublic

Description

Problem

We use hamburger menu for site navigation (home, random, user menu etc)
The hamburger menu UI pattern is not meant for desktops or tablets as it takes way too much space and doesn't provide value.
here>

Solution

We need appropriate navigation on desktop and tablets for Minerva.
We can use the same menu items from hamburger menu and group them into 3 groups

  1. Explore = Home, Random, Nearby

Ways to explore wikipedia and our content

  1. User = Sign in OR userpage, watchlist, contributions, sign out

Ways to access user related pages and tools

  1. Settings

For now there's only 1 item in this list but as we are creating menu ui, it can be expanded as well

Design

Just the menu

  • No hamburger menu at all
  • 3 Menu icons on top right, next to notifications
  • Show dropdown on Hover with highlight effect

Explore

Anonymous user

Signed in user

Developer notes

  • This can be done only using css

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 26 2017, 2:59 AM

This can be done only using css

I think this is oversimplifying things. We'll need to be careful here as these are 2 very different menus. We'll need to think about how we ship the HTML, the CSS and JS. Can you expand on what you mean by this?

Am interested in claiming this once requirements/details are clearer.

Jdlrobson added a subscriber: alexhollender.

@Shreyasminocha I think there may be newer designs and a new direction for making this happen. @alexhollender is there a more up to date ticket that captures providing a better navigation on desktop? I'd love to set @Shreyasminocha with what they need to work on this!

alexhollender triaged this task as Medium priority.Mar 23 2019, 3:09 PM

Good to think about as we go into the desktop refresh where there's a hamburger given @Nirzar's suggestion that "The hamburger menu UI pattern is not meant for desktops or tablets"

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptJan 17 2020, 11:03 PM

I'd add to above comment, that the hamburger menu is not a universal solution on phones either. It was seen as simple answer from some designers to a complex problem. But research since then has repeatedly shown that it doesn't fully work universally (without additional label).

Good to think about as we go into the desktop refresh where there's a hamburger given @Nirzar's suggestion that "The hamburger menu UI pattern is not meant for desktops or tablets"

Thanks for bringing this up; it's good to re-read. I think there is some nuance here. My reading of Nirzar's comment is that he's referring to the specific implementation of the hamburger menu in Minerva, namely that the rest of the screen dims, the menu is very wide, and you can't have the menu open while continuing to interact with the rest of the page. Secondly I think his comment is contextual to the Minerva menu which has very few items in it. I don't think it should be read as "navigational drawers are an inappropriate pattern on desktop". Additionally, I think the introduction of a hamburger menu in Vector is only part of picture — what we're doing, more importantly, is taking the important items out of that menu and finding more appropriate places for them within the interface itself. Once we've consolidated the user links into a menu this will open up more space in the top bar/site navigation and we should further explore moving global navigation elements there. This is going to take a while, and in the end there will be a navigational drawer with secondary links, etc.

If there are patterns anyone has seen for triggering navigation drawers that are more understandable than the hamburger please share them. I think having the word "Menu" would be great and would be possible if we go with a center-aligned logo:

+1 to a center aligned logo!!

By the way: Feel free to fold any learning into the relevant new task(s) with links back to this one and resolve this one. This task has got a little stale and I don't think it makes sense to fragment conversation over several places.

Demian added a subscriber: Demian.Jan 20 2020, 10:04 PM
Demian added a comment.EditedJan 20 2020, 10:21 PM

+1 to a center aligned logo!!

That's a nice idea! When the article scrolls down, the article title could be shown there too.

There is some overlap with T240856: [EPIC] New header for desktop improvements project