Trends

Designing A Chatbot Conversation: How To Keep Users In The Loop

This is Part 4 in a 5 part series about why a chatbot was the hardest thing I’ve ever designed. This article will explain the best practices of designing a conversation—the core of your experience. This article was originally published on Medium

Conversation Design

Designing a conversation is going to be one of the most challenging things you’ve done in your life. I feel very comfortable making that statement.

Conversation is something we participate in every day, but it’s something we do unconsciously. We don’t think of the rules of grammar. We don’t think of everything required to understand, interpret, and respond. We don’t think about outlying possibilities that we unconsciously know don’t matter.

We just speak. Or type. But we don’t think.

And conversation only becomes more difficult as we extend it into the form of a machine output. In order to do this we have to abstract our thought patterns and unconscious habits into something that can be interacted with in an inorganic way — but it still needs to feel organic.

Defining A Loop

The concept of a loop within a conversation is intangible. We can speak to it, but it’s not always so easy to define what’s actually happening, and it’s even harder to visualize.

It’s also something that is going to change with each new conversation. There’s no absolute template for how you should design a conversation. This isn’t a binary subject, it’s an infinitely complex organic system that we’re trying to replicate through binary interactions — inputs and outputs.

However, there are concepts from web design we can extend to help us wrap our minds around it, and that’s what this article is going to discuss. Hopefully it will demystify some of the challenges of designing a conversation.

The Infinite Scroll

We’ve all heard of infinite scroll. It’s a very popular concept employed by many digital products in hopes that they can keep you around — and they often do.

If we were to make a very simple map of an infinite scroll interaction, it might look something like this, with the red dot representing where you would start:

Facebook is probably the most popular product on the planet to employ the infinite scroll technique.

The infinite scroll works for Facebook because a majority of the content you are fed will be something you inherently like — otherwise you wouldn’t see it. And it works for many other companies for the same reason.

But the infinite scroll is not that compelling of an experience and, ultimately, it creates an experience based on a filter bubble. It lacks the ability to go in any direction, like a conversation can. It lacks serendipity.

The Relevant Content Loop

However, there are much more complex and interesting ways to feed users content. A very popular alternative is what I’m going to refer to as the infinite loop — you can scroll forever, find content you like, and then just keep doing the same until you get sick of it.

With infinite scroll behavior you don’t have control of the content other than defining the filters before you start scrolling. With these infinite loop interactions you get to see what you want and only what you want. And there’s no end to the content. You can’t break the loop unless you start over.

If we were to map this interaction out at a very basic level, it might look something like this, where the red circle represents the piece of content a user is on and the blue circles represent related, but different content.

We see this more and more across the web, especially on news sites, help sections, and other sites that curate content.

However, while news links are easy to curate, they’re not the most interesting concept to loop through.

Typically users land on the article they clicked on to enter the site, maybe read a couple more if the curated links are interesting to them. But not long after entering the site, they’re gone.

The Infinite Loop — A Rabbit Hole Of Relevance

Pinterest is probably the best at the infinite loop concept. It’s magic because they take a world worth of information and curate it specifically to what you’re looking for in the moment you’re looking for it.

If we were to map out the Pinterest experience, each piece of content might look a little like this.

The difference between Pinterest and what news sites/apps do is that once you choose one piece of content, discovering more content on Pinterest is much more organic and serendipitous. You could literally keep searching content until the Pinterest universe runs out of content to serve you, and each click would take you closer to what you’re looking for.

The Pinterest experience is a lot like a choose-your-own-adventure story, but with millions of options — pictures of food porn and DIY inspo until you want to puke. And because of this, it’s easy for users to get lost in the rabbit hole of relevancy.

By doing this, Pinterest has created an interaction that takes a conscious effort to cut off. It’s often easier to continue than stop.

This is what we, ideally, hope to replicate within our bots.

Conversation as a Loop

Designing a conversation has many similarities to designing an interface, it’s just a matter of finding where they overlap and extending the concept. But first, let’s define a few words before moving forward, so that what I’m about to say makes more sense.

Card

In the examples below, a card represents one piece of content. It could take the shape of a text bubble, it could be rich media, it could be links. It doesn’t matter exactly what it is, so much as that it is one output, based on a previous user input.

Track

A track represents multiple cards that make a larger story when strung together. There are infinite possibilities as to how the track might be created, depending on what information is available and what needs to be told.

A single news story or blog post would be a great example of a track.

Topic

A topic represents multiple tracks. As bots get more complex, there are specific parts of the content that represent major navigational points, which include subsets of topics within it.

If we were to keep the news metaphor, this might be different categories of news: Sports, Weather, Crime, Money, etc.

