Inspiration

Chatbot UX: Signifiers and Affordances for Chatbots

Every interaction should have meaning and provide value.

chatbot1
Image: charlesataylor

Signifiers and Affordances for Chatbots

There aren’t a lot of signifiers or affordances within a chatbot. The only elements you have to work with are words, buttons and a small repertoire of media assets that vary by platform. The challenge is creatively extending these to create a desirable experience within a conversation.

It’s a challenge because you have to figure out how to creatively use these fundamental elements to solve a problem.

But it’s a benefit for the same reason — because it will force you to strip your experience to the most raw, meaningful experience possible.

Every interaction should have meaning and provide value.

Text Elements

The foundation of conversational interfaces is text—conversation. Some platforms allow buttons and/or quick responses to accompany your textual elements, but this is not globally established at this point in time and, until SMS conforms to the needs of the chatbot economy, it probably won’t be.

Text Element with Buttons

Text elements with buttons are just that — textual based cards that have links associated with them as buttons. You can add buttons that link both internally and externally, but there is no media associated with the basic text element.

Despite what you’re probably thinking tho, the less buttons/commands you offer, the better.

While you may think you need to offer everything at once because this is a new technology that people don’t know how to use, you don’t. And you’re missing the point of a conversational interface if you do.

By offering everything at once you’re just making a mega menu and are no better than those sites you make fun of every day—trust me, I did it and it failed, but I learned. Don’t make the same mistake.

Text Element without Buttons

Not all platforms allow the use of buttons (i.e. SMS). If a platform doesn’t allow you to use buttons, make it easy for users to understand what they should do by using actionable commands to direct the conversation.

The tricky part is figuring out a way to make your content digestible and still get your point across.

If you want to have a longer conversation, you can’t just write long blocks of text to make sure your message gets across. Think about how you feel when a friend sends you a wall of text.

Like those big walls of text? Nope. And neither will anyone using your bot.

The best conversations are not only digestible but also engaging and actionable. Engaged users should move along very easily because your conversation keeps them going without thinking about what to do or how to respond next.

Writing a bot script is somewhat like improv. You have to be able to mentally take a stab at what’s going to come next then write your script to provoke the appropriate reaction. Adding in actionable statements will help but the more natural you can make it feel, the more enjoyable the experience.

Protip: All text elements allow the use of emojis, which can make the conversation feel more fun, human, and relatable. Think of how you’d break up a conversation you’d have with your friend with emojis.

Use emojis like you’d use motion in an interface — to make interactions more meaningful and easier to understand, not to entertain. And please, for everyone involved, don’t overuse emojis.

Quick Responses

A lot of platforms also allow you to provide quick response buttons. They’re a great way to speed up the conversation and/or grab data strings you want to be consistent.

Quick response buttons in Slack allow users to easily choose an option instead of having to type it out.

The quick response interaction moves the conversation along while guiding it in the direction your bot is prepared to handle.

If you can give the user a one-click alternative to typing something like “book the room for 20 minutes,” which is 28 clicks, it’s usually better. There are times to let users explore through open conversation and there are times when giving them a button just makes life easier for everyone.

Quick responses will also make sure the data you receive is more consistent. Instead of asking someone to enter yes or no, which could result in “yes,” “Yes,” “YES,” “Y”, and more, you’ll just have one data point that matches exactly with whatever is written on the button.

The difference between these types of buttons and other buttons is that these can be used to grab user data as well as link internally or externally, while the other buttons can only link internally or externally.

Media Elements

Images are the most ubiquitous media element. You can use images on every bot platform, including SMS. Accepted formats include JPEG, PNG and GIF.

Some platforms allow you to send videos and audio, but that’s about as far as you’re going to get and that’s only on the bleeding edge of bot platforms.

Carousel Element with Buttons

Although the exact design may be different, most platforms offer some sort of carousel type card.

On Facebook the carousel element includes options to upload an image, place a headline and subhead description, as well as offer actionable response buttons.

Try to use as few buttons as possible. Loading up with options, as mentioned before, is no better than a mega menu on desktop or mobile.

Carousel Element without Buttons

You can also create a carousel element without actionable buttons, which essentially turns rich media (an image or GIF) into into a clickable link.

While the carousel element has text below it that indicates it’s more than just an image, clickability may not be incredibly obvious to all users at first, so actionable buttons may help improve click through.

Protip: If you’re creating a Facebook Messenger bot, using Facebook Instant Articles (as indicated by the lightning bolt) creates an incredibly fast and seamless linking interaction compared to linking outside the Facebook ecosystem.

Images

Image elements allow you to upload media in JPEG, PNG, or GIF format to display alone or with other elements.

 

The benefit of using an image instead of a carousel is that the image does not get cropped to a specific size ratio as it does with carousel elements. That means pairing an image element with a text element allows you to get the carousel effect while still getting the full image through.

The consistent, cropped size of a carousel often leads to better design aesthetic, but if you need the whole image to display you can always hack an image and a text block together.

Videos

The platforms that allow you to send video include Messenger and Telegram but these more advanced media types generally have to be sent through a custom code base.

 

Most bot template platforms I’ve seen, like motion.ai and Chatfuel (among others), do not allow video and audio to be sent yet. However, if you’re looking for a platform that does, I would recommend checking out Sequel.

Audio

Similar to video, the platforms that allow you to send video include Messenger and Telegram. And again, the only bot template platform that I know of that will let you send audio messages is Sequel.

 
Live stream music with the FindMelodyBot, one of few bots out that offer audio output.

If you’re getting into audio, you should really consider the feasibility of using Telegram as your platform. Telegram lets users stream whatever they’re listening to while they use other apps. This could create some very compelling interactions that bring users back to your bot — even YouTube and iOS10 don’t allow streaming music without being in-app.

Ultimately though, you should go where you’ll reach the largest audience for your bot.

What’s Next

The previous article, Part 1, discussed why chatbots are so hot right now and how important it is for you to understand the technology. This article covered signifiers and affordances within chatbots, across various platforms.

In Part 3 we’ll talk about how to bring your bot to life—how to give it some personality. We’ll discuss, in depth, the best practices of personifying your bot.

This article was originally published on uxdesign.cc and has been edited for the Envato Blog. 


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.