Last modified: 2014-10-03 19:22:39 UTC
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 ×.
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 [details] Flyout screenshot from bug 69986, shows teeny 'x'.
That is tiny. It should be at least 1em instead of 0.8em.
Created attachment 16663 [details] excessive margins around 'x' and overlap, on enwiki
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.
