How to properly indicate that a chat message is sent-received-seen? The WhatsApp way?

Question

We are building a cross platform mobile application and I am kind of responsible for iOS part. I'm the first one to begin to work on the instant messaging feature, so my decisions will affect my colleagues who develop Android and Windows Phone parts. And I'm stuck with the question how to properly indicate the message is sent, received, and (may be) seen?

I know that there is the WhatsApp way one tick sent and two ticks received, but this kind of mis-leading users to think that one tick is for received and two ticks for seen. I don't want this mis-leading but I also cannot tell how much damage this will do. I am open for suggestions in this matter.

Answer 1

I would not rely on colors alone for accessibility reasons, nor would I recommend WhatsApp ticks because not self-explanatory.

Apple do a good job in that they write Read below the last message. This method is definitely the easier to understand for everybody but has the "disadvantage" of having to be localized.

Also, two states should suffice: Delivered and Read. The Sent state is useless because once the message has been posted to the server there is no need to confirm it; in the case that there was an error instead, near the message you should have a Retry button.

Clean, accessible, self-explanatory.

Answer 2

As an example, I will mention about Kik Messenger. Kik Messenger shows all the 3 states of a message

1. Sent (Sent from your phone & it has been recieved on Kik's server
2. Delivered (Kik server has successfully sent your message to recipient's phone, i.e Recipient has received your message)
3. Read (The Recipient has read your message)

Kik Messenger App denotes this 3 status by displaying the first letter of these statuses against each message.

Another example is Whatsapp as you mentioned which only shows 2 status, Sent & Delivered by number of ticks. I don't think they would have shown 3 ticks if they wanted to convey that the message is read. Number of ticks can only be limited to 2 status i believe.

I find both these approach to be great. I don't think that users find 2 ticks for delivery is misleading considering the wide usage of the application. But you can always remove the confusion by either using full text for each status or just the Initials.

Answer 3

BlackBerry Messenger (BBM) uses a similar indicator to WhatsApp but it is a little clearer as to what is meant:

• Sent messages get a tick
• Delivered messages get a 'D' next to the tick
• Read/seen messages get a 'R' next to the tick in place of the 'D'

Page 6 of their PDF user guide gives examples of the icons

Answer 4

Telling a user that their message has been received by the target device isn't really as meaningful in a human sense as telling them that someone read their message.

Can your chat app tell if a message has been seen by a user? For example, if you know that the application has this screen open on the target device, you can reasonable assume that the message has been seen.

It might be nice to use this information instead of telling the user that their message was received by the device.

Answer 5

How to properly indicate that a chat message is sent-received-seen?

• light icon, for example a pidgeon: message is on the way to the server
• dark icon, for example a check: message has arrived at the server
• whatever happens next, if mails are read, when they are read, is the receivers business

I know a lot of apps do that, but if this read confirmation cannot be disabled it just creates a physical pressure on the receiver because he knows the other person knows that the message has been read. So the only correct way is to not give this information to the sender. If the receiver agrees to show his status, you show a closed and an openend envelope.

Answer 6

You might color-code it.
Colors below are just examples
If it hasn't reached the server (after x seconds), paint the frame of the message or its background red(/grey),
on server => yellow
on remote device => green
read => blue
Make sure to add some time cushions for red and yellow, so not every message blinks violently or users get confused why "all my messages are red at first".
Only make aware of the first 2 statuses (total of 4 in my perspective) once they might inidcate trouble.

Pro:

• easy to implement
• native and discrete (if done with sublte colors the information can be in plain sight, but will not be perceived until the user wishes to do that)
• could implement colors of your application's design / corporate design (like facebook-blue, whattsapp-green etc.)

Cons:

• occupies part of the visual design
• users might need to at least once look up the meaning of the colors