Page MenuHomePhabricator

Vector "More" dropdown arrow has strange click behavior
Closed, ResolvedPublic

Description

Author: swalling

Description:
The icon (down arrow or chevron) on the action dropdown in Vector (now labeled with "more") animates when clicked. This animation serves no purpose, since it does not close or open the dropdown.

Screencast: http://quick.as/dzywsxlq


Version: unspecified
Severity: normal

Details

Reference
bz66698

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 3:16 AM
bzimport added projects: Vector, Design.
bzimport set Reference to bz66698.
bzimport added a subscriber: Unknown Object (MLST).

It "pins" the dropdown, so that it says open when you move your mouse away.

The pinning is an accessibility feature (makes the items inside the dropdown accessible with keyboard-only navigation), the animation was added relatively recently and is meant to provide some sort of a visual indicator for the pinning. The behavior is here to stay, but better ideas on what indicator to use would definitely be useful.

Do any other flyouts in mediawiki work like this? it seems odd.

swalling wrote:

(In reply to Jared Zimmerman (WMF) from comment #2)

Do any other flyouts in mediawiki work like this? it seems odd.

The notifications flyout definitely does not. It follows the behavior I expect, which is that a click closes or opens the flyout just like hover would.

There are no other hover-only flyouts that contain navigational menus. So no.

I agree that the Vector drop-down menu is strange. I happened to notice this recently as well. You can just hover the mouse over it and keep clicking and that triangle just moves up and down a little. I found the behavior unexpected and I thought it had the appearance of being broken.

(In reply to Bartosz Dziewoński from comment #1)

the animation was added relatively recently

In https://gerrit.wikimedia.org/r/#/c/110584/.

(In reply to Bartosz Dziewoński from comment #1)

It "pins" the dropdown, so that it says open when you move your mouse away.
The pinning is an accessibility feature (makes the items inside the dropdown
accessible with keyboard-only navigation), [...]

The pinning seems great. I don't think anyone objects to it.

the animation was added
relatively recently and is meant to provide some sort of a visual indicator
for the pinning. The behavior is here to stay, but better ideas on what
indicator to use would definitely be useful.

Is there a bug report or can you link the relevant Gerrit change for the animation? The animation feels a bit ehhh. I'm unclear what exactly the use-case for animation is, but in the past adding (any?) user interface animation has required a fairly high burden of proof that it's absolutely necessary, as I recall.

[Mid-air collision, reading the change now. Thanks for the link!]

The other strange behavior I find is that clicking "More" when the menu is expanded does not currently re-collapse the menu. The lack of collapsing is weird, especially when it's only accompanied by a very small animation of a related triangle icon. This is the part that looks particularly broken. Is the lack of collapsing due to the menu expanding on hover _or_ click? It seems as though even if I don't move the mouse at all and only click, that does not re-collapse the menu when it is expanded. That seems like a bug.

Okay, so I read https://gerrit.wikimedia.org/r/110584. I personally don't see a very compelling case for the animation. It seems to be mostly "because we can (with CSS)", which I agree is nice and neat, but I'm not sure this animation is necessary or helpful... it feels a bit superfluous and distracting and, in my opinion, and perhaps mixed with the lack of menu re-collapsing on click, it looks a bit broken. On other hand, I mostly use Monobook. :-) Fomafix: in the months since this change was merged, have you had any further thoughts about this?

If there's to be any animation, perhaps flipping the triangle upside down would be better? Though that's typically associated with sorting... so perhaps change the icon to a "+" and do something with that? Blergh.

swalling wrote:

(In reply to MZMcBride from comment #8)

Okay, so I read https://gerrit.wikimedia.org/r/110584. I personally don't
see a very compelling case for the animation. It seems to be mostly "because
we can (with CSS)", which I agree is nice and neat, but I'm not sure this
animation is necessary or helpful... it feels a bit superfluous and
distracting and, in my opinion, and perhaps mixed with the lack of menu
re-collapsing on click, it looks a bit broken. On other hand, I mostly use
Monobook. :-) Fomafix: in the months since this change was merged, have you
had any further thoughts about this?

Agreed.

If there's to be any animation, perhaps flipping the triangle upside down
would be better? Though that's typically associated with sorting... so
perhaps change the icon to a "+" and do something with that? Blergh.

The fundamental problem here is that a chevron like this is not typically used to representing "pinning" something permanently.[1] Instead, this kind of downward arrow is usually only to represent opening of a dropdown menu.[2]

  1. http://thenounproject.com/search/?q=pin
  2. http://thenounproject.com/search/?q=dropdown

Feel free to invent an other indicator for menuForceShow in skin vector.

Fito added a subscriber: Fito.Dec 12 2015, 6:04 PM

What about switching the down-arrow icon for an actual pin, instead of relying on an obscure and unclear animation to convey the “pin” behavior? Before finding this bug report (sorry, “task”), I also thought the animation was a bug.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 12 2015, 6:04 PM
Catrope removed a subscriber: Catrope.Jan 14 2016, 8:14 PM
SamanthaNguyen moved this task from Backlog to UX or stuff on the Vector board.Jan 5 2017, 4:11 AM
Krinkle removed a subscriber: Krinkle.Apr 14 2017, 9:37 PM
Rammanojpotla added a subscriber: Rammanojpotla.EditedApr 24 2017, 12:55 PM

Is the issue about removing the movement of the down arrow mark in the more option when clicked on it ? and also when the arrow moves down the dropdown which came due to hovering on it is not closing even when I have clicked outside anywhere but if I click on the more button again so that the arrow mark goes up the hovering works again, Is the dropdown got pinned by masking the arrow move down ? if it is the case what is the issue here?

@bzimport Is this about removing the pinning of the dropdown?

Zppix edited subscribers, added: Zppix; removed: bzimport.May 2 2017, 1:44 PM

@Rammanojpotla bzimport is a bot so theres no point pinging it, and no this is about the animation of clicking the more button arrow in vector

@Zppix yes I know, when the we click on the more button once the arrow comes down (i.e it means the arrow is pining the contents in the dropdown so that they doesn't move again up till we click on it once again(so that the arrow goes up) ) but if we just hover on it, it only display the dropdown till the pointer is on the more button or arrow mark , then Is the issue about removing the pinning of the contents or the moving down of arrow(i.e animation on click which represents the pinning of the dropdown contents ?

This is clearly explained in the task description.

matmarex removed a subscriber: matmarex.May 3 2017, 4:22 PM

I read the description above, from the above description and comments, it meant to change the symbol(downward arrow) which generally moves upside down(i.e represents pinning)(as said by bzimport in a comment above) Am I right?

@Rammanojpotla If you want to take this on, you should try to follow our WikimediaUI design specifications and its implementation in the standard UI library OOjs UI (linked is the toolbars demo) and –to repeat the task description – remove the animation.

Jdlrobson moved this task from Backlog to Later on the Readers-Web-Backlog (Tracking) board.

Change 366730 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Remove irritating transition on menu tabs

https://gerrit.wikimedia.org/r/366730

Change 366730 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Remove irritating transition on menu tabs

https://gerrit.wikimedia.org/r/366730

Volker_E closed this task as Resolved.Jul 20 2017, 9:59 PM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
Abhinand removed a subscriber: Abhinand.Jul 23 2017, 9:50 PM