Comment construire une interface de chatbot

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

Au milieu des années 2000, des agents virtuels et des chatters de service à la clientèle ont reçu beaucoup d'adulation, même s'ils n'étaient pas très conversationnels et, sous la hotte, ils étaient simplement composés d'échanges de données avec des serveurs Web.

[dix]

De nos jours, même si un grand nombre d'exemples d'exemples de «AI faibles» (y compris Siri, Alexa, moteurs de recherche Web, des traducteurs automatisés et une reconnaissance faciale) et d'autres sujets tels que site Web adaptatif Sosselez-vous la limoniste, les chatbots causent toujours une émission. Avec des investissements importants des grandes entreprises, il reste beaucoup d'occasions de pirater les interfaces conversations de l'avenir.

Comment concevoir une expérience de chatbot

Parfois, ils obtiennent une mauvaise réputation, mais les chatbots peuvent être utiles. Ils n'ont pas besoin de se sentir comme un remplacement 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 le expérience utilisateur Pour se sentir plus naturel, comme conversé avec un expert ou un ami, au lieu de clics de navigateur Web ou de gestes mobiles. Le but est que, en fournissant des réponses contextuelles empathiques, cette technologie deviendra intégrée directement dans la vie des gens.

Regardez la vidéo ci-dessous ou lisez-le pour découvrir un moyen pratique de concevoir et de créer un château de chat, basé sur une demande d'apport de projet réel dans une pratique de conception de services.

[dix]

01. Définir une personnalité

It’s important to ensure the chatbot’s personality reflects the company it’s representing — Il est important de s'assurer que la personnalité de Chatbot reflète la société qu'il représente

Au fur et à mesure que cette pratique dessert plus de 110 000 membres à l'échelle mondiale, l'objectif était de fournir une interface rapide, pratique et naturelle à travers laquelle les intervenants internes pourraient demander des services numériques efficaces, au lieu de devoir remplir des formulaires déroutants.

La première étape consistait à établir la personnalité de Chatbot, car cela représenterait la voix de l'équipe de conception de services à ses parties prenantes. Nous avons construit sur le travail séminal d'Aarron Walter sur design personnage . Cela a grandement aidé notre équipe à développer les traits de personnalité du bot, qui déterminaient ensuite les messages pour les salutations, les erreurs et les commentaires de l'utilisateur.

C'est une étape délicate, car elle affecte la manière dont l'organisation est perçue. Pour vous assurer que nous avons eu autant d'informations que possible, nous configurons immédiatement des ateliers de parties prenantes pour clouer la personnalité, la couleur, la typographie, la typographie, l'imagerie et la flux de l'utilisateur appropriés lorsque vous engagez avec le bot.

Après avoir gagné toutes les approbations nécessaires - y compris la recherche d'un avocat juridique - nous avons décidé de convertir des formulaires de demande archaïque en une série de questions de fond et d'une conversation entre les parties prenantes et un représentant de notre équipe de services de conception.

02. Utilisez Rivescript

This simple scripting language provides everything you need to design and build a chatbot POC — Ce simple langage de script fournit tout ce dont vous avez besoin pour concevoir et construire un POC de chatbot

Nous savions que nous ne voulions pas devenir trop profondément dans la langue de balancement de l'IA pour la partie de traitement - nous avons juste besoin de suffisamment pour lancer l'expérience.

Rivescript est une API de chatbot simple qui est assez facile à apprendre et à suffoquer pour nos besoins. En quelques jours, nous avons eu la logique pour apporter une demande de projet auprès du bot et l'analyser avec suffisamment de logique commerciale pour la valider et la classer pour que cela puisse l'envoyer via des services de repos JSON à la file d'attente de tâches interne appropriée.

Pour faire fonctionner cette château de base, dirigez-vous vers la Rivecript repo , cloner et installer toutes les dépendances de nœud standard. Dans le représentant, vous pouvez également goûter aux interactions que vous pouvez ajouter avec les différents extraits d'extraits.

Ensuite, exécutez le dossier Web-Client, qui transforme le bot dans une page Web en exécutant un serveur GRUNT BASIC. À 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 bot. Ceci est spécifié dans les fichiers avec l'extension de .rive, et heureusement Rivecript est déjà livré avec des interactions de base hors de la boîte (par exemple, des questions telles que «Quel est votre nom?» Quel âge avez-vous? 'Quel est votre couleur préférée?').

Lorsque vous initiez l'application Web-Client à l'aide de la commande de nœud appropriée, le fichier HTML est chargé de charger ces éléments. .Rive des dossiers.

Ensuite, nous devons générer la partie de notre cerveau de Chatbot qui traitera des demandes de projet. Notre objectif principal est de convertir une sélection de questions d'apport de projet dans une conversation régulière.

