Conversational UI Principles — Complete Process of Designing a Website Chatbot

In this article I’ll show you a case study describing an entire process of designing a conversational UI for a B2B website, including fragments of the conversation script, basics of the communication theory and some of the tips and tricks I think make this project a bit unique.

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.

So naturally, when a chance arose for The Rectangles to work on a conversational website for one of our clients, we didn’t hesitate a single second.

Come on — show me one team who wouldn’t like to work on such project now.

Project objectives

Client:

• Chop-Chop — a web development company

Our main tasks in this projects:

• design a complete set of conversational UI assets
• 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

I’ll show you how we did it step by step, but first…

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.

And I think you shouldn’t skip this part too.

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.

The most common verbal communication tool is language,which is a set of symbols used to exchange information in the form of words that can be transformed into meanings.

Examples: Hello; Thank you; You look great today

Non-verbal, by contrast, refers to any type of communication different from words. It can be gestures, facial expressions, tone of voice, but also actions or symbols which have a common social meaning.

Examples: 👍, 😞, 😀

Communication is a process where all the aspects affect one another. It means that communication is holistic and that the entire process creates a system in which all the elements (all the messages) work together for the common good.

These messages are functional which means we use them to obtain desired effects, but also adaptive — meaning that, depending on the situation, they can be modified and adjusted in order to achieve better results.

Finally, the language we use to communicate is based on communication code, which is a set of principles and meanings. They create the base for interpretation. This communication codes are also called rules; there are two types of them:

1. Constitutive rules: referring to the sense and the meaning of particular words, and how we should interpret them. Also, they tell us how to understand a message in a particular context.
2. 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.

And of course one of the most natural and common way to communicate is a conversation. So when discussing conversational UIs, I think we should also take a look at a sample conversation definition:

Conversation is a talk between two or more people, usually an informal one

So is it possible to create, without powerful AI mastermind, an interface that would meet the communication principles?

This is what a conversational UI (CUI) definition may look like:

An interface based on a holistic system of functional, adaptive and meaningful messages exchange, in which both sides of the conversation use and interpret the language codes, maintaining and complying with the constitutive and normative rules in a friendly, informal way

And we wanted to create such UI.

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.

In this case we knew exactly what we wanted to achieve, as we’ve worked with Chop-Chop for years (actually, I co-founded it in 2010), but if you need help with defining chatbot’s / user’s goals, you can use User Centered Design Canvas.

User Centered Design Canvas - First UX tool combining user needs with business goals

We specified the following goals for our chatbot:

• express Chop-Chop brand character
• 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.

Early stages of writing conversation script

Then, we divided and arranged the parts in functional groups (we called them blocks). We already started to see some patterns. Some of the groups were goals-related (we called them cores), others were responsible for making the conversation less official (chatters), yet another group provided the user with options or additional information (extras), and there were also reactions to user answers. Finally, skips could fast-forward the conversation to a different script block.

The final list of script blocks:

• Opening
• Extra(s)
• Skip(s)
• Core(s)
• Chatter(s)
• Ending

Example of simple conversation frame timeline

Of course, the final script construction is way more knotty than a linear frame. All the dependencies and endless combinations based on the holistic nature of the conversation make the whole thing extremely complex.

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.

The good thing is — the only tool you need to write CUI scripts is pen and paper or a text editor.

Below there are some of the examples of the script blocks.

Opening:

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…

Extra:

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!

Skip:

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

Core:

    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

Chatter:

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

Ending:

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.

To create such script notation you’ll need a set of symbols: parentheses, brackets, curly brackets, and whatever you and your team can read and understand. This is also very important for the developers who will be implementing the script. They should also be able to understand it.

{ (Good morning) | Hello | Hi }, friend, { I’m | my name is } Cody!

In some cases chatbot can pick a word from a specific set randomly (Hello; Hi, Hey; Yo), but instead it can also be a bit smarter and display some messages according to, let’s say, the user time of the day (Good morning; Good evening).

Here’s a sample set of symbols and their functions:

• { } curly brackets: define a set of options
• | pipes: separates the options in a set
• ( ) parentheses: specify the condition-related options in a set
• [ ] brackets: indicate user input

Example of syntax notation

⚠️ If you’d like to learn more about writing the script per se, let us know.

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.

Single statements vs Complete paragraphs

People don’t speak in paragraphs. We speak using single sentences. Of course, these can sometimes form endless utterances, but in a conversation people often take turns. Also, we think that displaying long paragraphs of text, which user needs to read before answering, can be compared to talking to a person who speaks horribly fast. So instead of paragraphs, we decided to display combinations of single (short) sentences.

Combining single statements into blocks

By manipulating the bubbles’ corner radius, it’s possible to create a logical text blocks of single messages. That way, we could still talk in sentences and not in paragraphs, but give user a gentle hint — hey, this part of conversation starts here, and ends there.

Rounded corners help to combine single statements into text blocks

