Page MenuHomePhabricator

x "Mark as read" in Flow messages in Echo flyout UX (too small, lacks tooltip, etc.)
Closed, ResolvedPublic

Description

Get some Flow notifications, then bring up the Echo flyout.
In the messages tab, the × symbol is

  • Quite small (in most fonts × is petite)
  • Doesn't have a background, so you don't know how big it is
  • Its hit target doesn't extend to the top and right of the notification, so you can't just move your mouse to the top right corner of the notification to dismiss it.
  • Doesn't have its own href, so the target location the browser displays remains the same.
  • Doesn't have a tooltip

Result: you visit the target of the notification instead of marking it as read, either because you mis-hit or couldn't tell where the mark as read ends.

The Flow team didn't have a design for this so we used × like post-edit. But post-edit implements it better: larger glyph, hit target extends to top right, etc. Perhaps it should use wikiglyph-x instead.

Related: I keep expecting the × symbol to make the notification go away (and when it doesn't I automatically try to swipe it away). If the × doesn't have that "it goes away" behavior then the icon for "Mark as read but don't actually get rid of it" should be something other than an ×.


Version: master
Severity: minor

Details

Reference
bz69915

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 3:36 AM
bzimport added projects: Notifications, Design.
bzimport set Reference to bz69915.

spage, can you attach a screenshot? Since I don't have new notifications I'm unable to see how it looks like (https://bugzilla.wikimedia.org/show_bug.cgi?id=69966).

We definitely need a tooltip for this.

Created attachment 16275
Flyout screenshot from bug 69986, shows teeny 'x'.

Attached:

That is tiny. It should be at least 1em instead of 0.8em.

Created attachment 16663
excessive margins around 'x' and overlap, on enwiki

Attached:

In 1.25wmf1 and later the × symbol has large margins around it (because it's mw-ui-button), so it is far from the right edge and can overlap the text of the notification (see newer attachment).

Also the x is inside the anchor for the overall notification link, and its hit target doesn't extend to the top and left of the notification. So you can't just click in the top left corner to close the notification, and you can't tell from the hyperlink or the mouse cursor whether a click will follow the notification link or mark it read.

Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptApr 6 2015, 8:35 PM

@violetto: should this still be assigned to you?

Legoktm moved this task from Backlog to Needs plan on the Notifications board.Jul 6 2015, 8:16 AM

I'm pretty sure this has been fixed by later work in T124025. Closing this.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 23 2016, 1:22 AM
jmatazzoni closed this task as Resolved.Feb 23 2016, 1:22 AM
jmatazzoni added a subscriber: violetto.