Donc, par exemple:

Bonjour, comment pouvons-nous aider?
Super, combien de temps devons-nous commencer?
Pouvez-vous me donner une idée approximative de votre budget?
Dis-moi plus sur votre projet ...
Comment avez-vous entendu parler de nous?

[dix]

Un formulaire Web typique accessible ressemblerait à ceci:

 & lt; forme action = "" & gt;
& lt; champs et gt;
& lt; légende & gt; Type de requête: & lt; / légende & gt;
& lt; entrée id = "option-one" type = "radio" nom = "type de demande" valeur = "option-one" & gt;
& lt; étiquette pour = "option-one" & gt; option 1 & lt; / étiquette & gt; & lt; BR & GT;
& lt; entrée id = "option-deux" type = "radio" nom = "Type de requête" valeur = "option-deux" & gt;
& lt; étiquette pour = "option-deux" & gt; option 2 & lt; / étiquette & gt; & lt; BR & GT;
& lt; entrée id = "option-trois" type = "radio" nom = "Type de requête" valeur = "option-trois" & gt;
& lt; étiquette pour = "option-trois" & gt; option 3 & lt; / étiquette & gt; & lt; BR & GT;
& lt; / fianque & gt;
& lt; champs et gt;
& lt; légende & gt; chronologie: & lt; / légende & gt;
& lt; entrée ID = "Un mois" Type = "Radio" Nom = "TIMINE DE DEMANDE" VALEUR = "Un mois" & GT;
& lt; étiquette pour = "un mois" & gt; 1 mois et lt; / label & gt; & lt; BR & GT;
& lt; entrée ID = "Type de trois mois" Type = "Radio" Nom = "Demande- Timeline" Valeur = "Un-Trois-mois" & GT;
& lt; étiquette pour = "un mois" & gt; 1-3 mois et lt; / label & gt; & lt; BR & GT;
& lt; ID d'entrée = "Type de quatre mois" Type = "Radio" Nom = "Demande- Timeline" Value = "Quatre plus-mois-mois" & GT;
& lt; étiquette pour = "quatre mois-mois-mois" & gt; plus de 4 mois et lt; / label & gt; & lt; BR & GT; & lt; / fianque & gt;
& lt; BR & GT;
& lt; étiquette pour = "Demande-budget" & GT; Information sur le budget et LT; / Label & GT; & lt; BR & GT; & lt; texteaa ID = "Demande-budget" Nom = "Demande-Budget-Text" Row = "10" Cols = "30" & GT; & lt; / textarea & gt;
 & lt; BR & GT;
& lt; étiquette pour = "demande-description" & gt; description du projet & lt; / label & gt; & lt; BR & GT;
& lt; textarea id = "Demande-description" Nom = "Demande- Description-Text" Rows = "10" Cols = "30" & GT; & lt; / textarea & gt;
 & lt; BR & GT;
& lt; étiquette pour = "demande-référence" & gt; référence & lt; / label & gt; & lt; BR & GT; & lt; textarea id = "Demande-Référence" Nom = "Demande-Référence- Texte" Rows = "10" Cols = "30" & GT; & lt; / textarea & gt;
 & lt; BR & GT;
 & lt; saisie de type = "Soumettre" valeur = "Soumettre" & GT;
& lt; / forme & gt;

Avec des formulaires Web, nous sommes très familiers avec certains modèles: vous cliquez sur le bouton Soumettre, toutes les données de formulaire sont envoyées à une autre page dans laquelle la demande est traitée, puis une page de remerciement effrontée apparaît.

Avec Chatbots, nous sommes en mesure de prendre l'interaction de soumettre une demande et de le rendre plus significatif.

04. Concevoir une voix

Pour convertir ce formulaire en interface utilisateur conversationnelle servie dans le client Web Chatbot de Rivescript, nous devons convertir l'architecture d'informations de rigide en fluide; ou des étiquettes de champ dans des chaînes d'interface utilisateur.

Considérons quelques étiquettes de terrain accessibles et leur ton de questions connexes:

Demander: Comment pouvons nous aider? Pas certain? Cela vous dérange-t-il si je pose quelques questions?
Chronologie: Combien de temps devons-nous commencer?
Information du budget: 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: En outre, qui nous a référé à nous?

Ensuite, nous devons convertir le code du formulaire Web en écriture AI, à la suite de la recherche de Rivescript. logique de traitement Pour les conversations bidirectionnelles:

- Comment pouvons nous aider?

+ *
% comment pouvons nous aider
- & lt; zones définies = & lt; var & gt; & gt; Ça vous dérange si je pose quelques questions?

+ *
% sûr vous dérangerez-vous si je pose quelques questions - combien de temps dois-je commencer cette demande?

