Page MenuHomePhabricator

Updates to read/unread states for notifications: As a contributor, I would like it to be easier for me to tell my read and unread messages apart, especially in dark mode.
Closed, ResolvedPublic

Assigned To
Authored By
cmadeo
Feb 23 2022, 9:52 PM
Referenced Files
F34998201: image.png
Mar 10 2022, 10:16 PM
F34998196: image.png
Mar 10 2022, 10:16 PM
F34998199: image.png
Mar 10 2022, 10:16 PM
F34998193: image.png
Mar 10 2022, 10:16 PM
F34990296: image.png
Mar 8 2022, 9:02 PM
F34990291: image.png
Mar 8 2022, 9:02 PM
F34990299: image.png
Mar 8 2022, 9:02 PM
F34990294: image.png
Mar 8 2022, 9:02 PM

Description

Why are we doing this?

Differentiating between read and unread messages was reported as difficult by 2 of 5 participants. A participant suggested utilizing a ‘blue dot’ like web to denote read status.

Contributor story

As a contributor, I would like it to be easier for me to tell my read and unread messages apart, especially in dark mode.

Quotes from Diary Study

Honestly, it is quite difficult to determine which notification is marked as read, and which is not, when you did not like to filter unread and read notification in a dark mode. Maybe it is nice to put some blue point as Wikipedia already have on a desktop versions for notifications.


Proposed design solutions

Figma: https://www.figma.com/file/cedgOU5CyOR0UVqtjDOvzE/iOS-Notifications?node-id=2086%3A15698

DefaultSepiaDarkBlack
image.png (812×375 px, 57 KB)
image.png (812×375 px, 62 KB)
image.png (812×375 px, 61 KB)
image.png (812×375 px, 54 KB)
Updates
  • Unbold all elements in read messages
  • All text utilizes Primary text color in unread messages
  • Read messages use an opacity of 50% on notification type icons
  • List items should use the same colors as defined by theme on Reading lists (HRs, primary background color, etc)

Event Timeline

LGoto triaged this task as Medium priority.Feb 28 2022, 7:48 PM
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App-Backlog board.
cmadeo updated the task description. (Show Details)
cmadeo updated the task description. (Show Details)
cmadeo updated the task description. (Show Details)

Thanks for the excellent updates! Looking good!

JMinor claimed this task.