Conversational UI Principles — Complete Process of Designing a Website Chatbot

Opening

Project objectives

A bit of theory

The principles of communication

Communication is a process of sharing meaningful messages

Theory into practice — building conversational UI

Defining goals

Part 1. Designing the verbal communication

Building the conversation script

1. The conversation frame

Early stages of writing conversation script
Example of simple conversation frame timeline

2. The script

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

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

4. Chatbot messages

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

5. User messages (answers)

Sample defined answer
Sample non-defined answer
Close-ended question without options
Close-ended question with options

6. Interjections, fillers, non-lexical conversation sounds

Sample usage of non-lexical sounds

Part 2. Designing the non-verbal communication

1. Messages arrangement

Aligned message arrangement
Opposite message arrangement

2. Chatbot’s appearance

Cody avatar variants

3. Chatbot’s facial expressions

Blinking chatbot avatar
Sample Cody facial expressions

4. User’s facial expression (experimental)

Alternative user facial expressions

5. Using emojis

Message with emoji

6. Phatic expression — animating the conversation

Typing indicator
Hover activated typing indicator

Ending


The Startup

Medium's largest active publication, followed by +469K 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 +469K people. Follow to join our community.