Chat badges

[andmironov]

User Story

As a user, I want to see these badges:

• Errors (Offline)
• Add to Contacts
• Unread messages above the screen

Description

Type: Feature

Summary:

Unread messages The N Unread messages badge is shown if user opens a chat, and there are a lot of unread messages and they do not fit in the screen. We show this badge with a counter which basically means “scroll to the beginning of unread messages”

Tap on Close icon (X) in N Unread messages badge :

• mark all unread messages as read.
• unread messages badge disappears

Tap on N Unread messages :

• scroll to the beginning of unread messages
• marks all unread messages as read
• unread messages badge disappears

Add to contacts We show it if the user has a chat with somebody who is not in their contacts.

Tap on Add to contacts :

• Badge disappears
• User added to contacts

Tap on Close icon (X) in Add to contacts:

• Badge disappears

Offline. Trying to reconnect Shown when there's a network error

Expected behavior

Only one badge is visible at a time. Priority:

1. Erros
2. Unread messages
3. Add to contacts

Zeplin: zpl.io/aN0ZKWQ zpl://screen?sid=5b1a79ae98f9b848590fb930&pid=5a55d587ba304eed4d2c942f

[EugeOrtiz]

Just a couple of questions on the "Offline. Trying to reconnect": is it effectively like that? The app tries to reconnect? How many attempts? What happens after those attempts?

[chadyj]

Just curious about this unread message implementation as it seems to be the inverse of the originally proposed issue. In that example, the scroll position is maintained through sessions so that when a user returns to a chat they are in the same position/history as they were previously. The user can either scroll down and catch up, or simply tap the link and jump to the latest message.

However in this design, it looks like the behavior is to always take the user to the latest message, thereby losing their scroll position. A user wanting to catch up will always have to scroll up and find their position or tap the button. Is this right?

We have had a lot of feedback that users do NOT want their chat/scroll position changed so they can easily follow along with threads without losing their place.

So my question is, is it better to remember the chat/message position and take users back to where they were before with an option to jump to newest, or the opposite where we always take users to the newest message, with an option to jump back to their previous position.

@hesterbruikman @jpbowen Any thoughts?

[EugeOrtiz]

My 2 cents. I guess my question is: Would people with +100 unread messages review them? I found this article with some stats: "About 90% people found it difficult to read all the unread messages when they have grown large in number. Only 10% people read full unread messages."

With a large amount of unread messages, I think it makes sense to have the "scroll up if you wanna read them" approach. I guess the case could be different when you have just a few unread messages.

[dmitryn]

I'm changing "Add to contacts" badge and have question about "close" button behavior. Does closing hides the badge forever and it won't ask to add to contacts anymore? Or is it temporary and badge will re-appear next time user enters the chat?

[dmitryn]

Just a couple of questions on the "Offline. Trying to reconnect": is it effectively like that? The app tries to reconnect? How many attempts? What happens after those attempts?

@EugeOrtiz we doesn't limit reconnection attempts as far as i can see. Every new attempt happens with 15 seconds delay.

/cc @yenda to confirm.

[errorists]

my 0.02. With the chat scrolling behaviour, maintaining previous scroll position on re-entry and inviting users to either manually go through unread messages in their chronological order or ignore past them and scroll to the latest one, like @chadyj described, is the preferred method. I can't really back it up with any hard scientific data, rather it's just gut feeling and extrapolation on experiences with other messaging platforms. As for those numbers @EugeOrtiz mentioned, in general, I've been talking with @hesterbruikman do we need to inform users about the specific amount of unread messages in our app. Is 9+ meaningful, is 6 less important than 40? I think those numbers can create anxiety and FOMO, and I'd love if we had an option in settings to dial that down to just circle notifications without any specific numbers inside. @dmitryn I think, yes, closing the 'Add to contacts' snackbar should be a permanent deal, it's an action a user took that he doesn't wish to see this, he may very well want to keep chatting with this person without adding him as a contact and be reminded about it every time.

[pedropombeiro]

