Page MenuHomePhabricator

Help icon is misplaced on the Tags panel
Closed, ResolvedPublic

Description

On Recent Changes, the tag panel shows a "?" icon to get more details about what tags are. In beta the icon seems to be pushed down as part of an adjustment made to the previous version of the icon.

This needs to be adjusted for the icon to align vertically with the text. We may want to increase the separation also to make clear the icon is not a question mark that is part of the text (with the previous icon of a question mark inside a circle this was not an issue)

Details

Related Gerrit Patches:

Event Timeline

I see the problem on beta. Just for reference, see the screenshot below, which shows how this looks on production (in Mac Chrome, if that matters). As you can see the alignment and icon are both different from what's on beta now (and are effective, IMHO).

the icon seems to be pushed down as part of an adjustment made to the previous version of the icon.

You're absolutely right, and the low-hanging fruit here is to remove that adjustment, which is what I did in my attached patch.

Before:

After:

However, that might not be enough. I'd love to fix this better, but I'd need some guidance as to what CSS to use here. Something like margin-top: -0.1em maybe? That would look like this:

Change 422957 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@master] RCFilters UI: Remove CSS customization for help icon

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

Change 422957 merged by jenkins-bot:
[mediawiki/core@master] RCFilters UI: Remove CSS customization for help icon

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

Volker_E added a comment.EditedMar 29 2018, 4:38 PM

@Catrope The button and it's position seems fine to me with your patch. What might put some browser into bogus here, is the padding of .mw-rcfilters-ui-filterMenuHeaderWidget-title. It leads to pixel rounding. Currently the header has 45.19px` in Chrome. With 44px – padding-top: 12px and padding-bottom: 12px it seems fine (in Chrome):


Color for emphasizing outcome:

I say Chrome, because there doesn't seem to be, besides weird display: table-cell or line-height hacks, any way to perfectly control vertical alignment in em based layout calculations across browsers. Firefox and Chrome are always 1-2px different, no matter what.
We're coming close through setting explicit line-height on labels, but that should only be limited to non-wrapping OOUI elements like buttons.

Btw, isn't it nice to get rid of all those CSS overrides? :)

Trizek-WMF added a comment.EditedMar 30 2018, 8:47 AM

That icon, is it is here, looks like a bold question mark to me, like in "Tagged edits ?". That's a bit confusing.

The previous, cercled one was clearly an icon.

@Trizek-WMF Point taken, we'll add further icons in a bit… It was a necessary compromise for making the VisualEditor toolbar help not too distracting, but we're aware that it might result in confusing side-effects, that we need to overcome quickly.

Fito added a subscriber: Fito.Mar 31 2018, 7:57 AM

I didn’t find the circled question mark distracting at all. It is in fact more distracting now, as this bug report demonstrates. Circled question marks are the norm—they are familiar and predictable (compare e.g. the help buttons in macOS applications, or the little help disks in Windows 7’s Control Panel), and familiarity means no distraction. It was a completely misguided change.

@Fito As I've stated above, your sentiment is aligned with our own take on this. It was a unintended side-effect on a change for a different product and we will take care to revert this in the case of RCFilters in a timely manner.

! In T191014#4097802, @Volker_E wrote:

@Fito As I've stated above, your sentiment is aligned with our own take on this. It was a unintended side-effect on a change for a different product and we will take care to revert this in the case of RCFilters in a timely manner.

Thanks Volker!

Petar.petkovic added a subscriber: Petar.petkovic.

@Fito As I've stated above, your sentiment is aligned with our own take on this. It was a unintended side-effect on a change for a different product and we will take care to revert this in the case of RCFilters in a timely manner.

Ping.
Help icon without the circle still looks bad in-context. Also, icon is a lot bigger than text and not well aligned.


Check-boxes looks strange as well, as they're not centered.

jmatazzoni added a comment.EditedMay 24 2018, 5:54 PM

@Volker_E, just checking: is the intention here to leave the ? without a circle? I think that is a mistake, as has probably been discussed before. For these reasons: 1) Although designers frequently like to put help icons off on their own, it is usually more helpful to put them next to the item to which they refer, since such proximity creates a more obvious connection and make the help more discoverable, 2) given that, the no-circle help link has definite potential to be misinterpreted not as an icon but as just another character (which, after all, it is). This latter point means that instead of looking like a help icon, the help icon simply turns the thing it's offering help about into a question.

If that was the intention, can it please be revisited? As I say, I am a firm believer in putting the help icon next to the thing it refers to. I've seen in testing many times that this improves discoverability, which can be crucial for some confusing features.

+1 Joe! I'm still for a circled icon. :)

TheDJ added a subscriber: TheDJ.Jul 18 2018, 7:59 PM

This issue still exists.

Restricted Application added a project: Growth-Team. · View Herald TranscriptJul 18 2018, 7:59 PM
Catrope closed this task as Resolved.Aug 22 2018, 12:30 AM
Catrope claimed this task.

@Volker_E says this task is resolved (the icon is no longer misaligned). I've filed T202477: Create a help icon with a question mark in a circle for the remaining issue of creating an icon with a circled question mark.