Contact Us
Prabros. logo

Prabros.

Twitter
Isometric Grid
Isometric Icon for Chat Bubbles Idea
Isometric Icon for Locked Messages Idea
Isometric Icon for Reply Notifications Idea
Isometric Icon for Switching Chats Idea
Isometric Icon for Animated Emojis Idea
Isometric Icon for Chat Likes Idea
Isometric Icon for Homescreen Idea
Isometric Icon for Tags Idea
Isometric Icon for Chat Indicators Idea
Isometric Icon for Timeline Jump Idea
Device illustration Chat message illustration Chat message illustration Chat message illustration Chat message illustration
Hovering chat's shadow
Hovering chat

10 Interface Ideas for Chat Applications

Exploring new interface ideas for touchscreen chat apps.

When I message my friends, I frequently find myself thinking it would have been neat if there existed a certain feature which would have made the interface a lot more usable and fun. I started thinking about such ideas and how it would lead to an overall better experience if a chat app possessed all those. This prompted me to prototype a few of these interface ideas which ended me up in writing this document. What follows is an exploration of all these ideas I wish existed in touchscreen chat apps.

Icon for Chat Bubble Section

Chat Bubbles

Rationale

The way apps currently visualize the state of the message you sent is with a tiny icon (usually a check mark), sometimes accompanying a piece of text. This detail is so subtle most of the time to be noticed by a novice user. As an anecdote, when my mother started using chat apps long ago, she came to me asking whether the message she sent was seen whenever she sent a message. 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 lighter when it's seen. This provides more screen real estate to communicate the state of the message. Additionally there is a more relatable icon for the user to correlate and confirm that the chat has been seen. A tiny detail that I have additionaly included is the blinking eye. This signifies that the other party is still on 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.

Static image of the Homescreen design
Icon for Homescreen section

Homescreen

Rationale

The homescreen of the app is imagined as a dashboard where you can view all the messages and user statuses in a quick glance.

The design of the chat bubbles are reused here so that users can easily identify the state of the messages and who sent them without much hassle. User’s live status messages are also shown on the homescreen.

Icon for Notifications Reply section

Notification Reply

Rationale

Occasionally, in the middle of a chat I get a message from someone that only requires a short and swift reply. Current interfaces require 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 are multiple incoming messages. Moving to an whole another screen just to send a single message disrupts the flow of the ongoing conversation. We tried to minimize the cost of this context switch in our redesign.

Whenever a notification pops up there's a tiny arrow to prompt a swipe down action. 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 back from wherever you left off.

Icon for Message Indicators Section

Message Indicators

Rationale

Usually when someone is about to chat with you, a pulsing indicator accompanying a text is displayed to anticipate the incoming message. We tried to make this indicator a bit more expressive by devising metaphors that were expressive of the activity being conducted at the other end.

As we can’t predetermine how long someone might take to create a message, we made the animated icons in a way that they can be looped indefinitely and can be ended at an arbitrary point in time.

Icon for Chat Likes Section

Chat Likes

Rationale

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 having to send a message saying I agree with this, you can just tap the like button.

Icon for emoji animations section

Emoji Stories

Rationale

Emojis in their current form are static. We have 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 lively by turning it into an animation. This thinking lead to the idea of emoji stories: animating sequence of emojis in a flipbook-esque style.

To start animating emojis, just add a + symbol between the emojis 😊 + 😄 . You could also create multiple animations of this sort in a single message by adding a space between the sequences.

Icon for switching section

Switching Chats

Rationale

Certain conversations demand frequent switching between chats. Currently, the user visit the app homescreen to switch between chats. This could become tedious when it involves a lot of switching. We attempted to simplify this roundabout process with this interaction.

Icon for Tag Section

Tags

Rationale

Finding chats is an ardous task in chat apps. A tagging system enables the user to collect related messages together and easily access them afterwards.

To add a tag the user tap a message, type in the tags and hit add. A tag icon and the no. of tags associated with a chat is shown on the right side of the messages.

Icon for lock section

Locked Messages

Rationale

There are occassions where you will have to send a private message that you don't want to share with anyone other than the receiver. This feature lets the user to lock a message which the reciever can only access after a verification check.

We chose to use TouchID here to unlock the messages. One could also use a passcode or a FaceID instead.

Icon for Timeline Section

Timeline Jump

Rationale

This is another nagging situation that pops up in chat applications often where I find myself trying to retrieve a particular message and searching turns out to be futile because recalling the exact words I sent turns out to be really difficult. Oftentimes you will have a faint memory of when this particular conversation happened, so we decided to create a timeline view that could help the user to follow this hunch and explore the chat history.

In the timeline view a bird's eye view of the whole week is presented where you can scroll horizontally to go through previous days. Images you sent and recieved are used as anchors to help you find the right spot in time to jump to.

Thank you for reading!

Support us by sharing the case study

Newsletter Icon

Stay in the Loop!

Newsletter Icon

Hit us up!

Send us an email

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.

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.

Figma

The header illustration and the icons on the webpage are designed in Figma!

Other Resources

Useful resources from the web

Thanks to Thom for UINames, Caleb Ogden for UIFaces, Delve fonts for Overpass, and PicJumbo for their stock photos.