To start with, let’s take a step back and understand the enablers of a successful communication first.
The messages or communication, in general can be:
Now that you have understood the most common types of messages exchanged, let us deep dive into the UI components. A general Messenger UI typically has two broad interfaces:
There are two aspects that play a major role in the UI design of the Message Inbox Interface of your application. One is the way in which conversation threads are sorted and second is the way each thread is displayed in the list. There is no one way which is universal and followed by all, rather different companies follow different ways based on their usability.
In the next two sections we will discuss about the best practices for either and build correlation with the usability and industry of companies following those practices.
It is always advisable to list down all conversations in the same view. A good practice is to make the list scrollable, and put a Search Bar for finding the conversation of choice. The most commonly encountered ways for sorting messages are:
Conversation sorting based on recent activity
Conversation sorting based on Unread Messages
Conversation sorting based on User Choice
The list of conversation threads basically has two details that needs to be considered while building the layout. One is the conversation detail that is to be displayed, the other is the image of the contact. The general practice is to display the last message, time stamp corresponding to the last message and an indicator to show whether it has been read.
Images add the human element and an emotional dimension to the conversations. In the case of Social, Dating and Messenger apps, images play a crucial part in building trust among users. For other apps, where uploading an image is more of a luxury and the average user doesn’t bother much about it; a good practice is to put up Avatars in the place of image thumbnails.
The conversation interface is where the real communication takes place. Now one thing that we need to understand here is Messaging has come a long way from being typical text messages.
Messaging these days, is a mix and match of the simplicity of chat and the interactive power of rich-media and GUI in one powerful interface. In this section, I will focus more on the must-haves of a conversation interface and the best practices associated with each:
Millennials these days demand a lightning fast experience. Any lag while loading old conversations might just agitate your users. A good practice is to store old conversations locally on the user’s device, so that they can be displayed spontaneously when the user enters the conversation interface.
Pictures can speak a thousand words. Mobile being a personal device; your application users expect a certain level of emotional connect, while messaging. Thus communicating by means of rich media, has become mainstream. Apart from the emotional value that it conveys, often times media messages convey greater informational value as well.
The best practice is to have a highly compressed thumbnail delivered in the background, even before the user fires the application or clicks on a notification. This way the user will not have to wait for the media file to load when on the conversation interface.
Images, GIFs, Audio, Video
As I mentioned earlier, often times it is advisable to drive a user response by means of an action rather than a text message. This is specifically the case where the user has to choose between a select few reply alternatives for e.g. when replying to a Poll Response.
Another popular use case of Rich Media Cards is when you want your user to take any specific action, let’s say you want them to make a purchase. All you need to do is create a Media Card of specific inventory items, attach a CTA (BUY NOW) to the card and push it on the user’s conversation interface.
Feedback Rating Scale
Product Selection Cards
Bots had been with us for quite a long time, think of Apple’s Siri or Microsoft’s Cortana. 2016 has been touted to be the year of conversational commerce and it had been proclaimed that soon there will be a bot for everything. Well if not for all, Chatbots can certainly automate some repetitive manual functions for you.
Let’s say populating replies to Frequently Asked Questions (FAQs) when users of your application seek support. In e-commerce especially, Chatbots have seen widespread usage, where a bot can make intelligent recommendations to buyers based on their input and can subsequently carry out the checkout process, all within the chat window.
Integrating Bots with Applozic Chat Framework can be done with Webhooks, or on higher plans it can be done directly from the Admin Dashboard.
Based on your Use Case, it is subject to consideration whether you would want to reveal to your users if they are chatting to a bot or to a human agent. Although, it is always advisable to set the right expectations with your customers.
DesignSense uses a Chat-based Bot Infrastructure to automate most repetitive tasks of Project Management.
Reporting an issue by populating replies to FAQs