Choosing the right platform for chatbot development: UX/UI perspective

Ciklum
Ciklum
Apr 22 · 10 min read

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.

Alexa weather template layout

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 carousel of generic templates

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.

Foursquare bot in Skype

Similar to Messenger’s “generic template”, Skype has a hero cardthat 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 cardcan 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.

An inline keyboard in telegram bot @music

In Telegram, it’s possible to get the functionality of scrollable cards similar to Messenger and Skype by using the inline keyboardthat 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.

Google Assistant entity card and chips

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

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.

Facebook Quick Replies

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).

Skype suggested actions

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).

Google Assistant

Quick text replies may also be sent with an optional image that appears as an icon beside the title.

Keyboard buttons in Telegram

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

Slack 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

Telegram custom keyboard @jobs_bot

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

Messenger 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

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.

HackerNoon.com

how hackers start their afternoons.

Ciklum

Written by

Ciklum

We write about software development, R&D, Data Analysis and digital trends that affect the way you do business.

HackerNoon.com

how hackers start their afternoons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade