Conversational UI Principles — Complete Process of Designing a Website Chatbot

Leszek Zawadzki
Dec 15, 2016 · 15 min read
Image for post
Image for post

Opening

It’s late 2016. Many people say conversational UI is the future of web interface. IM apps, chatbots, text-based UIs or emojis probably have never been more popular. Some might say it’s just another design fad or that text-based interfaces aren’t anything new, but frankly — let’s admit it — with the advent of iPhone Messages, Slack or Facebook Messenger the way we exchange information changed irreversibly. Text messages have became extremely natural way of communicating these days.

Project objectives

Client:

  • create a conversation script
  • handle most common types of conversational randomness (meaning f*cks and dfdffjhfdjhfkfs)
  • convey the brand’s character (also by using company’s brand hero, Cody)
  • raise user (interlocutor) curiosity and liking
  • display the company web development skills

A bit of theory

Let’s start with the basics. I think sometimes it’s important to make a step back for a short while before diving into more complex matters. In this case it really helped us. Believe it or not, but reading through all those fundamental definitions opened our eyes on a few creative solutions and boosted the entire ideation process.

The principles of communication

There are hundreds of definitions explaining communication. The one below is my hybrid version of a few I found.

Communication is a process of sharing meaningful messages

The messages (communication in general) can be verbal or non-verbal.

  1. Normative rules: helping to determine a proper reaction based on a given message interpretation. In other words, they tell us what we should and what we should not do (say) in a particular situation.

Theory into practice — building conversational UI

Defining goals

Chatbots in B2B have their function. People visit such websites for a particular reason, because they want something. It’s like going to a restaurant or entering a bricks-and-mortar shop. Of course, sometimes people do it because they have nothing better to do or they just want to amuse themselves, but generally — there’s some purpose behind it; ordering food, buying a pair of shoes, or learning about prices. On the flip side, a waiter or a shop assistant also have their tasks and scripts to follow when talking to a client. A conversational website can work exactly the same way, and a chatbot’s role can be similar to a shop assistant or a waiter.

  • use the website per se to show Chop-Chop web development skills
  • provide the user with information about Chop-Chop services
  • encourage user to bookmark the site
  • learn something about the user (name, occupation, email, phone)
  • help getting in touch (CUI as a contact form alternative)
  • encourage users to sign up for the newsletter

Part 1. Designing the verbal communication

Building the conversation script

UX designers should be able to anticipate. In this project we knew that this is the only way for us to build a holistic communication system without AI support. We needed a great conversation script using an adaptive syntax which would also make the conversation pleasant and meaningful for users.

1. The conversation frame

Using a whiteboard, we started with a simple mind map. Having the chatbot goals in mind, we jotted down all the possible topics and conversation parts. We wanted to check quickly how complex the final script might be.

Image for post
Image for post
Early stages of writing conversation script
  • Extra(s)
  • Skip(s)
  • Core(s)
  • Chatter(s)
  • Ending
Image for post
Image for post
Example of simple conversation frame timeline

2. The script

This was the moment we were all waiting for since the first minute of the project: we could finally get to writing the actual conversation script. This part was fun, but it also required maximum focus. It was way easier with the script divided into blocks, as all of the conversation parts could be written separately.

Hi, there 
I’m Cody and I’d love to chat with you
Hi, Cody
How are you, today?
Well… Could be better
Bad day, huh? That happens…
I hope you don’t mind I use cookies  
What are these?
My breakfast!
Haha, poor joke
Cookies are data about you stored by a browser
Sounds creepy but hm… OK
Great!
Hello, there!
You seem familiar
Have we met?
Yes we have
Ha! I’ve got good memory!
Last time we talked about Magento development
Do you want to continue our conversation?
Let's continue
    Tell me about you 
With pleasure! :-)
Do you want to know where I come from?
Hear my story?
Or maybe learn what do I do for a living?
Where do you come from?
Well, the idea of me came from UX design studio The Rectangles
But it was Polish designer Jan Kallwejt who dressed me and did my hair
You see that share in the top corner?
What about it?
If you liked our chat, introduce me to your friends! :-)
I’ll be happy to talk to them too.
Maybe later
I have to go soon
Want to see some trick before?
Show me!
Press Cmd + D
Haha!
Did you bookmark me?
Not yet
Do it then! :-)
Ok, it’s time for me to go
Let’s keep in touch
Goodbye, Cody!

3. The syntax

