How to build a beautiful chatbot when all you have is text

As the world of applications marches steadily away from visual interfaces to chat interfaces, it would seem that we need an entirely new set of axioms in designing this next generation of interfaces. After all, what is the conversational equivalent of a shiny red button beckoning the user to a call to action? As much as it is true that many of the best practices of UI/UX design will be obsolete in this brave new world of bot assistants, we shouldn’t throw the baby out with the bathwater.

Many of the guidelines for designing compelling visual interfaces can still help you create engaging chat user experiences — we simply need to tweak the practice to better suit the new medium.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":2072665,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"bots,business,","session":"B"}']

Plan before developing

If the first presidential debate between Clinton and Trump taught us anything, it’s that a little preparation can go a long way in making your points cohesive, helping you look less like the crazy person at a bus station shouting angry opinions into the wind.

We should wireframe out the entire conversation and all its possible options, focusing on the general themes of each conversation block, much like the tabs on a website. This helps us prioritize more important parts of the conversation and logically segue from one section to the next.

Aesthetic and minimalist design

I am reminded of a letter Mark Twain once penned, which he ended by saying, “If I had more time, I would have written a shorter letter.” We all love the most minimal of visual designs, extolling a weather app that displays nothing but the exact temperature as though Rothko himself had blessed it.

However, this zeal for “less is more” is often forgotten entirely when teams set out to write dialogue for their bot. Rather than wondering “What can we take away?”, too many developers ask themselves “What can we add?” This is a bit of an overcompensation, wanting to make A.I. feel more robust than its current technical constraints allow, and ultimately it is misguided. Much like Mr. Twain’s letter, conciseness is always preferred by the user.

Use color and contrast properly

Of all the advice, this one seems hopelessly relegated to only the visual realm. But consider many of the best orators of our time; they skillfully use contrast and color in their speeches to highlight and draw attention to galvanizing moments. A great example is Obama — his cunning use of the pregnant pause keeps…………listeners hanging on his…………every word. At times it feels that he is testing the limits of anticipation, as the seconds tick away and his audience is left to wonder if they haven’t just fallen into a time freeze like Neo from the Matrix.

Much like visual designers use brighter colors to draw attention, conversation designers can use more excitable language and more poignant sentences to draw the attention of a user and to signify “This part is important and I need your full attention.”

Error prevention

For visual design, preventing errors means having obvious buttons that can redirect users or get them back on track, because we know that if a user is forced to click around a site and work hard to find their own solution, they probably won’t bothered to and will simply bounce.

However, when it comes to errors in chat interfaces, we often tend to focus on our own insecurities about how our NLP has the comprehension of a poorly trained helper monkey, confused by even the most basic idiom.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":2072665,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"bots,business,","session":"B"}']

But the focus should be getting the user back on track easily, not explaining why your bot doesn’t quite get slang yet. Give your user options to jump back to key sections, and offer them buttons if they keep confusing the bot with colloquialisms.

Visibility of system status

Have you ever been in a conversation with a stranger and kept wondering quietly, “How much longer must I entertain this? When can I break away from this without seeming rude?” Like it or not, your first-time users are essentially talking with a stranger, which in the range of enjoyable life activities ranks right up there with surprise dental emergencies. They may grow to love your bot at some point, but in the first engagement, your bot is essentially the guy on the subway who just started asking them questions.

You can do a lot to mitigate the social anxiety of conversing with an inquisitive stranger, mainly giving them a sense of when this will end.

“Do you have time to answer 5 quick questions to help me understand your needs better?”

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":2072665,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"bots,business,","session":"B"}']

“Alright, doing great, only 3 more questions!”

Also, because the bot can always effortlessly pick up the same conversation at a later date, give the user a chance to finish later. Most won’t take you up on the offer, but the feeling that they can leave whenever they want will help alleviate any feelings of being harangued by a bot stranger.

Finally, don’t ignore the obvious. The biggest advantage chat interface design has over visual interface design is you don’t have to guess what went wrong in a user’s session — you can read the transcript and watch the train crash in slow motion. It will become pretty obvious where your user is getting lost or confused; just look for the section where the user is saying “what?” and make your targeted iterations accordingly.