Prabros. logo

Prabros.

Rethinking the Chat User Interface

Designing an alternative interface for touchscreen chat apps.

When I message my friends, I frequently find myself thinking it would have been neat if there existed a certain affordance or cue in a certain part of the app. I started thinking about how it would lead to an overall better experience if a chat app possessed all these features. This prompted me to undertake a detailed study of the current and past chat interfaces leading to a detailed document. The study helped inform and foster ideas on how to improve the chat experience. This page is an exploration of these collective wishes which has been unified into a conceptual app with a harmonic design language.

The post comprises of ideas which are grouped under a main heading with subheadings. These subheadings include:

Rationale
Explains the problem and a rough outline of how we devised the solution.
Visual Design
We discuss how and why of the visual design of the UI with a brief discussion on the properties of the idiom we chose and why we chose it as opposed to other choices.
Design in Action
How it all fits together and works to solve the problem at hand.

Home Screen

Vector pen with anchors

Visual Design

We iterated nearly a dozen styles to arrive at the finalized look for the interface. And here’s how it looks:

The new chat interface design

Chat Bubbles

Idea bubble

Rationale

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.

Vector pen with anchors

Visual Design

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:

The new chat interface design
Movie Clap

Design in Action

The new chat interface design

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.

Notifications

Idea bubble

Rationale

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 incoming messages.

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.

Movie Clap

Design in Action

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.

The new chat interface design

Message Indicators

Idea bubble

Rationale

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 end.

Vector pen with anchors

Visual Design

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:

The new chat interface design
Movie Clap

Design in Action

The new chat interface design

Group Chat Likes

Idea bubble

Rationale

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.

Movie Clap

Design in Action

The new chat interface design

Emoji Animation

Idea bubble

Rationale

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.

Movie Clap

Design in Action

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!The new chat interface design

Switching Chats

Idea bubble

Rationale

Certain discussions demand frequent switching between chats. Current applications require the user to visit the app homescreen to switch between chats. This could become tedious when it involves a lot of switching. We simplified this roundabout process with this interaction.

Vector pen with anchors

Visual Design

The design places the users who have sent you new messages adjacent to the currently focussed chat window. This makes switching between active conversations breezy.

Movie Clap

Design in Action

The new chat interface design

Thank you for reading!

Support us by sharing the case study

The new chat interface design

This project is ~70% complete

Sign up for our Design Newsletter

or

Get notified on twitter

Message Bullfinch

Tools behind the scene

Softwares used in the process of making the interface

Sketch

Visual assets for the user interface was made in Sketch by Bohemian Coding. If you are a UI designer and you don’t have this app in your toolchain, you are missing out.

Quartz Composer

Prototypes shown above are fully programmed in Quartz Composer by Apple.

Origami

The bouncy animations in the interfaces are powered by Origami, A Quartz Composer plugin from Facebook.

Quartz Crystal

Quartz Crystal from Kineme is used to turn the prototypes from Quartz Composer into high quality videos.

FFmpeg

ffmpeg is used to turn the videos into the gifs you saw in the page.

Other Resources

Useful resources from the web

Thanks to Facebook Design Team for their Device Hands, Thom for UINames, Caleb Ogden for UIFaces, Delve fonts for Overpass, and PicJumbo for their stock photos.