A good script should let you create a different scenarios of the conversation. It’s easier if the conversation is in English as English syntax is relatively simple. However, in many languages you should be able to create more than one option of a message (phrase) by replacing one word with another. Also, a script designer should be able to specify the places for user’s answers, options, etc.

{ (Good morning) | Hello | Hi }, friend, { I’m | my name is } Cody!
  • | pipes: separates the options in a set
  • ( ) parentheses: specify the condition-related options in a set
  • [ ] brackets: indicate user input
Image for post
Image for post
Example of syntax notation

4. Chatbot messages

The visual display of the conversation was one of this project’s most important UX challenges. Below are some of the highlights.

Image for post
Image for post
Rounded corners help to combine single statements into text blocks
Image for post
Image for post
Using transparency to mark previous messages

5. User messages (answers)

For a conversational UI which is not using AI to interpret user’s answers, this is the most challenging part of writing a script. The script should let users (let’s refer to them here as interlocutors) provide the chatbot with logical answers (remember, constitutive and normative rules), but the more natural and open the conversation, the more entertaining it is for the interlocutor.

  • they require good anticipation skills
  • users may not be allowed to speak what they want
Image for post
Image for post
Sample defined answer
  • they might require some predefined word databases to be parsed
  • users are allowed to communicate more naturally
Image for post
Image for post
Sample non-defined answer
  • regular expressions (regexp) can be used for some inputs (e.g. email)
  • use arrays of most popular swear words
  • (I’d be careful with this one but) use some dictionary with API to check if the answers you expect to be words are really words
Image for post
Image for post
Close-ended question without options
Image for post
Image for post
Close-ended question with options

6. Interjections, fillers, non-lexical conversation sounds

People mumble, make mistakes, hesitate or lose the thread when speaking. This is normal. We wanted the conversation with our chatbot to be that natural too. So we used them as well.

Image for post
Image for post
Sample usage of non-lexical sounds

Part 2. Designing the non-verbal communication

1. Messages arrangement

The way bot’s and user’s avatars and their messages are arranged shouldn’t be incidental too. There are two most frequent types of displaying the conversation:

Image for post
Image for post
Aligned message arrangement
Image for post
Image for post
Opposite message arrangement

2. Chatbot’s appearance

We were lucky, as Chop-Chop had a brand hero. What’s more, Cody is absolutely perfect for any conversational UI purposes, as he has a large library of pre-designed appearances we could use. I think soon companies will start to measure and optimize conversational UI conversion rates by testing different chatbot avatars.

Image for post
Image for post
Cody avatar variants

3. Chatbot’s facial expressions

Facial expressions are super important. We wanted to include it in our project too.

Image for post
Image for post
Blinking chatbot avatar
  • sadness
  • surprise
  • fear
  • disgust
  • anger
Image for post
Image for post
Sample Cody facial expressions

4. User’s facial expression (experimental)

We wanted the users to be able to send a non-verbal message to Cody too. We used the user avatar to do that. By hovering the avatar, users can change their facial expression as a reaction to the Cody’s messages. It doesn’t reflect the real facial expressions obviously, but it’s another way to communicate with conversational UI.

Image for post
Image for post
Alternative user facial expressions

5. Using emojis

Everyone uses emojis now. And it shouldn’t be a surprise. They’re universal and extremely useful, and they add the non-verbal layer to written communication.

Image for post
Image for post
Message with emoji

6. Phatic expression — animating the conversation

Animation can take the conversational UI user experience to the next level, making the UI interactions more natural and pleasurable for user. But that’s not all, animated elements can play an important role for the entire conversation, being responsible for, so called, phatic expression. Simply speaking, this is everything that makes the conversation flow smoothly.

Image for post
Image for post
Typing indicator
Image for post
Image for post
Hover activated typing indicator

Ending

This was definitely one of the most interesting project The Rectangles have worked on recently. Designing a conversational website when there’re still so few of them online was a fantastic adventure for our team. We’ve learnt a lot and to be honest — we can’t wait for another project like that.


The Startup

Medium's largest active publication, followed by +685K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Leszek Zawadzki

Written by

Co-founder of The Rectangles — UX design agency. Lecturer at the University of Wrocław. https://therectangles.com

The Startup

Medium's largest active publication, followed by +685K people. Follow to join our community.

Leszek Zawadzki

Written by

Co-founder of The Rectangles — UX design agency. Lecturer at the University of Wrocław. https://therectangles.com

The Startup

Medium's largest active publication, followed by +685K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store