1
UX for ChatBots 🤖👍
Younes BENAOMAR
UX Designer
2
Who
2007 2015
Natural UI Conversational UI
Hubot
Multitouch
NourBot BNPBot Ma Cigogne
3
What is chatbot ?
A.I computer programs designed to
behave like a human that you can
interact with, in order to get
information or get things done.
It a THREAT !
It’s NOT a THREAT !
4
how it works ?
Natural
Language
Processing
Machine &
Deep Learning
Text &/or speech EngineProduct
REST/
GraphQL
ORM
DB
5
UX Design = Process + Principales
6
How: Design process
1
Discovery Design
3
Realisation
2
Planning Validation
7
Design begins simply by talking to real
people, in real contexts
1 - Discovery
Interviews Observations
Use case &
Scenarios
State of the art
8
The solution who does not push through
several concepts is not really engaging in
solving the problem.
2 - Design
9
Build, Test, Build, Test, Build, Test, Build, Test …
3- Realisation
Test with your future users
Build a prototype as soon as possible
10
Iterative process
1
Discovery Experience
3
Realisation
D E R DE R R R …
2
Planning Validation
11
Sets of generally applicable laws, guidelines, human
biases, and design considerations.
A starting point for the creation of new designs to solve
problems.
Design principales for Chatbots
Persona
Give your chatbot a persona and ensure
that the users know that chatbots are not
humans
Design principales
Storytelling
What story do you want to take your users on? 

What experiences will they have along the way?
Design principales
Avoid infinite Loop
Keep your conversation flow logic loose
Design principales
Exit Options Input Disambiguation Frustration Detection
Keep it incredible simple
Bot conversations should be bounded to very particular
subjects and follow linear conversation routes; 



Do not try to create a general, self-aware A.I.
Design principales
Chat Medium
Make use of conventions UI, show a nicely-formatted card
previewing the linked page.
Design principales
t
Quick Replies Cards Webview Persistent Menu
Provide a fallback
Always have a human fallback option, allowing the
user to express “I’d rather wait and talk to a real
human, make this robot thing go away”.
Design principales
Je ne comprend pas 😥
Ça m'embête d'entendre ça.

Une personne de l’équipe va prendre
en contact avec vous.
Vous pouvez également essayer sur
l’application mobile
Give users a choice
Design principales
Don’t place users in a situation where they need to
guess the correct incantation required to proceed
Listen
Build in ways to lead the user toward their
goals, and provide empathetic error messages
where necessary.
Design principales
Questions ? 👋

UX Design for ChatBots

  • 1.
    1 UX for ChatBots🤖👍 Younes BENAOMAR UX Designer
  • 2.
    2 Who 2007 2015 Natural UIConversational UI Hubot Multitouch NourBot BNPBot Ma Cigogne
  • 3.
    3 What is chatbot? A.I computer programs designed to behave like a human that you can interact with, in order to get information or get things done. It a THREAT ! It’s NOT a THREAT !
  • 4.
    4 how it works? Natural Language Processing Machine & Deep Learning Text &/or speech EngineProduct REST/ GraphQL ORM DB
  • 5.
    5 UX Design =Process + Principales
  • 6.
    6 How: Design process 1 DiscoveryDesign 3 Realisation 2 Planning Validation
  • 7.
    7 Design begins simplyby talking to real people, in real contexts 1 - Discovery Interviews Observations Use case & Scenarios State of the art
  • 8.
    8 The solution whodoes not push through several concepts is not really engaging in solving the problem. 2 - Design
  • 9.
    9 Build, Test, Build,Test, Build, Test, Build, Test … 3- Realisation Test with your future users Build a prototype as soon as possible
  • 10.
  • 11.
    11 Sets of generallyapplicable laws, guidelines, human biases, and design considerations. A starting point for the creation of new designs to solve problems. Design principales for Chatbots
  • 12.
    Persona Give your chatbota persona and ensure that the users know that chatbots are not humans Design principales
  • 13.
    Storytelling What story doyou want to take your users on? 
 What experiences will they have along the way? Design principales
  • 14.
    Avoid infinite Loop Keepyour conversation flow logic loose Design principales Exit Options Input Disambiguation Frustration Detection
  • 15.
    Keep it incrediblesimple Bot conversations should be bounded to very particular subjects and follow linear conversation routes; 
 
 Do not try to create a general, self-aware A.I. Design principales
  • 16.
    Chat Medium Make useof conventions UI, show a nicely-formatted card previewing the linked page. Design principales t Quick Replies Cards Webview Persistent Menu
  • 17.
    Provide a fallback Alwayshave a human fallback option, allowing the user to express “I’d rather wait and talk to a real human, make this robot thing go away”. Design principales Je ne comprend pas 😥 Ça m'embête d'entendre ça.
 Une personne de l’équipe va prendre en contact avec vous. Vous pouvez également essayer sur l’application mobile
  • 18.
    Give users achoice Design principales Don’t place users in a situation where they need to guess the correct incantation required to proceed
  • 19.
    Listen Build in waysto lead the user toward their goals, and provide empathetic error messages where necessary. Design principales
  • 20.