Page MenuHomePhabricator

Notifications tray (desktop) - design refinements
Open, Stalled, Needs TriagePublic

Description

Description

This is the desktop version of T225535 (my understanding is that the work needs to be done separately).

User story: As a user, I'd like a clearer read-state for notifications, so that it's more obvious which notifications have been read.

Designs

currentrefined
Screen Shot 2019-07-23 at 4.37.22 PM.png (1×1 px, 300 KB)
image.png (1×1 px, 304 KB)

Changes to "read" treatment:

  • update background to Base90 (#f8f9fa)
  • change icon color to Base20 (#54595d)
  • change primary text to Base30 (#72777d)
  • change secondary text to Base50 (#a2a9b1)
  • update dot indicator to white background with blue outline (#36c) – *note, the expectation is that this change will carryover to mobile
  • add subtle shadows to the header and footer of the tray (OOUI reference)

Event Timeline

@Cntlsn noticing one difference from mobile here: the buttons on bottom (All notifications and Preferences) have a background of Base90 (#f8f9fa), and therefore will blend into the read notifications a bit more with this update. Could consider making their background white (as the All notifications button on mobile is), though I'm not sure if that conflicts with OOUI.

Screen Shot 2019-07-23 at 5.09.44 PM.png (1×1 px, 338 KB)

@alexhollender Thanks for creating the task! Even before reading your comment I also thought it could be good to make buttons background white, so I'm totally +1 here.
Looping in @Volker_E to check if that has any OOUI conflicts.

JTannerWMF added a subscriber: RHo.

Adding @RHo as well to weigh in. If the Growth Designers and @Volker_E agree, the Web-Team-Backlog team can proceed with working on this.

This looks good to me too, so onto @Volker_E for his OOUI informed perspective

Mentioned three times in a row her, wow! ;)
The treatment for the rows seems fine, we don't feature the content of “read” items somewhere else aside of Echo's notification popup and the corresponding treatment at Special:Notifications (enwiki).

image.png (664×1 px, 105 KB)

Latter should be taken into account in those changes as well.

I would not recommend changing to white again (we've been there) though, it's a standard visual treatment that is applied consistently.
I'd rather consider using slight box-shadow to separate content from popup header and footer and provide very subtle depth of the scrollable area. That would imply a bit bigger markup change. ccing @Catrope and @Mooeypoo too who have been on the forefront of original implementation and could probably speak if there were attempts to rely on box shadow for the content before.

I would not recommend changing to white again (we've been there) though, it's a standard visual treatment that is applied consistently.
I'd rather consider using slight box-shadow to separate content from popup header and footer and provide very subtle depth of the scrollable area. That would imply a bit bigger markup change. ccing @Catrope and @Mooeypoo too who have been on the forefront of original implementation and could probably speak if there were attempts to rely on box shadow for the content before.

@Volker_E to clarify you're suggesting adding a box-shadow like this?

image.png (1×1 px, 309 KB)

@alexhollender Even more subtle, like the ones in OOUI toolbar demos on a toolbar or on the page header.
Also both, on the popup header and the footer.

I forgot something, with the new text colors proposed we would loose level AA conformance, the read/unread dot is not the most important thing in the row…
While I do agree that read/unread is not in a perfect visual contrast right now, I would question if users don't go back to already read notifications and navigate with its elements. The proposed look implies more a “deactivated” state.

@alexhollender Even more subtle, like the ones in OOUI toolbar demos on a toolbar or on the page header.
Also both, on the popup header and the footer.

Ok, I've updated the mockup in the description and added an item to the checklist of changes

RHo edited projects, added Growth-Team; removed Growth-Team (Sprint 0 (Growth Team)).
RHo moved this task from Inbox to Q1 2019-20 on the Growth-Team board.
Jdlrobson changed the task status from Open to Stalled.Oct 22 2019, 6:54 PM

I think this should be stalled until we've reached a decision on T226125 and T235193