A Beginner’s Guide to Designing Conversational Interfaces

Default avatar.
March 23, 2017
A Beginner’s Guide to Designing Conversational Interfaces.
Whether you love them or hate them, conversational interfaces have started making a significant impact in the business/brand communication landscape. Though many businesses have realized that conversational interfaces are likely to cause a major shift in brand communication there are many who are skeptical about CIs. CIs have limitations, but they are here to stay and they will get better and more advanced, and that the current issues will be resolved over time. These limitations should not stop businesses from leveraging CIs for business growth as history has proven time and again that failing to adapt to market changes has always cost businesses heavily.

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 Documentation

As 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: Expect more messaging platforms to offer Chatbot APIs in the future.

Chatbot Building Services

Chatbots 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 Resources

Botwiki – 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

Purpose

Defining 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. Content

As 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 Chart

The 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 Start

Unlike 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 Succinct

Avoid 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 Step

Request information from the user or ask questions one by one. Once you get the right information, proceed to the next thing.

Clarity and Confirmation

At 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 CTAs

We 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 Touch

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

Use of Animation/Graphics

In case of text-based chatbots, clever and timely use of animation spices up the conversation and brings a feel-good factor into it.

In-built Channel to Escalate Unresolved Issues

As we discussed earlier, most of the chatbots are rule-based and at times may not be able to resolve complex customer issues – so, there should be an escalation channel in standby mode through which the chatbot can refer or escalate unresolved issues to your customer support team for human assistance.

Exit Option

At some point in time during the conversation the user may want to end the conversation and contact you through other modes of communication, give the user the option to exit the conversation and once the user exits you can display your email and/or phone number.

The Challenge of CI

Most of the Chatbots/CIs today have certain limitations and they don’t have human-like conversations perfectly ( but many AI-based Chatbots are reasonably good at it). The major challenge yet to be tackled perfectly is natural-language processing – typos and grammatical errors are common in human conversation (both oral and written) – short forms, slang, and sounds are also often used in conversations. Apps like normalizer help us to tackle this issue to an extent but gaps always remain. In the near future, continuous advancement in NLP/machine learning/artificial intelligence technologies will fill this gap and we say with confidence that future AI-powered chatbots will have human-like conversation perfectly. Until then, play by the chatbot design rules to ensure successful chatbot design and deployment which in turn ensures successful customer engagement.

Kavin Paulson

Kavin Paulson is a Tech Enthusiast, Blogger and a Digital Marketing Associate at Technousa – a world class offshore IT Consulting & Software Development Company offering a range of services including IT consulting, Software Development, Mobile App Development and Web Design/Development Services.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…