Cum de a construi o interfață chatbot

Jan 29, 2026

să

La mijlocul anilor 2000, agenții virtuali și serviciul de relații cu clienții au primit o mulțime de adulare, chiar dacă nu erau foarte conversați, iar sub capotă au fost compuse doar din schimburi de date cu servere web.

În zilele noastre, chiar dacă există un număr mare de exemple de "AI slabe" (inclusiv Siri, Alexa, motoarele de căutare web, traducătorii automatizați și recunoașterea facială) și alte subiecte cum ar fi Designul web receptiv Împingă lumina reflectoarelor, chatboturile cauzează încă o agitație. Cu investiții majore de la companiile mari, există o mulțime de oportunități de a hack în interfețele de conversație ale viitorului.

Cum de a proiecta o experiență chatbot

Uneori au o reputație proastă, dar chatboturile pot fi utile. Ei nu trebuie să se simtă ca un înlocuitor de bază pentru un formular web standard, unde utilizatorul umple câmpurile de introducere și așteaptă validarea - pot oferi o experiență de conversație.

În esență, ne îmbunătățim experiența utilizatorului Să se simtă mai natural, cum ar fi conversat cu un expert sau un prieten, în loc de punct și clicuri de browser web sau gesturi mobile. Scopul este că, prin furnizarea de răspunsuri exagerate, contextuale, această tehnologie va deveni încorporată direct în viața oamenilor.

Urmăriți videoclipul de mai jos sau citiți pentru a descoperi o modalitate practică de a proiecta și construi un chatbot, pe baza unei aplicații reale de admisie a proiectului într-o practică de proiectare a serviciilor.

01. Setați o personalitate

It’s important to ensure the chatbot’s personality reflects the company it’s representing — Este important să se asigure că personalitatea Chatbot reflectă compania pe care o reprezintă

Deoarece această practică servește peste 110.000 de membri la nivel global, scopul a fost acela de a oferi o interfață rapidă, convenabilă și naturală prin care părțile interesate interne ar putea solicita servicii digitale eficiente, în loc să trebuiască să completeze formulare confuze.

Primul pas a fost acela de a stabili personalitatea lui Chatbot, deoarece aceasta ar reprezenta vocea echipei de proiectare a serviciilor către părțile interesate. Am construit lucrul la seminalul lui Aarron Walter Proiectare Personas . Acest lucru a ajutat foarte mult echipa noastră să dezvolte trăsăturile de personalitate ale botului, care au determinat apoi mesajele pentru salutări, erori și feedback-ul utilizatorului.

Aceasta este o etapă delicată, deoarece afectează modul în care organizația este percepută. Pentru a vă asigura că am avut cât mai multe informații posibil, am înființat imediat ateliere de ateliere pentru a introduce personalitatea, culoarea, tipografia, imaginile și fluxul utilizatorului atunci când se angajează cu botul.

După ce am câștigat toate aprobările necesare - inclusiv solicitarea unui avocat juridic - am stabilit să convertesc formularele de solicitare arhaică într-o serie de întrebări back-și -ut care au imit o conversație între părțile interesate și un reprezentant al echipei noastre de servicii de proiectare.

02. Folosiți Resscript

This simple scripting language provides everything you need to design and build a chatbot POC — Această limbă simplă de scripting oferă tot ce aveți nevoie pentru a proiecta și a construi un POC chatbot

Știam că nu am vrut să ajungem prea adânc în limba AI Markup pentru partea de procesare - am avut nevoie de suficient pentru a începe să începem experiența.

Rivescript este un api simplu chat, care este suficient de ușor pentru a învăța și a fi suficient pentru nevoile noastre. În câteva zile am avut logica în jos pentru a admis o cerere de proiect de la bot și parsează-o cu suficientă logică de afaceri pentru a valida și clasifica acest lucru, astfel încât să fie trimis-o prin intermediul serviciilor de odihnă JSON la coada de tasking internă corespunzătoare.

