Page MenuHomePhabricator

[UX] No obvious way to close notice dialog telling me that I'm using the Parsoid view experimental feature
Closed, ResolvedPublicBUG REPORT

Description

The popup that tells me that the page I am viewing is using Parsoid-Read-Views is not obviously dismissable:

Screenshot 2024-02-22 at 14.50.27.png (412×2 px, 109 KB)
  • Clicking outside of the popup does not dismiss it.
  • Hitting the escape key on my keyboard does not dismiss it.
  • Clicking the link on the popup does not dismiss it.

After complaining in another venue I was clued into clicking within the popup, but not on the obvious link it's content includes, as the expected dismissal action. This feels like a learned lore behavior that is weakly discoverable.

If the popup had included a close gadget of some kind such as an [x] of some sort in the upper right corner I would have found the dismissal option more easily via shared UX indicators from many windowed/layered user interfaces. I may have found the click to close behavior sooner if the dialog had not contained a link with the text "Click here for more information" as well as my brain discarded clicking on the dialog without triggering the link behavior as an option.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

T42307: mw.notification Usability Improvements has apparently noted that "Clicking an entire notification to close it is not a typical pattern for notifications; usually you click the entire message if it is actionable (e.g. it leads you to another screen)." since 2012!

I like the suggestion in T42307 of having a close button that appears on hover. It wouldn't even need to do anything (!) since clicking anywhere in the notice will dismiss it, but it will provide a psychological target.

Let's just add a close icon to the notification when using autoHide: false. For some reason designers are allergic to this interface, so they won't stop you. ;)

It can be done like this: https://gerrit.wikimedia.org/g/mediawiki/extensions/MobileFrontend/+/a6dc2922a2f4ec8fc55086ce181a16cb7fb29067/resources/mobile.init.styles/icons.less#4

Change 1006566 had a related patch set uploaded (by C. Scott Ananian; author: C. Scott Ananian):

[mediawiki/extensions/ParserMigration@master] Use Codex notice Message styles for Parsoid user notice

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

Change 1006566 merged by jenkins-bot:

[mediawiki/extensions/ParserMigration@master] Use Codex notice Message styles for Parsoid user notice

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

Hi there, looks like a big in the link displaying as white text on mobile notification (officewiki)

Screenshot_20240301-084550~2.png (471×1 px, 56 KB)

Well that's super interesting. Why is there all that whitespace before the last line of text, too -- maybe the whole thing is being centered?

Change 1007993 had a related patch set uploaded (by C. Scott Ananian; author: C. Scott Ananian):

[mediawiki/extensions/ParserMigration@master] Fix link color in notice on mobile

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

Change 1007993 merged by jenkins-bot:

[mediawiki/extensions/ParserMigration@master] Fix link color and alignment in notice on mobile

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

MSantos claimed this task.
MSantos moved this task from Backlog to To Verify on the Content-Transform-Team-WIP board.