Chatbots’ UI

I tested a lot of chatbots on Messenger, and clearly there’s still a lot of work to do to be part of people’s everyday life : conventions don’t exist yet, NLP is hard, people have high expectations about them …

Chatbots now are like web design in 90', and chatbot design is a very large topic, I’ll focus only on UI in this article.

It’s not a common think to speak about chatbots’ UI, but in this article I’ll cover some “graphical” aspects of messaging (which are for the most part UX too), but I won’t speak about conversations flows (with users interactions), and mainly for Messenger ecosystem.

One of the most important thing to remember is that messaging apps are built for humans. Humans use tiny sentences, abbreviations, emojis, gifs … One benefit of chatbots is that people don’t have to learn to use the app, they already use it everyday. If you don’t use humans conventions, you’ll lose this benefit.

Here are some tricks that I appreciate when I use chatbots (mostly lifestyle chatbots):

  • Avoid big messages: when you receive a long message, you’re usually on trouble (a mad girl/boy friend who flames you 😅). Big messages make people anxious, you don’t want that 😟
  • Use typing: give time to your users to read your messages. Don’t spam them. Scrolling the conversation to read the beginning of the message(s) is pretty annoying. Time gives rhythm and realism. (protip: add 1s / line on a smartphone for a typing 👌)
  • Use emojis: they communicate emotions and you can save words (even sentences) by using them. It provides some color in the conversation too (which is nice 😎). Some have pretty clear meanings (🍆 😏), it sounds familiar for users
  • Don’t use too much emojis: please don’t. You don’t want to build a chatbot that talks like a 8 year old kid
  • Remove unnecessary words: focus on short meaningful messages. After writing a message, ask yourself if a human would put so many words in his message. If not, reduce it ✂️
  • Use templates for contents: links aren’t expanded when it’s a chatbot’s message. Raw links aren’t friendly, templates provide structures and allow to hierarchise information which help to communicate important informations
  • Use memes: (almost) everybody use memes, they communicate emotions and reactions like emojis

I didn’t cover aspects like quick replies, buttons … which are mainly UX elements / tricks.

You can summarise these bullet points with 2 main principles:

  1. Be functional: people don’t (usually) use chatbots for small talk, your chatbot has a job to get done
  2. Keep it short: it’s instant messaging, not a Facebook post or a blog post, keep it short and simple

Facebook published general guidelines for chatbot design, you’ll find more guidelines (and most of do/don’t from this article) : Design Best Practices

FYI I’m the co-founder and CTO of Jam, a french conversational media on Messenger, which is one of the most used chatbot in France. I have built chatbots for several years now (IRC for 10 years ; Slack, SMS and Messenger for 3 years).