Pentru a obține acest lucru de bază de lucru, mergeți la Rivesscript repo. , clonează-o și instalați toate dependențele standard de noduri. În repo puteți obține și un gust al interacțiunilor pe care le puteți adăuga cu diferitele fragmente de exemplu.

Apoi, executați dosarul Web-Client, care transformă botul într-o pagină Web prin rularea unui server Grunt de bază. În acest moment puteți îmbunătăți experiența pentru a vă satisface nevoile.

03. Generați creierul botului dvs.

Următorul pas este de a genera "creierul" botului nostru. Acest lucru este specificat în fișierele cu extensia .rânge și, din fericire, Rivesscript vine deja cu interacțiuni de bază din cutie (de exemplu, întrebări precum "Care este numele dvs.?", "Câți ani sunteți?" Și "Care este dvs. culoarea preferată?').

Când inițiați aplicația Web-client utilizând comanda nodului adecvat, fișierul HTML este instruit să se încarce aceste .. Fișiere.

Apoi, trebuie să generăm partea din creierul chatbot-ului nostru care se va ocupa de cererile de proiect. Scopul nostru principal este de a converti o selecție de întrebări de admisie a proiectului într-o conversație regulată.

Deci, de exemplu:

Bună ziua, cum putem ajuta?
Mare, cât de curând trebuie să începem?
Îmi puteți da o idee brută a bugetului dvs.?
Spune-mi mai multe despre proiectul tău ...
Cum ați auzit despre noi?

O formă de web accesibilă tipică ar arăta astfel:

 & formular action = "" & gt;
& lt; Fieldset & GT;
& LT; LEGEND & GT; Solicitare tip:

Cu formulare web, suntem foarte familiarizați cu anumite modele: faceți clic pe butonul Trimiteți, toate datele formularului sunt trimise la o altă pagină în care solicitarea este procesată și apoi cel mai probabil o pagină vă mulțumesc.

Cu Chatbots, suntem capabili să luăm interacțiunea de a depune o cerere și de ao face mai semnificativ.

04. Proiectați o voce

Pentru a converti acest formular la o interfață de utilizator conversațională a servit în clientul Web Chatbot al lui Rivesscript, trebuie să convertim arhitectura informațiilor de la rigid la fluid; sau etichete de câmp în corzile UI.

Să luăm în considerare unele etichete de câmp accesibil și tonul lor de întrebare conex:

Cerere: Cum putem ajuta? Nu sunt sigur? Te superi dacă pun câteva întrebări?
Cronologie: Cât de curând trebuie să începem?
Informații despre buget: Îmi puteți da o idee brută a bugetului dvs.?
Descrierea proiectului: OK, poți să-mi spui un rezumat al problemei de rezolvat?
Referinţă: De asemenea, cine v-a trimis la noi?

Apoi, trebuie să convertim codul formularului web în scriptul AI, urmând foarte învățabilul lui Rivesscript Conectarea logicii Pentru conversații bidirecționale:

- Cum putem ajuta?

+ *
% Cum putem ajuta
- Set Sets = & Lt; Var & Gt; Sigur, te superi dacă pun câteva întrebări?

+ *
Sigur că vă deranjează dacă întreb câteva întrebări - cât de curând trebuie să încep această solicitare?

+ *
% Cât de curând trebuie să încep această solicitare
- Set atunci când = & lt; var & gt; Poți să-mi dai o idee brută a bugetului tău?

+ *
% Îmi puteți da ideea brută a bugetului dvs.
- Set Buget = & Lt; Var & Gt; Ok, puteți să-mi spuneți un rezumat al problemei care trebuie rezolvate, componente și medii afectate sau o descriere generală?

+ *
% OK Puteți să-mi spuneți un rezumat al problemei care trebuie rezolvate componente și medii afectate sau o descriere generală
- Set Project = & Lt; Var & GT; de asemenea, cine ți-a trimis la noi?

+ *
%, de asemenea, cine te-a trimis la noi
- Set Refral = & gt; și gt; mare aici este ceea ce am primit până acum: \ n Servicii necesare: & Lt; Get zone & gt; \ n trebuie să înceapă: și să ajungi când & gt; \ n buget dur:

05. Solicitarea depunerii

Spre deosebire de variabilele de formă standard fiind trimise la o altă pagină sau serviciu de procesare, Chatbots poate valida și trimite informații introduse de utilizator într-o fereastră de chat (sau vorbită) imediat, ceea ce înseamnă că utilizatorii pot, de asemenea, să revizuiască cu ușurință valorile introduse anterior.

Avem nevoie pentru a trimite cererea utilizatorului introdusă în UI-ul Chatbot prin intermediul API-ului JSON REST la un server extern de tasking.

În Rivescript-js. Suntem liberi să folosim o utilizare Xmlhttprequest. Obiect Pentru a trimite cererea aproape simultan, deoarece datele sunt introduse de utilizator:

 & GT; Obiect de admisie JavaScript
 var http = nou xmlhttprequest ();

 var a = rs.getuservar (Rs.currentuser (), "zone");
 var b = rs.getuservar (Rs.currentuser (), "când");
 var c = rs.getuservar (Rs.currentuser (), "buget");
 var d = rs.getuservar (Rs.currentuser (), "proiect");
 var e = rs.getuservar (Rs.currentuser (), "Refral");

 var url = "http: // localhost: 3000 / Trimite";

 VAR PARAMS = "Zonele =" + A + "& AMP; CÂND =" + C + "& AMP; BUGET =" + C + "& AMP; PROJIC =" + D + "& REFRAL =" + E;
 consola.log (paramii);

 http.open ("post", adresa URL, adevărată);

 http.setrequestHeader ("tip de conținut", "Aplicație / X- WWW-FORM-URLENCODED");
 http.setrequestHeader ("conexiune", "închide");
 http.onreadyStateSchimbă = Funcție () {// Apelați o funcție atunci când starea se schimbă.
  dacă (http.readyState == 4 & Amp; & http.status == 200) {
    alertă (http.responsetext);
  }
 }
 http.send (params);

& lt; obiect

06. Nu te teme de chatbot

Curând, modalitățile actuale de interacțiune cu computerele pentru a obține informații vor oferi tehnologia bazată pe AI, cum ar fi chatbots, unde oamenii fac doar comenzi vocale simple, cum ar fi am văzut cu Tech, cum ar fi Amazon Echo și Google Home.

Comunitatea de web design nu are nevoie de frică - ar trebui să depășim cu toții valoarea adăugată a acestei noi tehnologii.

Ar putea fi un schimbător de jocuri pentru companiile pe care le lucrează, oferind servicii pentru clienți complet scalabile și îmbunătățirea inteligenței clienților.

Acest articol a fost inițial prezentat în revista netă , Cea mai bună revistă din lume pentru designeri și dezvoltatori web. Abonați-vă aici .

Articole similare:

Cum de învățare Chatbots - Interviu cu Giles Colborne
Cum Webul inteligent ne va schimba interacțiunile
Cum interfețele de conversație sunt inovatoare bancare

Cum de a construi o interfață chatbot

01. Setați o personalitate

02. Folosiți Resscript

03. Generați creierul botului dvs.

04. Proiectați o voce

05. Solicitarea depunerii

06. Nu te teme de chatbot

să - Cele mai populare articole

Cum se face un colaj foto în Photoshop CC

Tehnici ușoare de postare pentru modelele 3D

Designer de afinitate: Cum să utilizați instrumentul Pen

Ia-ți capul în jurul valorii de reacția cu acești cinci factori

Cum se construiesc layout-uri complexe utilizând CSS

Cum să lucrați cu video HTML

Cum de a construi lumi pentru cinema

Puterea incredibilă a Flexbox

Categorii