We iterated nearly a dozen styles to arrive at the finalized look for the interface.
And here’s how it looks:
Modern chat apps notifies you if a certain message sent was seen by your friend.
The way it is currently indicated in apps is limited to the appearance of
a small icon (usually a check mark) along with a seen text. This
change is so subtle to be noticed by a novice user. As an anecdote,
my mother started using chat apps a while ago and whenever she
sent a message, she came to me asking whether the message she sent was
seen. It was hard for her to see whether the tiny tick had turned
blue. She always had to put her glasses to make sure.
We chose to make this seen/unseen distinction more obvious by making the
chat bubble paler when it's seen. Additionally there is a
corresponding eye symbol besides this chat bubble so that the user can
correlate and confirm that the chat has been seen.
This is the sequence through which the chat bubbles transition:
A tiny detail that I have included is the blinking eye. This
signifies that the other party is still at our chat screen and looking
at our messages. If the eye stops blinking and become static you can tell that they have left your chat window and might only reply later.
Occasionally, in the middle of a chat I get a message from someone
that only requires a short and swift reply. Currently, chat apps
requires you to tap on the incoming message notification which takes
you to a different screen from where you can send the reply. This
shifting back and fourth quickly becomes tedious when there's multiple
Going to another screen just to send a single message and coming back
distrupts the flow. We tried to minimize the cost associated with this
context switch in our design.
Whenever a notification pops up there's a tiny arrow indicate swiping
down. On swiping, it shows all the new messages your friend has just
sent. You can read through them and choose to give an instant reply
without a context switch and continue from wherever you left off.
In chat apps a pulsing indicator is displayed when someone is about to
chat with you. This is usually implemented with the help of an
abstract animation such as a spinner or a row of pulsating circles.
We stumbled on this idea during our design explorations that this
indicator could be made much more expressive. We did this by devising
metaphors that were expressive of the activity happening at the other
We made the icons in a way they can be looped indefinitely and can be
ended at any point of time. Here are the icons we chose for the
different message types:
Group Chat Likes
This is a feature I have always wanted. Most of the time in group
chats there will be discussions in which people say something that
need support or some kind of positive affirmation, rather than sending a message
saying I agree with this, you could just tap the like button.
Emojis in their current form are static. We have seen frequently noticed a tendency among our friends to chain these static emojis to tell a story. We felt that this could be made a bit more expressive by turning it into an animation. This thinking lead to the idea of emojis stories: animating sequence of emojis in flipbook style.
To start animating emojis, just add a + symbol between the emojis 😊 + 😄 . You could also do multiple animations in a single message by adding a space between the sequences.🎬 Try your own animations!