Change Details

As part of 126214 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** {F3322758} 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 ** ([[ http://pauginer.github.io/prototypes/notifications/notification-page/index.html#dot | try prototype ]]) {F3322760} 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 ** ([[ http://pauginer.github.io/prototypes/notifications/notification-page/index.html#check | try prototype ]]) {F3366372} 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).

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** {F3322758} 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 ** ([[ http://pauginer.github.io/prototypes/notifications/notification-page/index.html#dot | try prototype ]]) {F3322760} 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 ** ([[ http://pauginer.github.io/prototypes/notifications/notification-page/index.html#check | try prototype ]]) {F3366372} 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).

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** {F3322758} 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 ** ([[ http://pauginer.github.io/prototypes/notifications/notification-page/index.html#dot | try prototype ]]) {F3322760} 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 ** ([[ http://pauginer.github.io/prototypes/notifications/notification-page/index.html#check | try prototype ]]) {F3366372} 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).