Chatbot Design Elements

Our Chatbot Development Expertise

We’ve been building chatbots for sometime and know just how difficult an enterprise bot can be to design, build, deploy and maintain. We put this post together to help non-technical readers understand some of the visual features that help create a great chatbot experience.

After you have figured out a use case for the bot and which messaging platform to use, next you should consider the experience you want for users. When we talk to customers about building bots we tell them up-front that a bot can be made with three approaches in mind:

1. Completely scripted, rules based bots that today can be built by kids using Google Sheets or professionally using the hundreds of bot development kits in the marketplace. Honestly, we have stopped trying to catalog these. We published a brief story on several of them back in 2017 which you can find on our blog.
2. 100% machine learning, AI-based bot that takes advantage of NLP offered by services like Amazon Lex, Google, Facebook and the several outstanding and easier to use open source solutions. We strongly prefer going down this path with most bots of any real complexity.

We built our own solution as well which we called ACE (Azumo Chatbot Engine). The solution enabled us to build more robust chatbots more quickly. We've used it to build chatbots for Discovery Channel, Wine Enthusiasts and Coppola Winery and many others. Most of those chatbots were designed for Alexa and Google Assistant. We used ACE to also build for Facebook Messenger and other apps as well as the web.

Design Choices for a Scripted Chatbot

In fairness we do not like building scripted chatbots. They break easily and bore the user. Unfortunately they are easy to build and many developers pushed these fragile snowflakes onto customers.

To make them work well however, a good scripted bot experience is one where the designer and development team have spent not only a lot of time thinking through the voice of the bot but also the type of questions they anticipate the user will have. In many cases, a rules based bot will run like a decision tree where each action by the user prompts the bot to take action or respond.

Depending on the use case this could be perhaps 10-20 lines of scripted text to hundreds of lines of scripting. In one scripted experience, we wrote over 500 lines of script to handle just a small set of use cases where NLP would not be a good substitute. Many bot developers creating scripted experiences for entertainment purposes will see their scripts grow to thousands of lines.

Many bots use graphical elements like cards, buttons or quick replies as part of the design flow. When thinking about using these elements, you must know that messaging platform you decide to deploy your bot on plays a key role in terms of design choices.

Cards and buttons require graphical images which some messaging platforms do not or cannot support. For example if you wanted to build a bot for SMS/texting, you won’t have access to cards or buttons. But if you were building for Facebook Messenger or a web interface you would be able to take advantage of these options and more.

Chatbot Design Elements:

Here’s a quick snapshot of elements you can use for your bot:

• Buttons – Buttons trigger actions to occur when a user touches or clicks them. This is similar to any mobile app experience. By adding an interactive button you can simplify complex workflows and help the user make decisions faster.
• Get Started Button – For many people first experiencing a bot on messenger, this is the first thing they will see and is quite intuitive. Pushing this button revs up the bot to get going and represents a clear call-to-action for the user. This is really a must have button for Facebook Messenger Bots.
• Cards – Card layouts put information — images, text, buttons, links, etc. — into a series of blocked containers. These blocks can be layered or moved and tend to adjust to the size of the screen, stacking and falling into columns if you turn your phone on its side. When placed in a series that can create a carousel another presentation feature. A user can cycle through the cards and select the individual one that is right for them. We suggest 2-3 cards per carousel to maintain simplicity.
• Quick Reply – Quick replies provide a way to present response buttons for the user. Quick Replies appear prominently above the composer, with the keyboard less prominent. When a quick reply is tapped, the user’s response message is sent back to the bot. On most platforms, the buttons are dismissed, preventing the issue where a user could tap on buttons attached to old messages in a conversation thread.
• Smart Reply – Similar to those familiar with Google Inbox, smart reply gives the users a fast and easy way to respond to the bots questions without having to type. Smart reply saves time and pushes the user more efficiently through a workflow. This can be particularly useful when the bot is context aware or has some level of information at the ready about the user.
• Persistent Menu – The persistent menu exist to allow the user to quick navigate to another part of the bot that may not be readily available to them. In short its a way to transition into another part of the bot without having to ask the bot. It can also be used as a place for the user to personalize the bot or learn more about the bots capabilities.

These are just a selection of popular elements that can be embedded into a bot experience. And while you can employ many or all of these on some platforms, it’s best to try to pick the option that is right for the moment. If not, you could run into a very cluttered and confusing experience for the user. After-all the bots’ purpose is to make the user’s life simpler.