Notifications and Mark as Read function

[Porlin]

Hey Team,

I was wanting some feedback regarding the Flex Notifications panel we are working on for Flex Supervisor Conditional highlighting. Please reference the previous thread for context on the Flex Notifications

We want to differentiate between messages already viewed and those not yet viewed. The recommended is that No action should be required from the user's perspective. If they open the alert, it should automatically reflect the change. We have some explorations here to differentiate between unread and read messages, with a preference for Option 2: Flag/Symbol variation.

Option 1: Text variation
Option 2: Flag/Symbol variation
Option 3: Icon variation with a tick

Do you have guidance on whether a user needs to: 


1. Click on the notifications inside the panel to indicate they have acknowledged and read it.



2. User clicking the entire row or a button to indicate they have acknowledged and read the notification.


3. Once a user opens the notification panel, the system marks the ‘Unread’ messages as ’Read’ automatically, however, a user could miss an important notification thinking it has been read when it has not. 


4. Is there a Paste component for ‘Mark as read’ or ‘Unread’ messages?

Figma link

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Comms questions (updated: 06/07/2023, similarity score: 87%)
• Variant of System Status Icon (updated: 01/24/2024, similarity score: 87%)
• Badge in masthead (updated: 06/28/2022, similarity score: 86%)

[nkrantz]

Hey @Porlin! For 1-3, the behavior of a notification going from unread --> read will largely depend on your users and product. If important notifications are common, and missing them could cause serious problems for a user, you might consider having a more interactive/intentional process to mark a notification as read (like option 1). If that's not the case, option 3 could be totally adequate.

In terms of how to show the unread notification, we'd suggest sticking with the dot pattern, as it's the most web common pattern out of your 3 options. However, the placement of the dot should be in line with the title of the notification rather than in the bottom corner, and you should use color-text-icon-notification, not green. Here's a screenshot from Jira showing the unread dot placement.

We don't have a component for "‘Mark as read’ or ‘Unread’ messages", not completely sure what that component would entail, but feel free to leave more context about that if it's something you'd like to request, and we can discuss it further.

If you'd like to discuss this answer more, or what the ideal pattern should be based on your users' specific needs, feel free to sign up for an office hours slot!

[serifluous]

Hey @Porlin ! This definitely looks like an improvement to the first options you shared and follows more conventional notification patterns. You might not need the green tick anymore since users can mainly rely on the presence of the notification dot to indicate read vs. unread states.

Also, can you clarify this question more? Having a bit of trouble following it:

Functionality of the entire notification message box
as we removed queue as the hyperlink if the entire box is clickable?
User has to click the entire box to move it to a 'read' state to acknowledge it.



Q. Do you need the hyperlinks? Would the user not expect the whole message area to take them to the section where the problem is occurring? Again, referring to the conventional patterns of notification styling like Jira. It seems too explicit to use hyperlinks unless absolutely necessary. The target to click is reduced to the hyperlink if the whole area is not clickable?

Shading vs un-shading
- Unread with red dot and blue background. Once clicked as read it turns white and a tick is generated

- We want to make the states clear if the entire box is clickable, what is the hover state, the cursor icon appears over the box then user clicks it.

Feel free to sign up for office hours if it's easier to chat through in person.

In general, though, making the entire box clickable (1) isn't great for accessibility or usability since it's unclear both that there's a click action at all and what action happens when the notification is clicked/selected, and (2) makes this panel harder to scale for future use cases if you ever do need to add links or buttons to the notification content. Does a user need to explicitly take an action to mark the notification as read? Or is it enough for them to open the panel?

[Porlin]

Thanks @serifluous I have signed up for office hours to discuss with my PM partner too.

Regarding the functionality of the entire box. We have 2 CTAs - 1/ redirect user to queues page 2/mark as read (acknowledgment of the notification.) How do we achieve both without a hyperlink on queue or a button for “mark as read?”

Do you suggest to have the hyperlink on queue name added back in?

[serifluous]

Is clicking the box the only way for the notification to be marked as read? Or does opening the notification panel also mark the notifications as read (once the panel closes)?

[PixeledCode]

@Porlin so we discussed it with the team and think that the implementation by the console notification is a good way to go.
Ideally we don't want to nest the interactive elements and making the button as an absolute position also has accessibility issues.

[Porlin]

@serifluous @PixeledCode Thank you for the feedback and office hours session. We will keep the implementation as in the console and add a CTA for “View details” at the end of every message. This CTA will take users to Queue Stats page as well as acknowledgement of the notification being read. We will remove the green tick as no longer feel it's needed.