Conversations

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.

Single vs. Multi-thread conversations

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.

Sorting Conversations

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.

Sorted by most recent message

Option to change sort criteria

Sorting by unread messages

Conversations Details

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

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.

Avatars help you locate threads at a glance.

Avatars can help establish trust.

Avatars can present in a variety of forms.

History access

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.

Do
Always pre-fetch old messages and content so that they are waiting for the user when they open a conversation.

Don’t
Do not wait until the user opens a conversation to load the most recent older messages.

Search

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.