Fading out vs Scrolling

The most frequent method of displaying the conversation flow is to constantly add new messages below the old ones and to let user scroll.

As an experimental alternative, the old messages can fade out and as a result scrolling is no longer necessary. I know the usable aspect of such solution is questionable, but take a look at it from different perspective — such solution reflects the nature of a real conversation. When talking with someone you also don’t have access to the exchanged information all the time.

Using transparency to mark previous messages

Additionally, at some point you can simply use skips to ask user if they would like to return to any of the previous parts of the conversation, or alternatively display a permanent ‘Skip to’ button which when hit would trigger bot’s question about returning to any of the past passages.

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.

We used two types of answers:

A. defined (controlled, close-ended)

• they are relatively easy to handle
• they require good anticipation skills
• users may not be allowed to speak what they want

Sample defined answer

B. non-defined (not-controlled, open-ended)

• they are more difficult to handle
• they might require some predefined word databases to be parsed
• users are allowed to communicate more naturally

Sample non-defined answer

There’s probably no universal way of handling the open-ended answers. We can’t assume people will follow the communication code. Some of the non-defined messages will breach (especially) the normative rules. Of course some users will speak (write) as they would speak (write) with a human, but of course — others will try to challenge your bot by sending sexts, swearing or gibberish.

Here are some tips how you can control the non-defined messages:

• inputs can be limited only to specified set of signs (e.g. if asked for a name, only letters allowed)
• 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

Naturally, an ideal conversation should be unfettered, but in case of a conversational UI without an AI backing — well, a bit of control is inevitable.

One more thing:

When using defined questions, you can make the experience of answering slightly better with one small improvement. Instead of asking the question like this:

Close-ended question without options

ask like this:

Close-ended question with options

This is pure psychology — in the first example the (possibly) infinite range of options the user might have is limited, whereas in the second you’re specifying this range and giving your user a choice. The result is the same in both scenarios, but the UX is better in the latter.

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.

Here are some of the popular conversational non-lexical sounds: yeah, okay, uh, oh, aum, mmm, uhh, uh-huh, uu, you know, ermmm

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:

A. avatars + messages are aligned (in most cases, to the left) one under another

Aligned message arrangement

B. avatars + messages of both users are opposite one another

Opposite message arrangement

We think option B reflects the nature of a real conversation better. Usually, when two people talk, they look at each other. So to make the conversational UI feel more natural, the interlocutors’ avatars and their messages should also be displayed that way.

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.

Not only this, I’m sure that if we had Cody’s female equivalent, the user responses would be totally different from those with the male one.

Cody avatar variants

On a side note, I think people should avoid using their pictures as chatbot avatars. It’s confusing — am I talking to a bot, or a person? Really, bot’s visual appearance is something designers should be extremely careful about. By the way, it’s an evolutionary fact: facial recognition is one of the very first abilities small children develop and it usually happens months before they learn how to speak.

Also, if you want to use your real name as your bot’s name, make sure your script reflects your true personality too. A mundane chat with a bot (=you) may in consequence have a detrimental effect on your real image.

3. Chatbot’s facial expressions

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

Blinking and winking:

People blink 10 times per minute on average. Cody does the same. Also, winking can be an additional non-verbal signal (for example: Nah, I’m just joking; Just kidding).

Blinking chatbot avatar

The 6 basic emotions:

Additionally, chatbot reactions can fall into one of the 6 basic emotions:

• happiness
• sadness
• surprise
• fear
• disgust
• anger

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.

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.

Compare this two text messages:

A. I hate you!

B. I hate you! 😄

I guess for most of us, B. could easily be translated to: I love you, mate!

Obviously, Cody uses emojis just like most of us.

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.

Animating chatbot’s avatar

When two people meet, they very often start a conversation with a handshake. It allows to get closer to an interlocutor, to look into their eyes and see their face more clearly. Hence, Cody’s avatar is slightly bigger at the beginning of the conversation allowing the user to familiarize themselves with Cody, and when the first messages are exchanged, it gets smaller.

Typing indicators

Simple loading (typing) indicators can be used as an equivalent to phatic expression in speaking, telling the user—stay cool, honey bunny, I’m still here, give me a second to retort.

There are infinite number of typing indicators. Here’s one of the most common:

Typing indicator

Typing indicators and hover states

Additionally, we decided to use typing indicators to suggest the user —hey, you’re about to say it. A static typing indicator is displayed next to the user avatar, but when the user hovers, let’s say, the close-ended answer button, the typing indicator starts to animate.

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.

Now, we can see it too — the future of UX design is writing.

The article describing the process of writing our chatbot script has been published:

Making Chatbots Talk — Writing Conversational UI Scripts Step by Step

The Cody chatbot website is currently being developed at Chop-Chop.
To get notified when it’s ready — stay in touch.

If you liked this article — I’d really appreciate if you recommended it or left a comment. You can also follow me on Twitter. Peace!