Page MenuHomePhabricator

Explore ways to better communicate read status
Closed, ResolvedPublic

Description

As part of T126214 we explored several possible ways to represent the read/unread status. Captured below for historical purposes:

Here are some designs that try to meet the above criteria. Some use a representation based on actions ("mark as read/unread"), others base the representation on the status ("is read/unread").

A) Tick mark as status and action

Panel-read-tick.png (646×492 px, 56 KB)

A tick mark is used to communicate that the user can mark a notification as done and to reflect the status.
This approach uses the same symbol on both read and unread status, relying only in the contrast to distinguish them. This has the risk that unread notifications may be misinterpreted as read. So we may want to evaluate if this (plus the change in background color) is enough distinction to communicate the status clearly.

B) Highlight the status only (try prototype)

Panel-read-dot.png (646×492 px, 56 KB)

A filled bright dot and an empty grey one are used to represent the two states (read and unread).
Although this approach is not uncommon (e.g., email clients), the user needs to (a) identify the status from an abstract representation, and (b) figure out that the status can be changed from there.

C) Tick mark for "done" status (try prototype)

Panel-read-dot-tic-reviewed.png (646×492 px, 58 KB)

This approach combines some ideas of the above ones, trying to compensate their shortcomings.
The unread status is represented by an empty blue circle (noticeable enough but not distracting) that invites the user to "check the box".
The read status uses a tick mark to indicate that items are "done". The tick mark is placed over a grey circle to keep the connection with the former unread circle. In this way, the interaction is presented as adding a tick to the circle but deemphasizing it (to keep read items less prominent than the unread ones).

Related Objects

StatusSubtypeAssignedTask
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedMooeypoo
Resolved Mattflaschen-WMF
ResolvedMooeypoo
Resolved Capt_Swing
Resolved SBecker
DeclinedNone
ResolvedMooeypoo
ResolvedSBisson
ResolvedMooeypoo
Resolved jmatazzoni
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedCatrope
ResolvedMooeypoo
Resolved jmatazzoni
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedNone
ResolvedMooeypoo
ResolvedNone
ResolvedSBisson