Back Email icon Contact

Chatbots 101: UX Design #BestPractices 🎨📲

✍️ Written by: Cezary Kuik and Zuza Śliwińska

While designing a digital or mobile experience, we usually work in the bounds of certain interaction types and particular elements of user interface. For example textboxes, forms, buttons and checkboxes. In Messenger design, those elements are different and fully combined with platform’s features.

So, when after reading about chatbots, many magical concepts for your bot activation popped up in your head, it’s good to come back down to earth and confront your goals and ideas with the limitations that come with the platform.

In this article, we would like to sum up all the elements of interface design available in Messenger, so that you could use the possibilities of the platform to the fullest. We will also present the best practices for creating a Messenger chatbot, all proofread and verified by the Bot Like You team ✅😉

Onboarding

Welcome screen is the first thing users see after opening the conversation window via the brand’s fanpage. There, you can see an Automated messaging icon, the category and the number of likes on a fanpage connected to the chatbot, short info about the chatbot, a profile picture, cover pic and an optional welcome message together with a Get Started button.

Screens from Long4Lashes Global Messenger Experience

The Get started button starts off a conversation with a chatbot. When user pushes the button, it turns into a text message of the same content and at this moment, chatbot gets the permission for sending further messages.

Between the Get started button and the basic chatbot info, you can place a welcome text, consisting of 160 characters maximum. You can use it to let your users know, you are aware of their expectations and present them with the main functions offered by your chatbot.

💪 #BestPractices:

🔹 Communicate the following features in a step-by-step mode, so that the user gets engaged in the exchange from the beginning. You can also use Quick Replies, which will trigger a special effect. For example the ❤️ or 🎈.

🔹 Share the basic rules of communication in the welcome message. Point to important keywords, commands or buttons, which users can use to quicker and more efficiently find what they need.

🔹 If you’re updating your chatbot, remember to change the welcome message. Fresh up the onboarding and make sure it fits the new version.

🔹 Stay consistent. The content of your chatbot should match what you’ve promised in the welcome message or via an ad. It’s a very common mistake!

🔹 Don’t be too general. Try to approach users directly using their names, so that the message is more personal.


Messages

There are a few kinds of messages your bot can utilize: text, multimedia files like images, video and audio. All the attachments like e.g. Terms&Conditions, you can send directly inside a chatbot or via an URL, hidden inside a button.

These might seem like totally basic elements, which shouldn’t cost any problems, since we’re exchanging them everyday with our friends. Right? 😏

Unfortunately, from what we see online, brands often make HUGE mistakes using these mediums and it often discourages users from further interaction.

💪 #BestPractices:

🔹 Short messages. Remember about the resolution and size of smartphone screens. Compact messages are easier to read and scrolling might be pretty irritating. If you have a big chunk of text to send, divide it into several short messages. You can also mix them with Quick Reply buttons like OK, sure, Understood, or an emoji like 👣, so that the user stays engaged, even if those replies don’t really matter for the whole activation.

🔹 Don’t use text, when you can send a picture, table or chart instead. Using a template or even replacing text with a webview might better suit your needs.

🔹 Pay attention to quality. Use only high-resolution images and beware of the typos!

🔹 Don’t put lots of text on images. You want your fans to see it right away, without a need to zoom in. Sometimes it’s better to go with text+image combo or an interactive template.

🔹 Don’t use open questions separately, without any answer-options for the user. It may encourage users to answer in an unpredictable way, which could lead to breaking the structure of the conversation. You can also try to utilize NLP, so that your bot can come up with a suitable answer.

Templates

Templates introduce a much richer experience than the one delivered with only standard message formats. They integrate buttons with images, lists and other elements, together with text. Templates can be used for many purposes, such as presenting product info, a list of articles to check out, asking for picking a particular set of options or showing search results.

From left: List Template, Generic Template, Media Template

Generic Template

Generic Template is a simple, well-organized message format, where you will find a title, subtitle, an image and three buttons tops. Those buttons can lead to a next message or you can set up an action behind them, for example to click-through to URL (e.g. a product’s website), opening a website inside a Messenger browser – Webview. So even though users will go to a website, they will still be inside your chatbot and come back to the conversation after closing the website. Messenger platform allows you to join 10 generic templates together, so that you can scroll through the cards like in a carousel.