A single topic could also represent multiple topics. For example, within Sports you could have different sports: Basketball, football, baseball, etc. You could even have topics within each of those topics, represented by each team of each sport.

So in this case Sports would be the meta-topic representing sub-topics represented by each sport, which each have sub-topics represented by the sports teams.


You can see how creating a bot conversation can quickly become incredibly complex. Now let’s talk about how we can take this knowledge and apply it in a way that makes a conversation with your bot feel like magic.

Infinite Scroll for Conversations

Conversations that replicate infinite scrolls tend to be made of one card followed by another card, followed by another card, and so on.

One bot that is a great example of the infinite scroll interaction within a conversational interface is Swelly.

There aren’t any tracks to follow within the bot, you just give a binary response and move on to the next piece of content.

This is the easiest interaction to create within a conversational UI. And unless someone types in something that breaks your bot, it’s highly unlikely that the bot will break on the user.

However, there’s not much that makes this experience compelling. While Swelly has its purpose and has done well for itself, it’s nothing more than a survey in the form of a bot. It’s not really solving a problem or doing anything meaningful for its users.

Infinite Loop for Conversations

Being able to explore content in any direction without having it break on a user is much more difficult.

The difference between what’s happening with Pinterest is that instead of bouncing from single piece of content to single piece of content (which essentially would represent bouncing from card to card), your bot users will bounce from track to track or topic to topic. And within each topic users will dive into tracks made up of multiple cards that may then link to other, similar tracks.

Your job is to make sure wherever they land makes sense and represents what feels like a continuous story.

Basic Conversation Loops

At the most basic level, a loop could consist of a user bouncing from one card to the next, and back again.

If we were to visualize this as we previously did with Facebook and Pinterest, it would look something like this, with each circle representing a card, a single piece of content, within the bot.

But this wouldn’t be a very compelling experience.

However, adding more content can quickly make the experience exponentially more complex. And unlike Pinterest, where users are looking at one piece of content then moving onto the next, bots often require multiple interactions to navigate through a track before users can move into a different track.

If we were to map the concept of conversational tracks, it might look something like this:

The idea is that users choose one track, the bot outputs a card related to that track, and then the users follow a set amount of cards until they reach the end of the track.

News bots are one of the simplest examples of the track concept.

Interactions with news bots are often very linear — Each story representing a vertical track and each topic representing a horizontal move.

However, as I mentioned in the last section, news isn’t that magical. If it were, we wouldn’t see news media companies going out of business or struggling to figure out how to stay alive. Typically users will read an article they’re interested in, they might read one or two more, but then they’re out. There’s nothing that keeps people hooked.

Complex Conversation Loops

The difficulty of creating a truly magical, choose-your-own-adventure type of experience comes from condensing a vast amount of information into something digestible and then feeding the user exactly what they’re looking for at the exact moment they’re looking for it — this is a new design concept called Anticipatory Design.

The feeling you get when you’re looking at something but want more and are immediately rewarded without having to do much work is what keeps the user hooked.

How do you make users feel like they’re still on the right track even tho they may have moved into a completely different story line?

If we were, again, to map a more complex conversation loop, it might look something like this — although this is still a very simple visual compared to what a robust bot might look like.

This is where we begin to feel the magic of bots.

The key to success for more complex bots is determining where your major points of navigation are. Once you’ve figured that out, it’s much easier to complete the loop.

What breaks the loop is when a user hops from card to card and lands somewhere that doesn’t relate. That’s why it’s fine to let them dive down a track but then make sure the second they leave that they begin at a new track or are placed at the beginning of a topic. You want to go from broad to granular then back out to broad again.

And when users type something that your bot doesn’t have an exact response for, you want to make sure that users are pushed back into the experience at a point that feels relevant, because starting over sucks.

Essentially your fallback cards will act as bumpers to the conversation.

Creating an Unbreakable Loop

Now that you know the fundamentals of creating a conversation loop, the next step is making sure that users can’t break the loop when they try to navigate with conversation instead of pressing buttons.

In my book, The Ultimate Guide to Chatbots, we’ll discuss how to create conversational navigation that wraps around the limitlessness of language by creating digestible and actionable cards to direct the experience, using progressive enhancement techniques to map language, and introducing anticipatory design concepts to not only keep users in the loop but also allow them to navigate without having to use buttons if they choose.

Creating experiences that feel magical aren’t as hard as you’d imagine, but they do require a bit of thinking and a lot of user testing.

More on UX design:


Joe Toscano

About the Author Joe Toscano

Joe is an Experience Designer for R/GA at Google. If he's not reading or writing, he's out exploring the world or playing lacrosse. To keep up with what he's doing you can follow him on Medium or Twitter.