Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designez votre expérience chatbot

Designez votre expérience chatbot

Dans cette session, venez découvrir comment designer une experience unique et valorisante avec un agent conversationnel, en utilisant les solutions de Facebook, de Chatbot Factory et de Microsoft.

Christopher MANEU

October 04, 2017
Tweet

More Decks by Christopher MANEU

Other Decks in Design

Transcript

  1. experiences.microsoft.fr #experiences17

    View Slide

  2. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    • Le messaging et ses usages
    • Créer une experience conversationnelle
    • Implémenter l’experience avec Bot Framework

    View Slide

  3. Hello, Microsoft
    Experiences
    Messenger Platform Introduction
    04.10.17
    S T R A T E G I C P R O D U C T P A R T N E R S H I P S
    A L E X A N D R E C R O I S E A U X

    View Slide

  4. 29
    Bot design & UX
    conversationnel
    Thomas Sabatier
    CEO, The Chatbot Factory

    View Slide

  5. Qui sommes-nous ?
    The Chatbot Factory est une startup spécialisée dans
    le design, le développement et l'entraînement de
    chatbots intelligents, apprenants et multi-plateformes.

    View Slide

  6. Types
    de chatbots
    1

    View Slide

  7. Expériences simples et verticales
    Questions
    ouvertes
    LINÉAIRE
    Trees
    User Bot
    Flow dirigé
    Contrainte utilisateur
    forte

    View Slide

  8. 41 sec
    LINÉAIRE
    Sans IA

    View Slide

  9. Expériences dynamiques et humanisées
    NON-LINÉAIRES
    IA ++
    User Bot
    N
    L
    P
    Questions libres
    Aucune contrainte
    utilisateur

    View Slide

  10. 13 sec
    NON-LINÉAIRE
    IA++

    View Slide

  11. Expérience complexes et horizontales
    Flow complexe
    Multi-fonctionnalités
    N
    L
    P
    HYBRIDES
    IA ++ / Trees
    User Bot

    View Slide

  12. Expérience
    humanisée
    2

    View Slide

  13. Vers une expérience intuitive et humaine
    Gestion du rythme
    Séquençage des messages
    Messages de 80 caractères maximum avec
    une marge de 10%.
    Délais entre les messages
    Délai de 3 secondes maximum entre les
    messages afin d’assurer une lecture fluide.

    View Slide

  14. Une expérience digital native et génératrice d’émotions
    Emotions et surprise
    Médias riches
    GIF, vidéos, Meme, ou autres médias en
    fonction de l’audience
    Emoji’s
    Les é

    View Slide

  15. Gestion de la micro-copy
    Les “fillers”
    Courtes phrases et expressions qui
    précèdent la réponse de la requête
    utilisateur afin de contextualiser et d’animer
    la conversation.

    View Slide

  16. Small talk
    Rendre la conversation la plus humaine
    possible
    L’intégration des fonctionnalités coeur n’est
    pas suffisante dans la création d’un bot.
    Le paramètre le plus important dans un bot
    est sa capacité à comprendre et répondre aux
    périphériques de la conversation (‘small talk’).

    View Slide

  17. UI
    & Formats
    3

    View Slide

  18. “Créez de la valeur en faisant gagner du
    temps à vos utilisateurs!”

    View Slide

  19. Contenus

    View Slide

  20. Contenus

    View Slide

  21. Les principes
    NLP
    4

    View Slide

  22. Comment ça fonctionne ?

    View Slide

  23. Description de la matrice conversationnelle
    Modèle de réponse à une question libre
    Neymar a inscrit 6 buts depuis le début de la
    saison !
    Laisse moi donc
    regarder dans mes
    archives…
    Hé, tu sais combien de buts il a mis
    Neymar depuis qu’il est au PSG ?
    Intent: data-nb-buts
    entity: NeymayJR

    View Slide

  24. Description de la matrice conversationnelle
    Typologie de questions
    “CH”
    “WH”
    “YN”
    “TG”
    Questions “ouvertes” où le bot
    doit faire un choix.
    Questions commençant par “quoi”
    ou “quand” par exemple.
    En anglais “what”, “when”,
    “where”, “who”, “why”, ...
    Questions “fermées”, qui se
    répondent par oui ou non. En
    anglais “yes” ou “no”.
    Questions de type “tag” ou
    questions rhétoriques.
    C’est une blague? Je ne trouve pas la billetterie sur votre site !
    Je peux commander ici?
    Saisie libre utilisateur

    View Slide

  25. Une expérience évolutive
    Au gré des sollicitations de l’utilisateur
    Je vous permet de calculer les
    franchises bagages, répondre à
    vos question ou suivre votre
    bagages.
    Alors en quoi puis-je vous aider?
    Bonjour, je suis votre
    assistant bagages Air
    France.
    Première connexion
    Bonjour! J’espère que vous allez
    bien. Comment puis-je vous
    aider?
    Seconde connexion
    La prochaine fois que vous
    voudrez tracker vos bagages,
    n’hésitez pas à me saisir votre
    code directement depuis le
    menu principal!
    Après avoir utiliser deux fois la
    fonction follow my bag
    Comment puis-je vous
    aider?

    View Slide

  26. 53

    View Slide

  27. Gestion des incompréhensions
    Pour une expérience fluide
    Le bot renvoie vers un opérateur
    3.
    Troisième incompréhension
    Le bot guide l’utilisateur
    2.
    Le bot demande de reformuler
    User : “ …”
    Première incompréhension
    Bot : “Je ne saisi pas votre
    demande, pourriez-vous
    reformuler s’il vous-plaît ?
    1.
    User : “ …”
    Bot : “Je vous invite à
    sélectionner une rubrique ci-
    dessous pour préciser votre
    demande”
    Choix 1 Choix 2
    User : “ …”
    Bot : “Je ne parviens pas à
    comprendre votre requête, je
    vous mets en relation avec un
    opérateur humain.”
    Deuxième incompréhension

    View Slide

  28. Principe de la structure NLP
    Interprétation des émotions utilisateur
    5 niveaux de granularité
    User : “je vous remercie pour
    votre aide!”
    Sentiment très positif
    {
    "sentiment": "vpositive"
    }
    User : “j’en ai ras le bol de votre
    service client”
    Sentiment négatif
    {
    "sentiment": "negative"
    }
    User : “Entendu”
    Sentiment neutre
    {
    "sentiment": "neutral"
    }

    View Slide

  29. Principe de la structure NLP
    Interprétation des émotions utilisateur
    Création d’une moyenne par utilisateur
    User : “Bonjour !”
    {
    "sentiment": "positive"
    }
    ….
    User : “Jamais j’arrive à acheter mes
    places :(”
    {
    "sentiment": "negative",
    "feeling": "sad"
    }
    ….
    User : “D’accord, parfait !”
    {
    "sentiment": "neutral",
    "feeling": "satisfied"
    }
    ….
    User : “Super merci”
    {
    "sentiment": "vpositive"
    }
    0.65
    0.35
    0.5
    0.9
    Moyenne sur l’échange : 0.60 (~positive)

    View Slide

  30. Escalade vers l’humain
    3 cas différents se distinguent.
    Une procédure ad-hoc est appliquée à chacune des variantes
    User : “j’veux trimbaler 1
    télescope”
    Bot : “Je ne parviens pas à
    comprendre votre requête, je
    vous mets en relation avec un
    opérateur humain.”
    ou
    User : “J’aimerai parler à un
    conseiller”
    Bot : “Ne bougez pas, un
    conseiller est disponible je
    vous mets en relation”
    ou
    User : “J’en ai marre, j’ai perdu
    mon bagage! et j’ai pas de
    temps à perdre”
    Bot : “Un conseiller va vous
    accompagner sur la procédure
    à suivre.”
    Incompréhension Demande explicite Détection d’un sentiment
    utilisateur

    View Slide

  31. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot

    View Slide

  32. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot

    View Slide

  33. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    ScubaBot
    Meetups Bots & Cognitive
    GUSS / AZUG
    12 Avril 2017
    Hello,
    Bienvenue chez les Scubabous.
    Alors, vous êtes intéressés par
    la plongée ? Posez-moi une
    question ou démarrez avec
    l’une de ces activités.
    Découvrir les niveaux de plongée
    M’inscrire pour un baptême
    M’inscrire à un cours
    ScubaBot
    Quelle taille de tshirt souhaite
    tu ? Medium, Large, …
    XL
    Top. Je suis prêt à enregistrer
    ton inscription pour la sortie
    Porquerolles. Nous pouvons te
    contacter sur
    [email protected], et
    nous mettons un t-shirt XL de
    côté. L’inscription coûte 450€
    C’est bon pour toi ?
    Je veux m’inscrire pour un
    voyage

    View Slide

  34. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    Meetups Bots & Cognitive
    GUSS / AZUG
    12 Avril 2017
    Accueil
    Inscription
    Voyage
    Choix
    Destination
    Taille Tshirt Récapitulatif
    Aide

    View Slide

  35. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    Avoir toujours la bonne réponse : ScorableGroup
    No response
    Commands
    Intent
    QnA
    Scorable -> RegExScorable
    Scorable -> RegExScorable
    Scorable -> RegExScorable
    Scorable -> LuisIntent
    Scorable -> LuisIntent
    Scorable -> LuisIntent
    Scorable -> MethodBind
    Scorable -> MethodBind > Humain ?
    ScorableGroup
    ScorableGroup
    ScorableGroup
    ScorableGroup

    View Slide

  36. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot

    View Slide

  37. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    var reply = activity.CreateReply("I have colors in mind, but need your help to choose the
    best one.");
    reply.Type = ActivityTypes.Message;
    reply.TextFormat = TextFormatTypes.Plain;
    reply.SuggestedActions = new SuggestedActions()
    {
    Actions = new List()
    {
    new CardAction(){ Title = "Blue", Type=ActionTypes.ImBack, Value="Blue" },
    new CardAction(){ Title = "Red", Type=ActionTypes.ImBack, Value="Red" },
    new CardAction(){ Title = "Green", Type=ActionTypes.ImBack, Value="Green" }
    }
    };

    View Slide

  38. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    replyMessage.Attachments.Add(new Attachment()
    {
    ContentUrl =
    "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png",
    ContentType = "image/png",
    Name = "Bender_Rodriguez.png"
    });

    View Slide

  39. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot

    View Slide

  40. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    Adaptive Cards
    O P E N F R A M E W O R K
    M U L T I P L E C A N V A S E S
    Notifications Microsoft Teams Skype Android iOS

    View Slide

  41. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    var card = JsonConvert.DeserializeObject(flightJson);
    Attachment attachment = new Attachment()
    {
    ContentType = AdaptiveCard.ContentType,
    Content = card
    };
    var message = context.MakeMessage();
    message.Attachments.Add(companyResult.First().ToBotAttachment());
    await context.PostAsync(message);

    View Slide

  42. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot

    View Slide

  43. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    if (activity.ChannelId == "facebook")
    {
    //send acknowledgement
    Activity reply = activity.CreateReply("Facebook Messenger message detected!
    Beep boop. [o o]");
    await connector.Conversations.ReplyToActivityAsync(reply);
    //send to the share button dialog
    await Conversation.SendAsync(activity, () => new ShareButtonDialog());
    }

    View Slide

  44. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    //create a channel data object to act as a facebook share button
    reply.ChannelData = new FacebookChannelData()
    {
    Attachment = new FacebookAttachment()
    {
    Payload = new FacebookGenericTemplate()
    {
    Elements = new object[]
    {
    new FacebookGenericTemplateContent()
    {
    Buttons = new[]
    {
    new FacebookShareButton()
    }
    }
    }
    }
    }
    };

    View Slide

  45. Helpful links
    “ 73
    Consumer Insights m.me/FacebookIQ
    Success Stories fb.me/Messenger-Success
    Blueprint eLearning facebook.com/Blueprint
    Getting Started Guide fb.me/Messenger-Get-Started
    Messenger Platform messenger.com/platform

    View Slide

  46. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    https://docs.microsoft.com/bot-framework/
    Slides de la session > https://maneu.net

    View Slide

  47. Microsoft experiences’17
    #experiences17
    Designez votre expérience chatbot
    #experiences17
    Doublez votre chance en répondant aussi
    au questionnaire de satisfaction globale !
    * Le règlement est disponible sur demande au commissariat général de l’exposition. Image non-contractuelle
    Notez cette session sur experiences17.microsoft.fr
    Et tentez de gagner une Surface Pro

    View Slide

  48. experiences.microsoft.fr #experiences17

    View Slide

  49. © 2017 Microsoft Corporation. All rights reserved.
    experiences.microsoft.fr #experiences17

    View Slide