Choosing the right platform for chatbot development: UX/UI perspective
Technological advancements in the field of artificial intelligence and machine learning have created new possibilities for chatbots in a variety of human activities.
More than 100 million Amazon Alexa and 52 million Google Home devices have been sold so far. According to forecasts, sales could exceed $10 billion and $7.5 billion by 2020 respectively.
According to the Digital Marketing Institute, the implementation of AI-based chatbots in business is forecasted to rise and over 80% of businesses are expected to integrate some kind of intelligent 24/7 virtual assistants into their marketing by 2020.
More businesses are incorporating chatbots in their operations because chatbots are getting more intelligent and human-like. With technologies such as Natural Language Understanding (NLU) and Natural Language Processing (NLP), chatbots can actually converse meaningfully with users.
More than 100 million Amazon Alexa and 52 million Google Home devices have been sold so far. According to forecasts, sales could exceed $10 billion and $7.5 billion by 2020 respectively. Both Alexa and Assistant will know their owners more and more, even their emotional state by using the tone of voice commands.
However, technical and semantic limitations of NLP tools in chatbots cannot yet enable high-quality interactions with users yet. Users expect chatbots to behave like a good friend or adviser, so well-structured answers with a pinch of empathy are a must. This can be achieved by developing a guided version of your bot along with built-in NLP as an adaptive user interface.
For instance, when creating Chatbot User Interface (CUI) for Alexa, it’s clear that you should customize every element of its Display Card. Therefore, in addition to a UX designer, you’ll also need a UI designer in your team to create an attractive user interface. At the same time, the Alexa API has almost unlimited opportunities to guide users with chatbots. You can customize the layout ( font, colour, button, image) and create a truly unique interactive design interface.
With other platforms, the number of options narrows down. Our team investigated the UX/UI capabilities of Messenger, Telegram, Skype, Slack, and Google Assistant platforms and composed a comparative table:
Below is a comparative overview of the most interesting UI elements. In almost all platforms the most common elements are rich graphical cards. They provide information in the form of image, text, and buttons that enrich the chatbot UX by allowing the user to interact with a bot without the need to type.
1. Rich Cards
Facebook messenger calls a card a “generic template”. It is a simple structured message that includes a title, subtitle (both with an 80 character limit), image (aspect ratio 1.91:1), and up to 3 buttons (20 characters limit in each button’s title). In messenger, you can use a carousel (including up to 10 generic templates) when there’s a priority order to your content.
The “list template” is a list of 2–4 structured items with an optional global button at the bottom. Each item can contain a thumbnail image (square ratio 1:1), title, subtitle, and one button.
The “receipt template” allows you to send an order confirmation as a structured message. It typically contains the list of items to include on the receipt, order summary, payment details, tax, shipping information, and other text.
The “media template” in Messenger allows you to send images, GIFs, and video as a structured message with an optional button.
The “airline templates” specifically support airline use-cases, including boarding passes, flight updates, itineraries, and check-in reminders. These templates are specially designed to provide airline customers with structured messages that are intuitive, informative, and displayed in a familiar feeling format.
Similar to Messenger’s “generic template”, Skype has a “hero card” that hosts the following properties: a title, a subtitle ( maximum 2 lines for both), rich formatted text (appears just below the subtitle), single image (aspect ratio 16:9), up to 6 optional buttons, and a ‘tap action’ (an action that is triggered when a user taps on the card).
Skype also supports carousels of up to 6 cards of the same type and a list layout, which is a vertical list of cards.
There are also a wide variety of other card types in Skype:
- Adaptive card — can contain any combination of text, speech, images, buttons, and input fields. These let you author a card once and render it beautifully inside multiple apps like Microsoft Teams or on your own website.
- Thumbnail card — typically contains a single thumbnail image, one or more buttons, and text. A Hero Card and a Thumbnail Card differ only in the size of their image and card.
- Sign-in card — enables a bot to request that a user signs in.
- Receipt card — enables a bot to provide a receipt to the user.
- Animation card — can play animated GIFs or short videos.
- Video card — can play videos.
- Audio card — can play an audio file.
There are no mandatory fields for cards in Telegram and Slack. Any combination of elements can be used.
In Telegram, it’s possible to get the functionality of scrollable cards similar to Messenger and Skype by using the “inline keyboard” that is integrated directly into the message it belongs to. Pressing buttons on inline keyboards doesn’t result in messages sent to the chat, but does update or manipulate existing messages on-the-fly. This can be a substitute for carousels since an unlimited number of text messages can be linked to a particular inline button.
Telegram supports four kinds of attachments: photos, videos, documents (GIFs, docs) and locations. Photos are downloaded automatically once the user starts viewing the chat, and the downloading of videos and documents is initiated by a tap on the content (this behaviour can be changed by the user in the Settings section).
In Slack, we could not find a way to create something similar to a carousel or a list because its functionality is different than the other platforms considered. We can only try to use interactive messages, which contain buttons, a variety of menus types, or they have some custom actions available.
In Google Assistant we can use basic cards (also called entity cards) to display an image (forced to be 192 dp tall), title, sub-title (both are at most one line, extra characters are truncated), and text (10 line limit with an image, 15 line limit without an image. This is about 500 (with image) or 750 (without image) characters. Cards are designed to be concise, to present key information to users, and to allow users to learn more if they want via a web button.
Since Assistant has no button templates you can add up to 8 suggestion chips below the cards to continue or pivot the conversation (see the image above). Also, you can customize the primary and background colours of cards in Assistant to represent your brand.
If you want the user to pick from a list of choices with a focus on larger images, you can use a carousel, which has a limit of 8 items. Carousels are good when various options are presented to the user, but a direct comparison is not required among them (versus lists). In general, lists are preferred over carousels because they are easier to visually scan and interact with through voice.
A media response in Google Assistant is used to play and control the playback of audio content like music, news, or podcasts. There are 2 image options: a small square thumbnail on the right, or a large image on top (which spans the full width of the card). The media response is used to give visibility to an audio track e.g. name, length, optional associated image, and Play/Pause control. This card is used to present a single piece of audio to the user.
2. Quick Replies
In Messenger, quick replies provide a way to present a set of up to 11 buttons in-conversation that can contain a title and optional image or just text and appear prominently above the composer. You can also use quick replies to request a location, email address, and phone number.
When a quick reply is tapped, the buttons are dismissed, and the title of the tapped button is posted to the conversation as a message.
In Skype, quick replies correspond to Suggested actions. Suggested actions appear close to the composer and enhance user experience by enabling the user to answer a question or make a selection with a simple tap of a button, rather than having to type a response with a keyboard. Unlike buttons that appear within rich cards (which remain visible and accessible to the user even after being tapped), buttons that appear within the suggested actions pane will disappear after the user makes a selection. This prevents the user from tapping stale buttons within a conversation and simplifies bot development (since you don’t need to account for that scenario).
In Google Assistant, quick replies are called “Chips”. Chips help users 1) refine topics, 2) discover related topics, next steps, and pivots, and 3) take action. Sometimes it’s faster and easier for users to tap a chip than it is to say or type their response. When users tap a chip, that text becomes part of the conversation as the user’s response.
Chips can only be displayed on devices with screen output. The number of chips that appear depends on the size of the screen on which they appear, with any remaining chips scrolling offscreen ( maximum number of chips per turn is 8).
Quick text replies may also be sent with an optional image that appears as an icon beside the title.
Quick replies in one-click Telegram integrations correspond to keyboard (callback) buttons. When a user clicks one of the buttons, the buttons are dismissed and the bot simply receives the relevant query. This prevents users from clicking buttons that are attached to old messages in a conversation. Upon receiving the query, the bot can display results in a notification at the top of the chat screen or in an alert.
3. Commands
We would also like to draw attention to the possibility of integrating slash commands which present a more flexible way to communicate with your bot. This capability is available only in Telegram and Slack. Messages that begin with a slash (/) are commands and will behave differently from regular messages. Commands typically trigger an action (like posting a gif, starting a video conference, adding something new to your to-do list or do some custom things which you have hardcoded).
When someone types a slash command, the message (and its data) will be sent to the configured external URL via HTTP POST request. It’s up to you, the developer, to do something with the message data and respond back if desired.
4. Custom keyboard
One of the most awesome things in Telegram Bot API is their custom keyboards. Whenever your bot sends a message, it can pass along a special keyboard with predefined reply options. Telegram apps that receive the message will display your keyboard to the user. Tapping any of the buttons will immediately send the respective command. This way you can drastically simplify user interaction with your bot. Telegram currently supports text and emoji for custom buttons.
Actually, we can accommodate the Telegram custom keyboard for the purpose of using it as Persistent menu in Messenger. Let us consider what’s it’s going to look like.
5. Persistent menu
The persistent menu can be set for Facebook Messenger bots to help people discover and more easily access your functionality throughout the conversation. The persistent menu is always available to the user. This menu contains top-level actions that users can enact at any point. Having a persistent menu easily communicates the basic capabilities of your bot for first-time and returning users. The menu will automatically appear in a thread if the user has been away for a certain period of time and then returns.
Conclusion
With a wide range of messaging platforms available in 2019, choosing the best one for your bot might not be an easy task. After all, it all depends on the specifics of your business, product or service strategy and target audience, as well as functionality, interfaces and capabilities of messaging platforms. Ask yourself, “will a human cope with the problem better, faster, sufficiently?” If the answer is yes, there’s no need to use such a bot.
Interested in chatbot development projects? Take a look at the articles where we describe how our team built a Bus Schedule chatbot and launched a JobBot to simplify recruitment processes.
Ivan Kotiuchyi, Valentyn Vaityshyn from Ciklum NLP/Chatbot Team and chatbot expert, Oleh Bodilowsky.
