Introduce `Mark message as unread`

[IanMayo]

While some players skim through all new messages, they may wish to highlight some that still require some action from them.

They could do this if we offered mark message as unread support. This would clear the read cookie for that message.

A Natural UI element for this would be the dark-blue Read indicator. Clicking on it would collapse the message, and clear the read flag:

[IanMayo]

@lebaphi - I welcome @ShendMikullovci contributing his thoughts on this user interaction.

A playable version of the above wargame is here: https://serge-review.herokuapp.com/?wargame=wargame-kqgy546g&access=pkoiqu5ev

I have a slight worry that the dark blue circle is a small click target, plus is a "hidden interaction" - there aren't any visual clues that the user can mark as unread by clicking it. We could include this guidance in the intro walkthrough - but I feel we can't rely on that.

[ShendMikullovci]

Great feature. The first thing that came to mind was the Gmail feature for read and unread emails. Gmail highlights unread emails to a bright grey and the read ones are kept in a dimmer and darker shade of grey, similar to our feature with lighter and brighter blue messages for the unread messages, and dimmer for the read ones. Gmail also suggests a “Mark as Read/Unread” button for each email:

The button is an open envelope to mark the email as read, and a closed one to mark it as unread. It’s a comprehensive, simple, and straightforward way to keep track of your inbox.

It could be beneficial to add a similar feature to SERGE. I went through our Icon library and found the following:

It could also be interesting to use bold colors for the unopened messages, to highlight their importance and direct attention, and dimmed colors for the opened ones to reduce attentional clutter. An important thing to consider is, once we would add this feature if we’d keep the “UNREAD” feature alongside the envelope icon. It could add unnecessary clutter to the visual display.

An alternative set of icons could be the following:

We could use the same logic with these different comment icons, keeping the bright, bold colors for the unread messages, and the dimmer ones for the read ones. This comment icon fits the description as well, given that it’s commonly used to indicate chat or chatrooms across apps online.

However, the term “chat” has a more social, almost recreational ring to it so it’s important to know beforehand what kind of messages would be circulating in order to know whether the comment icon would match the importance and seriousness of the messages.

Let me know what you guys think.

[IanMayo]

That's a fantastic idea @ShendMikullovci

We could replace the light/dark blue circles with the open/closed message marker.

@ShendMikullovci - you'll see that messages 2 and 4 in the screenshot are shown in more suppressed colors.

If you have some other formatting strategy in mind, I'm happy to hear it.

[ShendMikullovci]

Yes, messages 2 and 4 illustrate this principle. A detail that might go a long way is to dim the white segment on the side of the read messages like so:

This further emphasizes the bright/dim logic and brings more attention to unread messages. Coupled with the envelope/comment icon (depending on which we select), the side segments would switch colors depending on the state (read/unread) the user decides to leave the message in.

[ShendMikullovci]

It would look something like this:

P.S. Excuse the ugly icons, I suck at coding.

[lebaphi]

agree, the icons don't look polished @ShendMikullovci 😂

[IanMayo]

Hello @lebaphi - yes, I endorse @ShendMikullovci 's design thoughts:

1. For read messages, make the side-bar semi-transparent. 60%?
2. Display unread and read markers, using envelope and envelope-open. Read marker has Click here to mark as unread tooltip. Clicking on a Read marker switches message to Unread status.

[lebaphi]

Hi @IanMayo , do you mean to make this sidebar more transparent for read messages ?

[IanMayo]

Yes, the vertical line.

[lebaphi]

@Fixed @IanMayo 👍