Page MenuHomePhabricator

Ambiguous to know where you are on Wikipedia Mobile while looking at open main menu navigation
Closed, DeclinedPublic

Description

Problem
When a user is looking at hamburger menu, the menu does not show which page they are currently on.
There's also no standard appearance change on pointer device when hovering a menu item (background-color, color change)

Solution
Use selected state for menu item from which the hamburger menu was triggered.
Example

  1. User is looking at nearby article.
  2. user taps on navigation drawer
  3. user sees Nearby menu item selected

Some menu items are not destinations (random, article namespace) for them do not highlight any menu item

this applies to User, settings, nearby, main page etc

Mock and spec

image.png (1×750 px, 140 KB)

https://zpl.io/Z2cpOSU

Notice the Home menu item is highlighted with Blue, the icon is blue and there is a sidebar for accessibility. all three combined indicate Home is selected and is where you are right now.

Developer notes

The tricky part here is making the icon blue. We don't want to have to ship an additional icon asset for every single main menu icon.
CSS filters can be used cheaply (there is a patch somewhere), but do not enjoy full browser support. Note this technique is used on the main menu in https://trending.wmflabs.org/

HTML:

		<svg>
			<filter id="filter-progressive-icon" colorInterpolationFilters="sRGB"
				x="0" y="0" height="100%" width="100%">
				<feColorMatrix type="matrix"
					values="0.2 0   0   0 0
                  0   0.4 0   0 0
                  0   0   0.8 0 0
                          0   0   0   1   0" />
			</filter>
		</svg>

CSS:

 .item {
  -webkit-filter: invert(1) url(#filter-progressive-icon);
  filter: invert(1) url(#filter-progressive-icon);
}

Event Timeline

This seems like a general case for all other menu items too where highlighting makes sense.

Jdlrobson renamed this task from When on Main_Page, “Home” isn't indicating active to Menu items in main page do not reflect current active page.Nov 14 2016, 11:52 AM
Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.

@Nirzar you moved this to triaged but future but you didn't clarify by editing the description what the correct behaviour was.

Nirzar renamed this task from Menu items in main page do not reflect current active page to Disambiguous to know which section of wikipedia User is in looking at hamburger menu.Apr 14 2017, 12:11 AM
Nirzar updated the task description. (Show Details)

@Jdlrobson Updated

Nirzar renamed this task from Disambiguous to know which section of wikipedia User is in looking at hamburger menu to Ambiguous to know which section of wikipedia User is in looking at hamburger menu.Apr 14 2017, 12:12 AM
Nirzar renamed this task from Ambiguous to know which section of wikipedia User is in looking at hamburger menu to Ambiguous to know where you are on Wikipedia Mobile while looking at navigation drawer.

@Nirzar can you add a mock? It's not clear how something gets highlighted.
When done you can move this to "Needs analysis" column.

the mock is currently the style for the hover impact - I've asked @Nirzar how they should interact.

alexhollender_WMF raised the priority of this task from Low to Medium.Jun 6 2019, 10:31 PM

bumping the priority on this, I think it's a useful feature especially as a newcomer.

Jdlrobson updated the task description. (Show Details)

@Jdlrobson The merged-in task was caring about enhancing menu item's hover while current task is about selected and :active state as is.

Jdlrobson renamed this task from Ambiguous to know where you are on Wikipedia Mobile while looking at navigation drawer to Ambiguous to know where you are on Wikipedia Mobile while looking at open main menu navigation.Jun 22 2021, 8:28 PM
LGoto subscribed.

This task was closed as part of backlog upkeep. If you believe it was closed in error, please respond on the ticket.