To be honest, I don't have a strong preference as to where to position the view when jumping to an existing chat, as long as we have easy ways to jump between positions (even Slack doesn't seem to take a position on this and makes it a preference), but I agree starting on the last unread is a good default. For that to be usable though, we should fix https://github.com/status-im/status-react/issues/5185.

[lukaszfryc]

I think we should take users back to where they were before with an option to jump to newest message as Slack does it. Here is my reasoning. If we want Status to be used not only as "instant messenger" (FB Messenger always jums to the latest message) but also as a professional tool to support communities it's way better to save the last scroll position (Slack's approach).

closing the 'Add to contacts' snackbar should be a permanent deal, it's an action a user took that he doesn't wish to see this, he may very well want to keep chatting with this person without adding him as a contact and be reminded about it every time.

I 100% agree. I think if someone clicked it once it does not want to click it again 5 min later when he opens the chat again. So, I'd say X icon should hide it forever. You can always add a user to the contacts from the chat options -> view profile.

[dmitryn]

I would prefer to return to the first unread message (to continue reading where i left) with the option to jump down to the newest message.

[jpbowen]

Tend to agree with others here re: chat scroll behavior and that we should maintain position from previous session / state. Unfortunately, we don't have any of our own UXR data (qual or quant) but possibly could be covered in upcoming Chat UXR sessions cc' @hesterbruikman? Would also mention that context is key here in that as a user I prefer to scroll up to skim messages in a public channel to "get the gist" of what's happened versus picking up an important 1:1 chat where I want to pay attention to the details of the thread before responding and therefore want to continue from where I left off.

@errorists On the indicator issue, these numbers vary in utility depending on channels / chats that I care about versus those that are not high priority and will likely remain in a permanent state of 9+. I actually like Slack's treatment here:

[errorists]

@jpbowen Yeah that's what I had in mind, that little empty badge : just enough to get attention :) Having said that, the utility of having those numbers inside could increase once we implement direct replies and mentions, then both could be used to count the total shown in the indicator, leaving anything else out for public chats, again similar to Slack. Also, I'm not saying removing those numbers should be the default, rather I'd appreciate a more granular control to showing notifications inside the app.

[Graeme-Code]

My 2 cents, There are two chat examples to draw off, WeChat and Telegram. Telegram takes the user to where they left off with an option to quickly go down to the most recent message, this is as per @chadyj suggestion.

WeChat takes the user to where the conversation is currently with the option to auto go where the user was last.

I'm for taking users to where they left off and giving them the option to catch up on the conversation in the order that it occurred in, seems natural to me.

[errorists]

So if we agree on changing the way unread messages are handled, I feel like a design like this would be more appropriate since you scroll downward to go through unread messages, also I think the full-width banner is a bit excessive 👉 https://framer.cloud/rlnqR

Scroll - Unread

This project was made with Framer, a design tool for turning original concepts into working prototypes.

[lukaszfryc]

I think we all agree that we should keep the scroll position on re-entry and have a way to easily scroll to the bottom of the chat. Scrolling to the bottom will also mark all messages as read. So, no need to implement https://github.com/status-im/status-react/issues/5394 anymore.

@errorists do you still think the https://framer.cloud/rlnqR is the best way to accomplish it? Will that counter not interfer with "mentions" in the future? Let's finalize it and create a separate issue to implement it. This one is already hard to follow.

Scroll - Unread

This project was made with Framer, a design tool for turning original concepts into working prototypes.

[errorists]

do you still think the https://framer.cloud/rlnqR is the best way to accomplish it? Will that counter not interfer with "mentions" in the future? Let's finalize it and create a separate issue to implement it. This one is already hard to follow.

It will require a couple of minor visual tweaks but other than that I can't think of anything else to further improve it. I'll update the designs today

Scroll - Unread

This project was made with Framer, a design tool for turning original concepts into working prototypes.

[chadyj]

Thanks for picking this up. It’s been a big pain point and feature request so looking forward to getting it done for our next release.

Don’t forget desktop designs too 😜

[errorists]

Added the feature request, complete with designs here https://github.com/status-im/status-react/issues/6375

[yenda]

close superseeded by https://github.com/status-im/status-react/issues/6375