Applying Design Heuristics to Chatbots

A chatbot interface can be difficult to design, and when we revisit the 10 Design Heuristics we see that there are a lot of issues with designing the conversational UX that makes up chatbots. I want to start with some core heuristics that need be addressed for chat interfaces:

  1. How do users know what to do or say to get their desired outcome?
  2. How do users understand what they are doing wrong? Can they “undo”?
  3. How can users request help ?

The early days…

Before we had easily accessible natural language processing (NLP) and cloud-based AI libraries, it was mind-boggling attempting to reduce a full featured app into a text interface. Yet it was a relatively straightforward endeavor, as noted from Dan Grover’s insightful post on chatbot origins in China.

Source: Dan Grover


Now that we can leverage accessible NLP and AI we have the responsibility to uphold the ease of use of numerical key entry, yet design it within an organic conversation. Design should first and foremost be functional – and numerical key entry is quite functional – and therein lies the challenge of modern chatbots.


1. “How do I interact with this chatbot?”

Most chatbots are designed to listen to certain “intents,” using natural language processing to map “chat” to a defined “action” that they desire. For instance with SommelBot, we trained our AI to process “What is a good pairing with beef wellington?” We did that by helping the AI identify the keyword of “pairing” and understand that “beef wellington” was the item to be paired with, and in particular it was a type of red meat.

But what if a user didn’t say “pairing” or any derivative of “pair” ? That’s where entity mapping comes in, where we list out numbers of synonyms and similar expressions that should be attributed to “pair.” For example, “goes well with-“, “will be eating-“, etc.

So, to address how to teach users how to interact with your bot it can be helpful to greet them with a message, or through the bot splash screen (below), explaining what the bot does, and how best to interact with it through certain keywords:

Splash screen a good place to explain how to interact with your bot


In addition, Facebook Messenger allows you to guide users with buttons, so technically you could design a button-only chatbot that never needs to handle open-ended queries:

TheScore has most of their functionality through buttons


2. “I’m stuck!” “Undo!”

When users get stuck, they may attempt to cry out into the darkness: “Help!” “Undo!” “Cancel!” Unfortunately in chatbot world, there is no back button like we have in our browser world. If you didn’t train your bot to listen to these cries for help, you might want to see if users are getting stuck in their interaction.

For example, I recently interacted with a bot which asked me of my age. I slyly replied with “17,” being the wary person I am trying not to give out too much personal information. Unfortunately, the bot promptly responded with “Sorry, we can only work with users that are 21+.” and refused to answer me thereafter. “I was just kidding!” “Hello?”

When implementing “undo” and “back” button intentions, it is extremely useful to understand and implement contexts, a way to monitor exactly what step in the interaction flow a user currently is.

3. “Where’s the user manual…”

While most designers pride themselves on creating such intuitive experiences that a user could never get lost, sometimes they just do. Chatbots ought to come with a help option that exists outside of the chat window, back in the familiar land of the app they are using.

When I looked at the real estate of Facebook Messenger, I noticed that you could replace the sticker menu with a “bot” icon:

A ‘bot’ button that could open a ‘help’ or ‘how-to’

Facebook could also nestle chatbot help within their little-used options menu:

Integrating chatbot help into the options menu (Facebook Messenger)

As always, let me know what your thoughts are and follow this page as I continue to post my adventures in the chatbot space!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s