As messaging moves beyond friends and family to include communication in marketplace, community and commerce scenarios, the user experience bar has never been higher. Users know and love their messaging apps, and it's abundantly clear now that messaging has become the dominant interaction paradigm on mobile. When it comes to messaging in other contexts besides chatting with friends, users expect the same smooth user experience as they are afforded in their favorite social apps.
The difference between an average and a great messaging experience is in the details. Done right, in-app messaging can drive transactions, raise conversion rates and build user loyalty. Trunk Club, a Layer customer, was able to increase conversions by 54% when they moved their customer communications from phone and email to rich messaging. Conversely, things like slow load times, a lack of delivery and typing indicators, and missing features (such as limiting messages to text-only) defeat the purpose of having a branded messaging app in the first place.
How do you get from bare-bones chat to an experience that fully capitalizes on the benefits of the messaging revolution? It’s about more than just integrating photos and emojis. You’ll get there by thinking strategically about every piece of the messaging interaction so that each message embodies the nuances of a personal connection. Now let’s look at the foundation, frame and bricks of what defines the world-class messaging experience.
Depending on the use case, there are important details around how conversations should be presented to the user. Whether they are between a buyer and a seller, between your support organization and the customer, or a group connecting over a common interest, conversations are the backbone of how users navigate your service and form a mental model.
Dive into the details of building an incredible messaging experience. Learn about best practices for implementing messaging for community, marketplace and commerce use cases with over 30 detailed graphics and animations.
A fundamental piece of every messaging app UI is the list of conversations a user participates in. Use cases like a concierge app or conversational commerce often feature just one conversation on the customer’s side, and a list of conversations on the agent side. If the user is engaging with a group of different specialists (or even bots) around a single purchase or request, it makes sense to keep one conversation thread with multiple participants in it. In situations where the user is engaging with different people about different things, it’s usually best to split these out into their own conversation threads and list them as such.
When a user engages in more than one conversation, it is helpful to list all conversations in one view. Conversation lists are usually sorted by most recent activity, but in some use cases it might make sense to sort them differently — i.e. to keep conversations with unread messages, or new conversations (matches) without any messages in the conversation on top of the list. If you ‘star’ a channel or person on Slack, for example, you will see that conversation appear at the top.
Every item in a conversation list can serve as a quick preview to the conversation. Most commonly, the information displayed includes conversation participants, the last message of the conversation, a timestamp of the last message and an indicator showing if the conversation has been read. These are generally all optional and depend on the use case. For example, Snapchat displays only the contact name and a message status indicator, along with the timestamp of the latest status change. Instead of adding an avatar for an additional emotional dimension in the conversation list, the Snapchat team decided to use different emoji to represent the current relationship between the two contacts.
Avatars add an emotional and human dimension to the list of conversations. They also make it easy for agents to find the conversation the user is looking for. In use cases like marketplaces, where building trust between buyers and sellers is key to driving successful transactions, avatars can help build a personal connection. The right approach to having an avatar will depend on the nature of your users’ relationships with each other and with the service.
Users want a fast messaging experience, and that includes the perceived time required to load the history of messages when accessing an old conversation. Great messaging services store those messages locally on the user’s device and display them with no delay when users enter the conversation view. Having at least a portion of the messages stored locally also enables access when the device is offline.
When scrolling back in a conversation, historical messages that are not stored on the device need to get fetched and displayed. It is a best practice to pre-load the content before it has to be displayed, so that users rarely see a loading indicator.
Always pre-fetch old messages and content so that they are waiting for the user when they open a conversation.
Do not wait until the user opens a conversation to load the most recent older messages.
Several messaging use cases can’t really function properly without robust search across all conversations or within a single conversation. In use cases where specific type of content is important, search filters can be a handy addition. This way users can search across images, videos and other file types or rich media.
Inside the conversation is where the magic happens. There are many opportunities for brands to delight users with well-thought-out details—but only after the basics are covered.
Users all want messages delivered at the speed of light, but network conditions and other technical factors can make that challenging. A great in-app messaging experience will always make users feel like instant gratification is possible. The trick is not in the actual time to send a message from the device, but in the perceived speed from tapping the send button to showing an actual message in the conversation. It’s crucial to show this visual hint without waiting for the message to actually be sent from the device, as speed can be influenced by a lot of factors.
Always render the message bubble in the conversation as soon as the user presses send.
Do not wait until the message has actually been successfully sent to display it in the conversation.
On the receiving end, a fast and performant messaging experience covers two different scenarios:
Foreground receive: The first scenario is when the user is in the application with the conversation open. We usually refer to this as a foreground state. In this scenario, typing indicators provide a sense of presence on the receiving end, and then seamlessly transition into a new message.
Background receive: The second scenario is when the app is in the background and the user receives a notification. We’ve all experienced in-app messaging where the user has to wait for several seconds before the message is actually displayed. This happens frequently with poor connectivity. It turns out there are ways to limit the number of such situations by delivering messages in the background, before the user even opens up the app. The difference in the quality of the experience is significant.
Make sure to load new messages in the background so that they are waiting for the user when they open the app.
Don't wait until the user has opened the app or the conversation in question to fetch new messages.
Knowing that a message has been delivered and read builds user trust and confidence in the service. Specifically in time-sensitive applications and marketplaces, the difference between a message that has been read or just delivered can be of crucial importance. When one party is waiting on another to respond, this extra information helps keep everyone on the same page. There are some situations, like a dating app, where being thoughtful about what kind of receipt information users are able to see about each other. It may be that showing the read status of messages in an application like that may create undue pressure to respond or anxiety around someone’s lack of response.
As we’ll touch on later, being able to track the exact status of a message also enables either the service or the user to send a message through a fallback channel, like SMS or email, if a message is not delivered or read in time.
Making the recipient aware of the fact that the sender is typing adds a real-time component and keeps users engaged in the conversation. A typing indicator sets an expectation and builds anticipation because the recipient knows a message is about to arrive. Some applications like Snapchat even send push notifications when someone is typing. This makes users come back to the conversation view even before a message arrives. It hastens the perceived speed of delivery and eventual reply, closing the conversation loop even faster.
Where appropriate, display a dynamic indicator when one user is typing so that the other user knows to expect a message.
Avoid surprising the recipient with a message out of nowhere if they are present in the conversation.
Information about presence lets users know how quickly to expect a reply. When the other party is present in the conversation, users on average wait a bit longer to see if the typing indicator is going to appear. This translates into longer sessions with more engagement, and often results in a tighter loop of communication.
Green, yellow, red dot. We all know them from desktop IM applications that had ‘online’, ‘away’ and ‘offline’ states. A combination of delivery/read receipts and last seen presence made this construct less needed, but it can still provide value in cross-platform messaging applications or concierge commerce use cases, where the green dot can serve as an indicator to the user that the agent is actually there and ready to help. It should be noted that when this expectation is set, the response needs to follow promptly, otherwise a user might feel ignored.
This type of presence indicator is also useful in scenarios where the user eventually transitions from asynchronous messaing to a synchronous voice or video call.
The ‘last seen’ information shows when a user has most recently opened the application. On mobile this is a much more valuable piece of information than if the user is ‘online,’ as was displayed in old-school desktop IM and chat applications. If a user enables push notifications for messaging on their device, they are always present in the sense that they can receive notifications and reply to them. In cross-platform applications, a combination of last seen and other types of presence indicators yields the best results.
This is a new concept of presence that has been popularized by Snapchat. Users can easily tell if the other party in the conversation is currently looking at the same view. This enables interesting scenarios like fluid transitions between asynchronous and synchronous communication, but most importantly it sets an expectation that the other party will reply promptly, consequently expanding the engagement time with the conversation view in the application.
One of the most irritating experiences you can have as a user is when messages don’t send due to poor connectivity. Applications usually show an annoying pop-up and you have to re-send the message manually. Sometimes you’re not even sure if the message went through and end up sending a duplicate. This is a common scenario for commuters that travel with the underground, or people in areas with spotty data connectivity (👋 much of the US).
Always insulate the user from connection issues by having the message show up in the conversation immediately while the application retries behind the scenes.
Never require the user to tap to retry sending when there is a connection issue.
Another common annoyance is not being able to access your message history while offline or in airplane mode. Users expect to have access to their most recent messages offline. Imagine using a service to find a place to stay, having the code to unlock the door in the conversation with your host, and then not being able to access that critical information when your device is offline. Not a great experience.
Notifications and messaging go together like two peas in a pod, like Batman and Robin or Bonnie & Clyde. Even a brilliant in-app messaging experience will fall flat if notifications are not done right.
Notifications are critical for messaging as they inform users of new messages and events in the app, and in doing so pull the user back into the experience. On wearable devices like the Apple Watch, notifications are the core interaction model. Notifications impact user retention and reactivation. Since many notifications in a messaging experience are unique and all can be personalized, the value it carries is orders of magnitude better than a generic marketing push notification carrying no actual information value to the user.
This one is pretty obvious, but we want to highlight it since there are still experiences out there where this isn’t implemented. When tapped, a notification should always take the user in the target conversation. This saves unnecessary time browsing around the app and trying to find the right message.
Badges indicate that there is an action to be completed, an unread conversation or some other application activity that needs attention. However, not all badges are created equal. On iOS, the badge number is pushed along with the notification, which means that the counts need to be calculated on the server-side. If a message is read on one device, the badge needs to be updated on all of the user’s other devices.
Some applications, like marketplaces or dating products combine the badge numbers of matches and unread conversations. Others, like communities, show the badge numbers of all unread messages. There are various combinations of the above, but it’s impossible to tell which one will perform best for your use case without some A/B testing.
Good notification copy can impact open rates even in messaging use cases. A good notification for messaging will deliver the recipient a useful amount of information and equip them for a reaction. Good notifications include the sender name, message content and occasionally an emoji to provide extra context.
Actions are one of the most powerful recent additions to notifications. Used correctly, actions remove friction by offering the user a way to reply quickly or take a pre-defined action. Every reply either results in a longer session on the recipient’s side or generates another notification that brings the recipient back into the app. Actions also come in handy to mute a conversation without opening the app and digging through settings.
Both iOS and Android notifications, as well as desktop notifications on OS X, enable users to compose a quick reply without opening the application. This enables users to close the messaging loop quickly and with minimal friction. It is highly recommended for every app with in-app rich messaging.
Finally, actions are a great interaction model on wearable devices, which make it tedious to open up the app and try to compose a long reply.
Fallback notifications can be triggered instantly for every message, but that usually results in alert fatigue since a push notification, SMS and e-mail might arrive in quick succession. A better approach is to gradually escalate channels.
Let’s say a message about a potential transaction in a marketplace is sent and delivered on the device, but is not read for X minutes. In this scenario, it makes sense to escalate the notification to one or several fallback channels.
One thing to note here about iOS 10’s new notifications framework is that Apple now allows developers to update notifications on users’ devices on-the-fly. This means that, depending on the use case, when the user misses several messages, the developer can consolidate those notifications into one bigger notification that is easier to parse.
Notifications are also important when users are already inside the app itself. While you are having a conversation with Bobby, Jenny might send you a message. In this situation, showing a notification in the app serves a similar purpose as a push notification when the application is in the background. iOS does not extend its push notifications service for in-app use cases, so anyone building a messaging experience needs to implement in-app notifications themselves. In-app notifications compound the already powerful notifications loop of messaging and keep the user engaged in the application.
In scenarios where the message is of high importance or the user might have missed it, using email and SMS as fallback channels, with deep links back to the in-app messaging flow, is a good way to keep the communication loop intact. When thinking through your notification strategy, make sure you consider fallback scenarios and what is required to trigger those fallbacks (i.e.: per message delivery/read receipts).
Because messaging can now go completely over the internet, messages can include features far beyond just text or even pictures. The world’s dominant consumer messaging apps are integrating all kinds of immersive and interactive content types, and your users will feel right at home if they find rich messaging in your app.
Let’s start with the basics. Text is the most obvious medium in most messaging applications. When testing your text messaging implementation, make sure to support UTF-8 characters (probably the only time when having a Ž and a Š in your name comes handy).
Along with support for nonstandard characters, modern messaging experiences should always support emojis. Emojis have become a cornerstone of communications because they transmit emotion in a very tiny container, enabling more personalized conversations.
A GIF is worth a thousand pictures and then some. Messaging experiences have evolved far beyond text. GIFs are worth a thousand words (and then some). Communicating through rich media has become common practice. Users should be able to compose messages with both informational and emotional value. Depending on your use case, you should consider supporting as many rich media message types as possible. With the rise of Whatsapp, Snapchat, Fb Messenger, Viber and the like, users now expect photo-, video- and audio messages in nearly every app. Sometimes it is easier and faster to package information and emotion that way versus a text message with emojis.
The best practice for implementing media messages (specifically photos and video) is to have a highly compressed thumbnail delivered in the background, before the user even opens up the app or taps on a notification. That way the user doesn’t have to wait for the content to be fetched and loaded on the device until they actually want to access it.
Always pre-fetch rich content in the background once it is received by the application so that it is waiting for the user when they open the conversation.
Don't wait until the user has opened the conversation to fetch new content.
Stickers and GIFs are a good alternative (or complement) to photo and video messages. They pack a large amount of information and emotion in a relatively small, easily consumable package. Unlike video messages, GIFs don’t come with sound and are therefore easier to consume without disrupting the outside environment. Emotional content builds product stickiness. The messaging experience is more fun, users get more positive reinforcement, and they’re able to express their emotions more fully.
Location is another popular rich media message type. Enabling a user to send a location or share a point of interest for a meeting is useful in experiences like marketplaces, dating products or communities where users plan to meet at some point in the future. Facilitating these types of interactions can help boost adoption and eliminate the friction of going back and forth between alternative apps to get the job done.
Beyond the standard media messages, there is a universe of opportunities with custom rich media cards that fit in the context of the specific application (but might not fit everywhere). A great way to visualize what’s possible is to think about each message as a mini application. It might be just an application that displays text, a photo, or alternatively presents an interface for something more complex within the constrained environment of a message cell. There is an unlimited set of opportunities to create bite size applications like a photo carousel, media players, mini games, inventory items, in-message payments and many others.
A good way to guide users to a conversation with an agent is to propose a series of predefined replies as Quick Reply buttons. That enables a quick interaction pattern and removes friction from the experience.
Not every message in a messaging experience needs to be sent by human participants. Recently there has been talk of bots being the solution to every problem in the world (or not). Leaving that long-term debate aside for now, it’s important to analyze what makes a great messaging experience when one or many participants are not human.
Depending on the use case, it is worth considering whether to reveal the bot as bot, or to make the user believe they are still talking a human agent. Both have pros and cons, but unless you feel comfortable passing the Turing test with your bot, it might be a good idea to set the right expectations for responsiveness and intelligence.
As messaging becomes an increasingly dominant form of communication, the stakes for businesses are clear: message well, or don’t message at all. Creating an experience that users will love will benefit your brand for years, if not decades. Now that you have learned everything there is to know about a world-class messaging experience you are ready to bring all the benefits of messaging in your product. You can hear Trunk Club's Layer story, start designing messaging experiences with the Layer Messaging Design Kit or get in touch.