+ *
% Combien de temps dois-je commencer cette demande
- & lt; set quand = & lt; var & gt; et gt; pouvez-vous me donner une idée approximative de votre budget?

+ *
% pouvez-vous me donner une idée approximative de votre budget
- & lt; Set Budget = & lt; Var & GT; & GT; OK, pouvez-vous me dire un résumé du problème d'être résolu, des composants et des environnements concernés, ou une description globale?

+ *
% ok pouvez-vous me dire un résumé du problème d'être résolu des composants et des environnements affectés ou une description globale
- & lt; Set Project = & lt; var & gt; & gt; aussi, qui nous a référé à nous?

+ *
% aussi qui vous a référé à nous
- & lt; set référal = & lt; var & gt; & gt; super voilà ce que j'ai eu jusqu'à présent: \ N Services requis: & lt; obtenir des zones et gt; \ N Besoin de démarrer: & lt; obtenir quand & gt; \ n budget approximatif: & lt; obtenir budget & gt; \ n À propos de votre projet: & lt; obtenir projet et gt; \ n référées par: & lt; obtenez la référence & gt; \ n et je vais entrer en contact bientôt y a-t-il autre chose que je peux vous aider aujourd'hui? & lt; appel et gt; apport et lt; obtenir des zones et gt; & lt; obtenir quand & gt; & lt; obtenir budget & gt; & lt; obtenir projet et gt; & lt; obtenez référence & gt; & lt; / Call & GT;

05. Demande de demande

Contrairement aux variables de formulaire standard étant envoyée à une autre page ou service à traiter, Chatbots peut valider et soumettre des informations saisies par l'utilisateur dans une fenêtre de discussion (ou parlée) immédiatement, ce qui signifie que les utilisateurs peuvent également revirent facilement les valeurs entrées précédemment.

Nous devions envoyer la demande de l'utilisateur entré dans l'interface utilisateur Chatbot via l'API de repos JSON à un serveur de tâches de projet externe.

Dans Rivecript-js Nous sommes libres d'utiliser un XMLHTTPQUEST Objet à soumettre la demande presque simultanément, car les données sont entrées par l'utilisateur:

 & gt; Admission d'objet JavaScript
 var http = nouveau XMLHTTPQUEST ();

 var a = rs.getuservar (rs.currenttuser (), "zones");
 var b = rs.getuservar (rs.currenttuser (), "quand");
 var c = rs.getuservar (Rs.currentatuser (), "budget");
 var d = rs.getuservar (rs.currenttuser (), "projet");
 var e = rs.getuservar (Rs.currentatuser (), "référent");

 var URL = "http: // localhost: 3000 / envoyer";

 var params = "zones =" + a + "& amp; quand =" + b + "& amp; budget =" + C + "& amp; pro Ject =" + d + "& amp; référence =" + E;
 console.log (paramètres);

 http.open ("post", URL, vrai);

 http.setrequestheader ("type de contenu", "application / x- www-form-urlencoded");
 http.SetRequestheader ("Connexion", "Fermer");
 http.onreadystatechange = fonction () {// appelle une fonction lorsque l'état change.
  Si (http.readystate == 4 & amp; & amp; http.status == 200) {
    alerte (http.responseText);
  }
 }
 http.send (paramètres);

& lt; objet

06. Ne craignez pas le chatbot

Bientôt, les moyens actuels d'interaction avec des ordinateurs pour obtenir des informations donneront à une technologie basée sur l'AI comme des chatbots, où les gens simplifient des commandes vocales simples, comme nous l'avons vu avec des technologies telles que Amazon Echo et Google Home.

La communauté des conceptions Web n'a pas besoin de craindre - nous devrions tous adopter la valeur ajoutée de cette nouvelle technologie.

Il pourrait s'agir d'un changeur de jeu pour les entreprises qu'elle travaille, offrant un service client entièrement évolutif et une intelligence améliorée du client.

Cet article a été initialement présenté dans magazine net , Le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. S'abonner ici .

Articles Liés:

Comment chatbots apprennent - interview avec Giles Colborne
Comment le Web intelligent changera nos interactions
Comment les interfaces conversationnelles innovent

[dix] [dix]

[dix]

Comment construire une interface de chatbot

01. Définir une personnalité

02. Utilisez Rivescript

03. Générez le cerveau de votre bot

04. Concevoir une voix

05. Demande de demande

06. Ne craignez pas le chatbot

Comment - Most Popular Articles

Créer une scène avec Renderman pour Maya

Tackle Portrait Peinture avec des huiles

Changement de couleur Photoshop: 2 outils que vous devez savoir

Comment structurer les requêtes de média en SASS

Comment construire une application Web progressive

Commencez avec l'impression monotype

4 étapes faciles pour améliorer votre rendu

Comment sculpter un personnage dans VR

Catégories