Contenu
- 01. Définissez une personnalité
- 02. Utilisez RiveScript
- 03. Générez le cerveau de votre bot
- 04. Concevoir une voix
- 05. Demande de soumission
- 06. Ne craignez pas le chatbot
Au milieu des années 2000, les agents virtuels et les chatbots du service client ont reçu beaucoup d'adulation, même s'ils n'étaient pas très conversationnels, et sous le capot, ils étaient simplement composés d'échanges de données avec des serveurs Web.
De nos jours, même s'il existe un grand nombre d'exemples d'`` IA faible '' (y compris Siri, Alexa, les moteurs de recherche Web, les traducteurs automatisés et la reconnaissance faciale) et d'autres sujets tels que la conception Web réactive monopolisent les feux de la rampe, les chatbots font toujours sensation. . Avec des investissements importants de la part des grandes entreprises, il reste de nombreuses opportunités pour pirater les interfaces conversationnelles du futur.
- Comment concevoir une expérience de chatbot
Parfois, ils ont mauvaise réputation, mais les chatbots peuvent être utiles. Ils n'ont pas besoin de se sentir comme un remplaçant de base pour un formulaire Web standard, où l'utilisateur remplit les champs de saisie et attend la validation - ils peuvent fournir une expérience de conversation.
Essentiellement, nous améliorons l'expérience utilisateur pour qu'elle se sente plus naturelle, comme converser avec un expert ou un ami, au lieu de pointer-cliquer sur le navigateur Web ou de faire des gestes mobiles. L’objectif est qu’en fournissant des réponses empathiques et contextuelles, cette technologie s’intègre directement dans la vie des gens.
Regardez la vidéo ci-dessous ou poursuivez votre lecture pour découvrir un moyen pratique de concevoir et de construire un chatbot, basé sur une véritable application de prise de projet dans une pratique de conception de services.
01. Définissez une personnalité
Étant donné que cette pratique dessert plus de 110 000 membres dans le monde, l'objectif était de fournir une interface rapide, pratique et naturelle à travers laquelle les parties prenantes internes pourraient demander des services numériques efficaces, au lieu d'avoir à remplir des formulaires déroutants.
La première étape consistait à établir la personnalité du chatbot, car cela représenterait la voix de l’équipe de conception de services auprès de ses parties prenantes. Nous nous sommes appuyés sur le travail fondateur d'Aarron Walter sur les personnalités du design. Cela a grandement aidé notre équipe à développer les traits de personnalité du bot, qui ont ensuite déterminé les messages de salutations, d'erreurs et de commentaires des utilisateurs.
Il s'agit d'une étape délicate, car elle affecte la perception de l'organisation. Pour nous assurer que nous avons autant d'informations que possible, nous avons immédiatement mis en place des ateliers pour les parties prenantes pour définir la personnalité, la couleur, la typographie, les images et le flux de l'utilisateur appropriés lors de l'interaction avec le bot.
Après avoir obtenu toutes les approbations nécessaires - y compris la recherche d'un conseil juridique -, nous avons décidé de convertir les formulaires de demande archaïques en une série de questions allant et venant imitant une conversation entre les parties prenantes et un représentant de notre équipe de services de conception.
02. Utilisez RiveScript
Nous savions que nous ne voulions pas aller trop loin dans le langage de balisage de l'IA pour la partie traitement - nous avions juste besoin de suffisamment pour relancer l'expérience.
RiveScript est une API de chatbot simple, assez facile à apprendre et suffisante pour nos besoins. En quelques jours, nous avions la logique de recevoir une demande de projet du bot et de l'analyser avec suffisamment de logique métier pour la valider et la catégoriser afin qu'elle puisse être envoyée via les services JSON REST vers la file d'attente de tâches de projet interne appropriée.
Pour faire fonctionner ce chatbot de base, dirigez-vous vers le référentiel RiveScript, clonez-le et installez toutes les dépendances standard de Node. Dans le dépôt, vous pouvez également avoir un avant-goût des interactions que vous pouvez ajouter avec les différents exemples d'extraits de code.
Ensuite, exécutez le dossier du client Web, qui transforme le bot en page Web en exécutant un serveur Grunt de base. À ce stade, vous pouvez améliorer l'expérience en fonction de vos besoins.
03. Générez le cerveau de votre bot
La prochaine étape consiste à générer le «cerveau» de notre robot. Ceci est spécifié dans les fichiers avec l'extension .RIVE, et heureusement, RiveScript est déjà livré avec des interactions de base prêtes à l'emploi (par exemple, des questions telles que `` Quel est votre nom? '', `` Quel âge avez-vous? '' Et `` Quel est votre couleur préférée?').
Lorsque vous lancez l'application client Web à l'aide de la commande Node appropriée, le fichier HTML est invité à les charger.RIVE des dossiers.
Ensuite, nous devons générer la partie du cerveau de notre chatbot qui traitera les demandes de projet. Notre objectif principal est de convertir une sélection de questions d'admission de tâches de projet en une conversation régulière.
Ainsi, par exemple:
- Bonjour, comment pouvons-nous vous aider?
- Génial, dans combien de temps devons-nous commencer?
- Pouvez-vous me donner une idée approximative de votre budget?
- Parlez-moi de votre projet ...
- Comment avez-vous entendu parler de nous?
Un formulaire Web accessible typique ressemblerait à ceci:
form action = ""> fieldset> legend> Request Type: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> option 2 / label> br> input id = "option-trois" type = "radio" name = "request-type" value = "option-trois"> label for = "option-trois"> option 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 mois / label> br> input id = "one-three-month" type = "radio" name = "request- timeline" value = "one-three-month"> label for = "one-month"> 1-3 mois / label> br> input id = "quatre-plus-mois" type = "radio" name = "request- timeline" value = "quatre-plus-mois"> label for = "quatre-plus-mois"> 4+ mois / label> br> / fieldset> br> label for = "request-budget"> Informations sur le budget / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Description / libellé du projet> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>
Avec les formulaires Web, nous connaissons très bien certains modèles: vous cliquez sur le bouton Soumettre, toutes les données du formulaire sont envoyées vers une autre page où la demande est traitée, puis, très probablement, une page de remerciement effrontée apparaît.
Avec les chatbots, nous sommes en mesure de prendre en compte l'interaction de la soumission d'une demande et de la rendre plus significative.
04. Concevoir une voix
Pour convertir ce formulaire en une interface utilisateur conversationnelle servie dans le client Web chatbot de RiveScript, nous devons convertir l’architecture de l’information de rigide à fluide; ou des étiquettes de champ dans des chaînes d'interface utilisateur.
Examinons quelques libellés de champ accessibles et leur ton de question associé:
- Demander: Comment pouvons nous aider? Pas certain? Ça vous dérange si je pose quelques questions?
- Chronologie: Combien de temps faut-il pour commencer?
- Informations budgétaires: Pouvez-vous me donner une idée approximative de votre budget?
- Description du projet: OK, pouvez-vous me dire un résumé du problème à résoudre?
- Référence: De plus, qui vous a référé à nous?
Ensuite, nous devons convertir le code du formulaire Web en script AI, en suivant la logique de traitement très facile à apprendre de RiveScript pour les conversations bidirectionnelles:
- Comment pouvons nous aider? + *% comment pouvons-nous aider - set areas = varSure, ça vous dérange si je pose quelques questions? + *% sûr que cela vous dérange si je pose quelques questions - Dans combien de temps dois-je commencer cette demande? + *% dans combien de temps dois-je commencer cette demande - définir quand = varPouvez-vous me donner une idée approximative de votre budget? + *% pouvez-vous me donner une idée approximative de votre budget - set budget = varOK, pouvez-vous me donner un résumé du problème à résoudre, des composants et des environnements affectés, ou une description générale? + *% ok pouvez-vous me dire un résumé du problème à résoudre les composants et environnements concernés ou une description générale - set project = varAussi, qui vous a référé à nous? + *% également qui vous a référé à nous - set referal = vargreat voici ce que j'ai obtenu jusqu'à présent: n Services nécessaires: obtenir des zones> n Besoin de commencer: obtenir quand> n Budget approximatif: obtenir le budget> n À propos de votre projet: obtenir le projet> n Parrainé par: obtenir le parrainage> n et je vous contacterai sous peu. Y a-t-il autre chose que je peux vous aider aujourd'hui? appel> accueil obtenir des zones> obtenir quand> obtenir un budget> obtenir un projet> obtenir une recommandation> / appeler>
05. Demande de soumission
Contrairement aux variables de formulaire standard envoyées à une autre page ou service à traiter, les chatbots peuvent valider et soumettre immédiatement les informations saisies par l'utilisateur dans une fenêtre de discussion (ou prononcées), ce qui signifie que les utilisateurs peuvent également revoir facilement les valeurs saisies précédemment.
Nous devions envoyer la demande de l'utilisateur saisie dans l'interface utilisateur du chatbot via l'API JSON REST à un serveur de tâches de projet externe.
Dans RiveScript-js, nous sommes libres d'utiliser un XMLHttpRequest objet pour soumettre la demande presque simultanément, car les données sont saisies par l'utilisateur:
> prise d'objet javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "zones"); var b = rs.getUservar (rs.currentUser (), "quand"); var c = rs.getUservar (rs.currentUser (), "budget"); var d = rs.getUservar (rs.currentUser (), "projet"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / envoyer"; var params = "zones =" + a + "& quand =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (paramètres); http.open ("POST", url, vrai); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Connexion", "fermer"); http.onreadystatechange = function () {// Appelle une fonction lorsque l'état change. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (paramètres); objet
06. Ne craignez pas le chatbot
Bientôt, les moyens actuels d'interagir avec les ordinateurs pour obtenir des informations céderont à la technologie basée sur l'IA comme les chatbots, où les gens ne font que de simples commandes vocales, comme nous l'avons vu avec des technologies telles qu'Amazon Echo et Google Home.
La communauté de la conception Web n'a pas à craindre - nous devrions tous profiter de la valeur ajoutée de cette nouvelle technologie.
Cela pourrait changer la donne pour les entreprises pour lesquelles il travaille, offrant un service client entièrement évolutif et une meilleure intelligence client.
Cet article a été initialement présenté dansmagazine net, le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Abonnez-vous ici.
