noting the related task here T225260

@alexhollender thanks for working on this.
I think the proposed color treatment will definitely makes the difference between read and unread notifications more clear and explicit.
It should work equally well for desktop too.

While we're here, a couple of concerns about notifications in general:

• It doesn't seem very clear to me that the read/unread notification dots are interactive. I think the proposed color treatment for the read state of the dots is more correct than the previous one, but I'm still wondering whether the user will understand they are interactive in the first place, when they are in unread mode (I didn't know it was possible until I bumped into this, and the related task).
  • Any thoughts about this?
• I have the feeling that the links sticking to the bottom of the notification container (user avatar icon + username) won't look like interactive elements, mostly because the largest area of the notification is itself a link.
  • Do we have any data on the user interactions with those links?
  • Is it possible that a different color treatment would make the interactivity more explicit?

Moving this to external as it sounds like Web-Team working on this

@Cntlsn

Interactive read/unread dot
I agree that this isn't super clear. On desktop at least it has a hover state, but on mobile it's not discoverable at all. This is a small fix for starters, just so it stands out more: T227624. Aside from adding a "mark as unread" button I don't have any other small ideas yet. We could look at some other mobile notification systems.

Username link
Agreed. Same issue here, it's more discoverable on desktop with the hover state. We could try adding an underline to the username, though it might look weird with the avatar?

@alexhollender

Username link
Agreed. Same issue here, it's more discoverable on desktop with the hover state. We could try adding an underline to the username, though it might look weird with the avatar?

What about making it progressive blue like other links?

@alexhollender -- do you think parallel issues to the ones you're describing on this task also exist on desktop. If so, do you think we should also address desktop while we're at it?

@MMiller_WMF I believe our involvement with this started exactly because @alexhollender thought that while at it, it would be a good idea to normalize echo on both mobile and desktop. But I would leave it to him to add any further details.

In T225535#5329743, @MMiller_WMF wrote:

@alexhollender -- do you think parallel issues to the ones you're describing on this task also exist on desktop. If so, do you think we should also address desktop while we're at it?

Yes (and yes @Cntlsn ;). My understanding is that the work needs to be done separately so I've created T228819.

@Jdlrobson an additional refinement we'd like to make is to the color and outline of the dot indicator. Based on T227624#5337647 I've included that refinement in the desktop version of this task (T228819), with the understanding that it will carryover to mobile. Here is a mockup for reference:

@alexhollender, there are three icon colors currently AFAIK: progressive (blue), constructive (teal), and black. The recommendation in the description is to change progressive for read notifications only (a fourth color). Should the others be changed?

In T225535#5432450, @Niedzielski wrote:

@alexhollender, there are three icon colors currently AFAIK: progressive (blue), constructive (teal), and black. The recommendation in the description is to change progressive for read notifications only (a fourth color). Should the others be changed?

Thanks for pointing that out. When I look at notifications on desktop and mobile all icons are blue. Can you post a screenshot?

Removing story points per https://phabricator.wikimedia.org/T225535#5434577 as it sounds like the scope has changed given further analysis.

@alexhollender we can decline this if we can solve T235193 and use the desktop modal on mobile as part of T226125 - let's chat about this at next opportunity