Product Design for Bots: Tips and Best Practices from the Messenger Team

Last Spring we introduced the Messenger Platform, giving businesses the tools to interact with people in a messaging thread to create bots. No download required, no new UI to learn.

We’ve continued to enhance the platform with interactive, app-like elements. Bots can send structured templates with product lists, article summaries, receipts, and more. Buttons enable direct interaction with messages. Quick Replies structure the conversation and streamline responses. Our new menu system explains a bot’s functionality with single-tap entry points. And our webview provides a powerful canvas for creating full-fledged graphical user interfaces (GUIs) that complement the thread.

Together, these components go beyond purely chat-like experiences and provide a broad spectrum of options—from simple, friendly, and conversational to rich, interactive, and visual:

Why is this spectrum so important? Because when it comes to interacting with people, one size doesn’t fit all.

From Text to GUI and Back Again

Before smartphones, before Mac and Windows, there was the command line: A conversational interface. But it wasn’t a very good conversation. Responses were cryptic, and unless you knew exact commands, you saw a lot of, “Command not found.” Command lines are extremely efficient for certain tasks, but opaque.

Then GUIs arrived. They’re not opaque: the commands are right in front of you as menus and buttons. And GUIs provide direct manipulation: You can drag a rectangle on your PowerPoint slide, instead of typing, “move-to 450 780;” or pinch a map to zoom instead of typing, “zoom-level 3x.”

Today’s conversational interfaces are a far cry from command lines. Natural language processing (NLP) and AI understand what you mean even if you don’t know exactly what to type (check out Messenger’s Wit.ai Bot Engine). Bots can also mix automated and human responses to take advantage of the strengths of each. They foster something new—the ability for a bot to build a true relationship with its user, embodied in the thread.

Purely conversational bots share some of the command line’s limitations. They can’t understand every question; a user still needs to know what kinds of questions to ask. Typing is far more tedious than clicking a button or selecting from a list. And conversational paradigms remain awkward in situations where direct manipulation is effective: zooming a map, putting stickers on a photo, selecting a shade of lipstick.

So conversation is strong where GUI is weak, and vice versa. Wouldn’t it be great to combine the best of both? After all, that’s what we do in real life. When we talk to each other we also gesture, draw on whiteboards, read from restaurant menus, and so on. Not to mention the meaning conveyed by our facial expressions and body language.

Which brings us back to the spectrum of the Messenger Platform. As I wrote in September, the best messaging experiences “aren’t simple chatbots, nor are they apps embedded in a messaging shell. They’re something in between…with the permanence and humanity of a thread and the interactive flexibility of an app.”

Designing with the Spectrum

A bot needn’t exist on a single point of this spectrum. Individual flows, individual moments can use whatever parts are most appropriate. The thread is the backbone of a bot’s experience—lending permanence, continuity, personality, and familiarity. More interactive components provide richer moments of GUI that weave in and out.

Example: Twenty Questions

Suppose you’re building a user profile to personalize your experience. Maybe you’re a travel bot, collecting preferences: aisle vs. window, double vs. queen beds. Perhaps you’re a cosmetics shop, learning your user’s skin care needs. All of these function in a conversation, but after two or three questions, UX problems arise:

  1. Selecting among predefined options is awkward: the bot must provide them in text, then expect the response to match one.
  2. Structured data is challenging: If a user enters her birthday as 3/6, did she mean March 6? Or June 3?
  3. The flow is uncertain: with question after question, there’s no apparent end.
  4. If the questions are interrelated, Your user may want to go back and change her answers. Pure messaging doesn’t handle that type of non-linear interaction well.

We address each of these at different points along the spectrum:

Example: Choosing a Seat

Structured template and buttons offer simple direct manipulation in the thread, but for more complex, interactive situations, the GUI is your best choice. Consider a bot for selecting a seat on an airplane:

Choose the right component for each part of your flow. Your bot isn’t a “conversational bot” or a “GUI bot;” it’s a hybrid that offers the right experience at each moment.

Dig into all these Messenger Platform tools with our new Design Best Practices documentation. Explore design guidelines, working demos, and soon, sample code for some common bot flows (including the example shown under “Twenty Questions” above). Create your own Messenger experiences that are both conversational, visual—and of course, social. And stay tuned: more design tips and resources are on the way.

Oops! This browser is unsupported.

To see why bots mean business please update your browser to the latest version.