Modern chat apps are designed to give users real-time messaging experiences. They strive to be as engaging as an in-depth, in-person conversation, often implementing a bundle of engagement features.
And, out of all the chat engagement features available, nothing screams “real-time” quite as much as those three little dots that indicate someone else is typing. For better or worse, those typing dots keep you at the edge of your seat as you wait for a response. Typing indicators such as these are a crucial aspect of building an engaging chat experience.
In this article, we'll go over everything you need to know about typing indicators—what they are, why they are important, how they work, and how you can implement them in your own chat app.
What are Typing Indicators?
Simply put, a typing indicator is a messaging feature that signals when another user is inputting a message. There are many different styles of typing indicators, but they all serve the same purpose: to allow users to see when someone else is typing.
Probably the most well-known typing indicator is the one used for iMessages—those three animated typing dots that pop up when your conversation partner is typing. But iMessage isn't the only chat application to use typing indicators. Nearly all modern chat apps, from work tools such as Slack to social apps such as Facebook Messenger, have some sort of typing indicator. Some messaging apps even let you customize your typing indicator, so you can choose one that fits your personality or mood.
You may be asking yourself, "Why do all these apps have typing indicators?" Let's dive into that next.
Why are Typing Indicators Important?
As we alluded to in the introduction, typing indicators are incredibly important. Now, we're going to take a deeper look into why it's a good idea to include typing indicators in your chat app to improve the chat experience.
The more users engage with your app, the more you'll benefit—which is why it's important to implement chat features that boost engagement. One such feature, and a very popular one at that, is (you guessed it) a typing indicator.
Whether you're building a phone chat app or a web-based chat app, you will be battling for your users' attention. There are countless distractions available them with just one click, swipe or voice command.
Typing indicators keep users' attention by providing real-time feedback that replicates the feelings and cadence of an in-person conversation. They capture the pause that happens when you wait for a person to come up with a response to what you just said. A typing indicator is a signal to the user that the conversation is still alive (or not).
For example, if you're in a chat and you see a typing indicator pop up, you'll know someone is about to say something, and you'll be more likely to wait in the app. You're paying attention, and you're ready to respond (aka engage).
How do Typing Indicators Work?
But how does this work? Let’s take a look at how a typing indicator works programmatically.
When you start typing a message, the chat client will send a “typing” event to the server. This event includes a “from” field that specifies the user who is typing.
The server will then broadcast the “typing” event to all of the users in the chat room. When another user receives the event, they will display the typing indicator next to the name of the user who is typing.
The typing indicator will remain active for a few seconds after the user has stopped typing. This is to account for slight delays in the network and to make sure that the other user sees the indicator.
After a few seconds have passed, the typing indicator will be hidden.
This is a basic overview of how a typing indicator works. Of course, there are many different ways to implement this feature, and the details will vary depending on the chat client and server that you’re using. But the basic principle is the same: the chat client sends a “typing” event to the server, which is then broadcast to all of the other users in the chat room.
Different Types of Typing Indicators
There are multiple different styles of typing indicators. The three most common ones are push notifications, text-based indicators, and visual-based indicators.
Out of the three typing indicators we mentioned, this one is perhaps the least common. In fact, the only popular chat app (that we could find) that uses push notifications for typing indicators is Snapchat.
A push notification as a typing indicator means when a user starts typing a message to you, you’ll receive a push notification on your phone that alerts you. While it can sometimes feel excessive, these push notifications are very effective in getting your attention and making you engage with the app.
Text-Based Typing Indicators
The text-based indicator is a more common form of typing indicator. Instead of displaying a visual or pushing a notification to your phone, the text-based typing indicator will only show text and only while you have the app open.
A great example of a text-based indicator is Slack. When you have a conversation open with a user, and the user starts typing, Slack will display a small text string that says: “[Name] is typing…”. You can see that in action below:
Visual-Based Typing Indicators
The typing indicator that people are most familiar with is the visual-based indicator.
If you have an iPhone or have used Facebook Messenger, you’ll be quite familiar with the animated typing dots that pop up when your text partner is typing up their thoughtful response.
Visual indicators are the most popular type of indicator for a good reason. They convey the same information that a text-based indicator does. However, it also gives app creators an opportunity to add some uniqueness to their chat app with different colors or animations.
Some apps, such as Skype, even combine text-based and visual-based indicators to display text as well as some kind of animated visual.
Examples of Popular Apps that Use Typing Indicators
We already mentioned a few popular apps that use typing indicators such as Snapchat, Facebook Messenger, and iMessage. But those are just the tip of the typing indicator iceberg. Nearly all modern chat apps have some sort of typing indicator.
Here’s a larger, albeit non-exhaustive, list:
- WhatsApp: Text-based indicator
- Signal: Visual-based indicator
- Telegram: Text-based indicator
- Facebook Messenger: Visual-based indicator
- iMessages: Visual-based indicator
- Snapchat: Push notification/text-based indicator
- Android chat: Visual-based indicator
- Slack: Text-based indicator
- Skype: Text-based/visual-based indicator
How to Add Typing Indicators to Your Chat App
Now that you know how vital a typing indicator is, you’re probably wondering how to add one to your own chat app.
The technical aspect of adding a typing indicator to your chat app is going to depend largely on what kind of tech stack you’re using. Covering all the different ways to implement a typing indicator dependent on your tech stack is, unfortunately, beyond what we can feasibly do in an article.
However, the general idea is as follows:
- Create a listener event in the receiving text view that awaits a typing event
- Publish a typing event on the sender
- Update the UI on the receiving text view to indicate that the typing event started
- When the typing event ends, reset the UI
Of course, these four steps can be infinitely complicated.
Luckily, if you’ve chosen to use the CometChat Pro SDK to create your chat app, adding a typing indicator is simple.
The SDK exposes methods such as `startTyping()` that sends events to the receiver, letting them know that you’ve started typing. To receive the events, you have to write two simple functions: `onTypingStarted()` and `onTypingEnded()`. That’s all you need to implement typing indicators in your chat app. You can even create your own custom typing indicator - your creativity is the only limit.
Implementing a typing indicator will be a little different for the different platforms, so here are a few tutorials:
- How to Add a Typing Indicator to a Vue.js App
- How to Add a Typing Indicator to a React.js App
- How to Add a Typing Indicator to an Angular.js App
- How to Add a Typing Indicator to an iOS App
- How to Add a Typing Indicator to an Android App
If you’ve already started creating your chat app and are not using CometChat, I would suggest signing up for our free trial to get a taste of how easy implementing chat can be.
Note: While a typing indicator is a great way to increase engagement within your chat app, it is best practice to allow users to disable it if they want. Typing indicators have been shown to cause (or increase) anxiety in some users.
The Bottom Line
Some users have expressed their hatred for typing indicators so strongly that one of the original creators of the typing indicator felt compelled to write an article aptly named: I Built That “So-and-So Is Typing” Feature in Chat And I’m not sorry. While it may make some users self-conscious about their responding habits, overall, typing indicators make a chat app more engaging and provide a type of authenticity that resembles real-life conversations.
We hope this article answered all your questions regarding typing indicators. How do you feel about typing indicators? Hate them? Love them?