A Beginner’s Guide to Designing Conversational Interfaces
What is a CI?Conversational Interfaces(or CIs) are currently of two types: Chatbots and Virtual Assistants (Siri, Google Assistant etc.) but, arguably, conversational websites like Adrian Zumbrunnen and uxdesign.cc can also be considered conversational interfaces. CI design demands a fundamental shift in approach to design–minimal visual design and more use of words; content, presentation and conversation flow are the primary UI elements of a CI design. As Matty Mariansky, Co-founder of Meekan, puts it “Content becomes the Style”. This is the fundamental CI design principle that the designers have to adopt to take a leap. Virtual assistants are built by tech giants like Google, Apple, Microsoft, Samsung etc. Chatbots and conversational websites are the CIs that are usually built by businesses. So, the dos and don’ts of CI design discussed below are with respect to chatbots and conversational websites/apps only. There are two major types of chatbots: rule-based chatbots (programmed to give canned responses), and AI (Artificial Intelligence) based chatbots. Further, they can be classified into text-based and voice-controlled chatbots. Since most of the chatbots have some limitations and AI/machine learning/natural language processing technologies still have to get advanced enough to enable a ‘perfect’ human-like conversation—though many AI-based Chatbots are reasonably good at it—we need to follow certain design guidelines/principles while building a Chatbot in order to ensure friction-less communication.
Resources, Guidelines and Design Tips
Messaging/Chat Platform DocumentationAs you may know Chatbots usually live in popular messaging products like Facebook messenger, Telegram, Slack, KiK, Slack, Skype, SMS etc but they can also be integrated into your website or app. You choose messaging platform(s) on which your target audience or potential/existing customer are active. Platform-wise documentation:
Chatbot Building ServicesChatbots have minimal UI and thus designers need not worry too much about the design or visual aspect, what is more important is the construction of the right conversational flow. If you get the flow chart right, half of the job is done. There are plenty of Chatbot building services which enable non-technical people to build simple chatbots. If you are a small business owner or a designer with limited or no coding knowledge, these services can really come in handy. For example Chatfuel, a bot builder for Facebook Messenger offers a free service, providing a drag-and-drop interface and no coding knowledge is required. There are many other similar services including Manychat, Massively, Motion.Ai, Octane.Ai, AI Buddy, AI Pioneer, Rebot.Me, Pandorabots, Second Ego, Zabaware, Botego, Infs Intellectual Agents, Personality Forge, Do you Dream Up, BotLibre, BotPlatform, Flow Xo, gupshup, Chatbot4u and more. If you intend to build a more advanced bot, you may consider the following services: API.ai – This powerful and robust platform, which was recently acquired by Google, can help you build simple to advanced conversational interfaces. Wit.ai – This is another comprehensive, extensible natural language platform, owned by Facebook, which enables you to build text-based and also voice-controlled chatbots which can understand humans. Bot Framework – Microsoft’s Bot Framework enables you to build cross-platform, intelligent bots which can be integrated to any messaging or chat app that supports Chatbot Integration and they can also be integrated into your website, app or even office 365 mail. IBM Watson – Another great platform owned by another tech giant—IBM—helps you to build Chatbots that understand natural language.
Other Important ResourcesBotwiki – This is an ultimate resource to find all information related to bots including Bots directory, tutorials, articles, tools, events and more. Twine - Twine is a great tool that will help you to construct conversational flow. It enables you to create non-linear, interactive text scripts and conversational flow. Botkit – undoubtedly a great resource, it is a popular open-source toolkit that contains ready-made code and commands which enable you to create Chatbots for Slack and other messaging platforms. Botframe – It is a cool and user-friendly Prototyping tool that helps you to simulate conversations. Superscript – A dialog system and bot engine which is extensible and designed to work with other AI Frameworks such as API.ai, IBM Watson, Wit.ai etc. It helps you build Chatbots that can have human-like conversations. qTypes – A comprehensive library of defined question formats and a how to answer/respond guide. Normalizer – this app processes user input and make it understandable for bots.
CI Dos and Don’ts
PurposeDefining the purpose of the CI/Chatbot is first important step. What customer problem will it solve efficiently? How will it benefit the target audience and you?
Visual Design Vs. ContentAs discussed, CI is more about content and less about visual design. So, the focus should be less about the look and feel and more about content.
Conversation Flow ChartThe key to success is in getting the conversational flow right. Remember, the major objective of conversational interface is to minimize user’s effort to communicate with the system—so, the challenge is to anticipate users’ needs and provide the right solutions/answers with minimum user input and stored information. Conversation flow chart is the major component of CI.
Draft a set of questions that your bot should be capable of answering—those relevant questions which the user is likely to ask or should ask to get a prompt, canned response that will take the conversation forward and keep it on-track. Use qTypes (mentioned above) for Q&A drafting. Your bot should be taught to distinguish and understand different types of questions. qTypes can be leveraged to make your bot give prompt replies to standard questions.
Great StartUnlike GUI, CI doesn’t have interactive elements which the user is usually familiar with, like the buttons (though minimal use of buttons is recommended—explained below), menu/drop-downs etc. In case of CI, a user usually either views a blank screen or no visuals at all (eg. Amazon Echo), so it is important to guide the user promptly to start the conversation by telling them to how/where to start and how the Chatbot/CI can help them.
Being Concise and SuccinctAvoid giving too much information in one go. Open-ended questions should be avoided and clear options should be provided so that the conversation remains objective and it does not go off-track. Do not provide too much information and multiple options in one go.
Step by StepRequest information from the user or ask questions one by one. Once you get the right information, proceed to the next thing.
Clarity and ConfirmationAt every stage of the conversation, make sure that your user understands the conversational flow. Keep the user informed about the tasks carried out and also make sure that the right information has been collected from the user at every stage. Always repeat and get a confirmation from user every time they provide an input.
If a user input is incorrect, make the user clearly understand what went wrong and what they are supposed to input instead.
Using Buttons and Clear CTAsWe discussed providing clear options/CTAs so that the conversation remains on-track and the use of buttons is a great way to ensure clarity, as users know what to expect at every stage, and also buttons reduce typing (and typos); thus, buttons minimize friction. Normalizer (mentioned above) also helps you to tackle typo issues.
Human TouchNot only the flow of the conversation is important, it is also important to make the conversation sound natural, maintain continuity, and avoid bringing different topics together into the conversation. Maintaining a friendly tone and picking the conversation from where it was left during the previous visit are some of the things that can make the user feel important. Personalization is also a key aspect of adding a personal touch to the conversation.
Do provide timely suggestions or guidance to the user whenever required. For example, sharing a link to the FAQ page at the right time may be of great help to the user. The user might also appreciate it if you provide alternate solutions or recommendations.
Making non-lexical sounds like oh, hmm, uh etc during conversation also make the conversation sound natural.
Giving a funny reply or cracking a light joke when the user tries to take the conversation off-track (e.g. by asking irrelevant questions) also works and makes the conversation sound very natural. Timely humor always uplifts the mood. Rude users can also be tackled with funny, witty responses.