Page MenuHomePhabricator

Notifications tray (desktop) - design refinements
Open, 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

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.

@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 Readers-Web-Backlog team can proceed with working on this.

RHo added a comment.Aug 6 2019, 8:19 PM

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

Volker_E updated the task description. (Show Details)Aug 7 2019, 11:07 AM

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).


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?

@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.

Volker_E added a comment.EditedAug 7 2019, 2:57 PM

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 updated the task description. (Show Details)Aug 7 2019, 3:23 PM

@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 (Current Sprint).
RHo moved this task from Inbox to Q1 2019-20 on the Growth-Team board.