Chat UI : translating form elements to chat

Chatbot UI is an evolving field.   Chat is no longer just text, but there are any number of UI elements that are now available from many chat providers.   You can now have buttons for user to click on, lists of items, horizontally scrolling info cards, etc.   Facebook has a number of "templates" and is setting new standards for what UI elements are available.   

Chatbot "forms"

Example of simple form interraction

We have been getting a number of request from our clients lately to have the equivalent of forms on the web as part of the Chatbot.  Often times for customer, self service or commerce functions, the user will need to provide structured information to the bot.

Many times this is pretty straight forward.  In the use case for a clothing company,  one of the features of the bot is to take a message for customer service.   They need a number of data fields to respond (name, contact, order number, and message) and the process requires a few confirmations.   The bot just asks the questions  sequentially.  When it knows information already (such as a name) or when it wants to confirm the information it already has - it  a button to confirm values.  This is a fairly simple example and the translation from web UI to messenger UI doesn't require too much imagination. 

Basic Form Elements

For some form elements, the translation from the web / mobile to a chatbot UI is fairly self evident.  A rule set can be developed to aid UI designers when they are considering how to implement a chatbot form.  Consider the list below:

  • Form Field - Just ask the question
  • Text Area - Again, just ask the question.   The chat bot will allow for a long input as well as a short input.
  • Confirmation Prompt - button template with some text and then the button.   The button can contain the actual text (as with the name confirmation) or the action to be taken (as with the send message confirmation)
  • Radio buttons - quick replies such as "yes" "no" (see the bottom of the drop down list example below)

Drop down lists

Example of drop down list

However, some form elements are more difficult to translate to a chat interface.   Consider the case from one of our clients who wants to list about 9 choices for the user to choose from.   The user won't necessarily know what the choices are and even with NLP may not be able to articulate exactly what they want to enter - in other words, the user needs to be able to see the choices available to them.   Just asking them what their primary discipline is isn't enough.  

To solve this UI problem, we considered the following options:

  • Listing out the choices in the text response and then having the user type in what they wanted - "What's your primary discipline: Aerobics, Fitness/Exercise, etc."
  • Using 9 quick replies and letting the user scroll horizontally to chose which one they wanted
  • Using 9 generic templates and letting the user scroll horizontally to choose which one they wanted
  • The chosen method was to have 9 buttons using the button template and making the user scroll vertically if needed.   We realized this wasn't available right now in FB messenger and you'd likely need 3 replies with 3 buttons each, but we think that's worth while to explore..

This seems to work in the example we have with 9 items, but still doesn't solve for longer lists (imagine a list of makes and models for a TV for instance).  But for lists with less than 5 items it works great and seems to work for up to about 10.

Multiple Selects or Check Boxes

Example of multiple select

In our clients case, once the user had selected their primary category, they now had a number of other categories from which they could choose 1-N.  This list was now longer and required the user to be able to select multiple items - a UI that on the web would generally utilize check boxes or a multiple select.   In addition, some of the items would need to have further explanation about them.

There just were no good templates available for this kind of interaction that we could think of.   So we had to build one of our own (or rather borrow from well known UI paradigms from other places).   We decided to use a webview for this functionality.   Webviews allow you to put a small web page within some or all of the messenger.   Once the user has finished their interactions with the webview, they are returned back to the messenger conversation.  In this case, we decided to use a full screen webview and borrow from the IOS UI.  So when the user clicks on the yes button in the example above, they are shown this expanded list.  The user can click anywhere within the row to select the item and a check appears.  The information bubble shows help text on the category.  Closing the window or pushing the done button returns the user to the messenger and repeats the categories the user chose - "You chose xxxxxx, yyyyyy, and zzzzzz as secondary disciplines.  Now we need to know if you perform massage therapy as well (Yes/No buttons)"

Conclusion

More and more, bots will need to ask user questions akin to a web form.   Many form elements are easily translated, but as bots become more sophisticated, new paradigms will need to be developed for handling rapid data entry through a bot interface.   Facebook and the other messenger platforms are quickly adding support for this, but more is needed.   

The drop down lists and multiple select example in this article are one way that our UI team has approached some of these challenges.  We welcome feedback on the ideas and always like to see what others are doing to solve similar issues.