💪 #BestPractices:

🔹 Use high quality images. Pics in formats other than 1.91:1 or 1:1 will be cropped or rescaled.

🔹 Use a carousel of generic templates if you want to emphasize the structure of your content, for example if one feature is more important than the others, put it first in line!

🔹 Cohesion. If you put an image or a button in one template, put it in all of them.

🔹 Don’t go too far with the number of generics in one carousel. Too many options to choose from can make it hard for people to discover them all or remember anything you want to communicate.

🔹 Don’t use the carousel of generics, if you want users to see them all right away. Consider another templates, like e.g. list.

Buttons

Buttons enable users to choose where the conversation is going. Usually each click triggers the chatbot to send another message, but there are a few types of buttons, which you can use for different purposes. For example:

🔹 URL Button: opens up the Messenger browser and triggers a click-through to website of your choosing,

🔹 ‘Buy’ Button: opens up an e-store-like basket and allows faster shopping. For now, only for users from US.

🔹 ‘Share’ Button: opens up a list of your Messenger contacts, to whom you can send a particular part of your chatbot – for example a contest, game or a generic template with the product you like.

Source: https://developers.facebook.com/docs/messenger-platform/send-messages/buttons

🔹 ‘Log In/Log Out’ Buttons: allow you to identify the user as an already existing customer (great for e-commerce) and to direct them to a login page in webview. Another case is to prompt users to sign up with your page, for example to get a discount.

🔹 ‘Call’ Button: allows users to call e.g. your customer service without searching the number, right after clicking the button.

🔹 Quick Replies: I will elaborate more on these below👇👇

Quick Replies

Quick replies work like buttons – they move the conversation forward and allow users to decide where they want it to go. Yet, they’re main function is predefining user’s answers.

So how exactly Quick Replies and traditional Buttons differ?

🔹 Users can click on a Quick Reply only once – after clicking one, it becomes a text message sent by the user.

🔹 This means that you can add attributes to those messages, in order to create custom audiences and group your users.

🔹 That also means users can’t change their choice or go back to see all the options, so for example when it comes to VERY important decisions made by the user, it’s worth to add a confirmation message: ‘Are you sure this is your choice?’

Quick Replies can be used to gather valuable data from the users, like e.g.:

🔹 Location: you can add a special Quick Reply, which will request from the user to share their location – e.g. useful when searching for the nearest store.

🔹 E-mail address – a chatbot can request an e-mail address from the users by sending a Quick Reply with user’s Facebook login e-mail inside. After user clicks on the QR, you have the address in your database.

🔹 Phone number – just like with the e-mail address, you can gather user’s number if it is listed on his or her Facebook profile.

Source: https://developers.facebook.com/docs/messenger-platform/send-messages/quick-replies/#text

Webview

Webview is an incredibly convenient way to surpass the limitations of the Messenger platform. It allows you to show your audience any online information or a full website during the interaction with a chatbot, without leaving the Messenger app. It runs with HTML, CSS and JavaScript.

It worth to keep in mind that webview is just an addition to the chatbot – make the interactivation with it short, so that the user comes back to the conversation. Another thing worth mentioning is that you can specify how high is your webview going to be, based on what exactly are you going to show your audience.

You can trigger webview using URL Buttons or Persistent Menu that I describe in the section below👇

Persistent menu

Persistent menu is visible during the Messenger chatbot conversation at all times. This is the best way to emphasize the most important features of your chatbot, or rather those ones, the users will likely interact with the most.

💪 #BestPractices:

🔹 Use persistent menu as a starting point to the most important features from the user perspective

🔹 Title of the button should clearly tell what is its purpose

🔹 Don’t use it for very generic, default functions like ‘Restart’ and don’t play with clickbates!

Messenger Platform

In case you would like to find out more about each element we’ve described or you’re looking some technical details, go straight to the source 😉

👉 https://developers.facebook.com/docs/messenger-platform

And if you’re looking for an experienced partner in crime (meaning developing a chatbot 😃) hit us up at contact@botlikeyou.com. We’re ready for our next favourite client!

Contact Us