Conţinut
- 01. Setează o personalitate
- 02. Utilizați RiveScript
- 03. Generați creierul robotului dvs.
- 04. Proiectează o voce
- 05. Solicitarea depunerii
- 06. Nu vă temeți de chatbot
La mijlocul anilor 2000, agenții virtuali și chat-urile de servicii pentru clienți au primit o mulțime de adulații, chiar dacă nu erau foarte conversaționale, iar sub capotă erau doar compuse din schimburi de date cu servere web.
În zilele noastre, chiar dacă există un număr imens de exemple de „AI slabă” (inclusiv Siri, Alexa, motoare de căutare web, traducători automatizați și recunoaștere facială) și alte subiecte, cum ar fi designul web receptiv, sunt în centrul atenției, chatbot-urile încă provoacă agitație . Cu investiții majore din partea marilor companii, rămân o mulțime de oportunități de a pirata interfețele conversaționale ale viitorului.
- Cum să proiectezi o experiență de chatbot
Uneori au o reputație proastă, dar chatbots-urile pot fi utile. Nu trebuie să se simtă ca un înlocuitor de bază pentru un formular web standard, în care utilizatorul completează câmpurile de introducere și așteaptă validarea - pot oferi o experiență de conversație.
În esență, îmbunătățim experiența utilizatorului pentru a ne simți mai natural, cum ar fi conversația cu un expert sau cu un prieten, în loc de clicuri și gesturi mobile pe browser-ul web. Scopul este ca, oferind răspunsuri empatice și contextuale, această tehnologie să fie încorporată direct în viața oamenilor.
Urmăriți videoclipul de mai jos sau citiți mai departe pentru a descoperi o modalitate practică de a proiecta și construi un chatbot, bazat pe o aplicație reală de aport de proiecte într-o practică de proiectare a serviciilor.
01. Setează o personalitate
Întrucât această practică servește peste 110.000 de membri la nivel global, obiectivul a fost să ofere o interfață rapidă, convenabilă și naturală prin care părțile interesate interne să poată solicita servicii digitale eficiente, în loc să fie nevoie să completeze formulare confuze.
Primul pas a fost stabilirea personalității chatbot-ului, deoarece aceasta ar reprezenta vocea echipei de proiectare a serviciilor către părțile interesate. Ne-am bazat pe lucrarea fundamentală a lui Aarron Walter privind personalitatea de design. Acest lucru a ajutat foarte mult echipa noastră să dezvolte trăsăturile de personalitate ale robotului, care apoi au determinat mesajele pentru salutări, erori și feedback-ul utilizatorilor.
Aceasta este o etapă delicată, deoarece afectează modul în care este percepută organizația. Pentru a ne asigura că avem cât mai multe informații posibil, am înființat imediat ateliere ale părților interesate pentru a identifica personalitatea, culoarea, tipografia, imaginile și fluxul utilizatorului corespunzător atunci când interacționăm cu robotul.
După ce am obținut toate aprobările necesare - inclusiv căutarea unui consilier juridic - ne-am propus să convertim formularele de cerere arhaice într-o serie de întrebări înainte și înapoi care imitau o conversație între părțile interesate și un reprezentant al echipei noastre de servicii de proiectare.
02. Utilizați RiveScript
Știam că nu vrem să ne adâncim prea mult în limbajul de marcare AI pentru partea de procesare - aveam nevoie doar de suficient pentru a începe experiența.
RiveScript este un API chatbot simplu, suficient de ușor de învățat și suficient pentru nevoile noastre. În câteva zile am avut logica de a prelua o cerere de proiect de la bot și de a o analiza cu suficientă logică de afaceri pentru a o valida și a o clasifica, astfel încât să poată fi trimisă prin serviciile JSON REST la coada de sarcini de proiect internă adecvată.
Pentru a funcționa acest chatbot de bază, mergeți la repo-ul RiveScript, clonați-l și instalați toate dependențele standard ale nodului. În repo puteți obține, de asemenea, un gust al interacțiunilor pe care le puteți adăuga cu diferitele fragmente de exemplu.
Apoi, rulați folderul web-client, care transformă botul într-o pagină web rulând un server Grunt de bază. În acest moment puteți îmbunătăți experiența pentru a vă potrivi nevoilor.
03. Generați creierul robotului dvs.
Următorul pas este să generăm „creierul” robotului nostru. Acest lucru este specificat în fișiere cu extensia .RIVE și, din fericire, RiveScript vine deja cu interacțiuni de bază scoase din cutie (de exemplu, întrebări precum „Care este numele tău?”, „Câți ani ai?” Și „Care este culoarea preferată?').
Când inițiați aplicația web-client utilizând comanda Node corespunzătoare, fișierul HTML este instruit să le încarce.RIVE fișiere.
În continuare, trebuie să generăm partea din creierul chatbot-ului nostru care se va ocupa de cererile de proiect. Obiectivul nostru principal este de a converti o selecție de întrebări de introducere a sarcinilor de proiect într-o conversație regulată.
Deci, de exemplu:
- Bună, cum putem ajuta?
- Super, cât de curând trebuie să începem?
- Poți să-mi dai o idee despre bugetul tău?
- Spune-mi mai multe despre proiectul tău ...
- Cum ați auzit despre noi?
Un formular web tipic accesibil ar arăta astfel:
form action = ""> fieldset> legend> Type Request: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> etichetă pentru = "option- one "> opțiunea 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> etichetă pentru =" option-two "> opțiunea 2 / etichetă> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> etichetă pentru = "option-three"> opțiunea 3 / label> br> / fieldset > câmp> legendă> Cronologie: / legendă> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> etichetă pentru = "one-month"> 1 month / etichetă> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 luni / etichetă> br> input id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> label for = "four-plus-months"> 4+ luni / label> br> / fieldset> br> label for = "request-budget"> Informații despre buget / label> br> textarea id = "request-budget" name = "request-budget-text" lines = "10" cols = „30”> / textarea> br> label for = "request-description"> Descrierea proiectului / eticheta> 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"> / formular>
Cu formularele web, suntem foarte familiarizați cu anumite modele: faceți clic pe butonul Trimiteți, toate datele formularului sunt trimise către o altă pagină în care este procesată solicitarea și apoi cel mai probabil apare o pagină de mulțumire obraznică.
Cu chat-urile robotice, putem interacționa cu trimiterea unei cereri și o putem face mai semnificativă.
04. Proiectează o voce
Pentru a converti acest formular într-o interfață de utilizator conversațională servită în clientul web chatbot al RiveScript, trebuie să convertim arhitectura informațiilor din rigid în fluid; sau etichete de câmp în șiruri de UI.
Să luăm în considerare câteva etichete de câmp accesibile și tonul de întrebare aferent:
- Cerere: Cum putem ajuta? Nu sunt sigur? Vă deranjează dacă pun câteva întrebări?
- Cronologie: Cât de curând trebuie să începem?
- Informații despre buget: Poți să-mi dai o idee despre bugetul tău?
- Descrierea proiectului: OK, îmi puteți spune un rezumat al problemei de rezolvat?
- Referinţă: De asemenea, cine v-a trimis la noi?
În continuare, trebuie să convertim codul formularului web în script AI, urmând logica de procesare foarte ușor de învățat de la RiveScript pentru conversații bidirecționale:
- Cum putem ajuta? + *% cum putem ajuta - set areas = varSure, te deranjează dacă îți pun câteva întrebări? + *% sigur vă deranjează dacă pun câteva întrebări - Cât de curând trebuie să încep această solicitare? + *% cât de curând trebuie să încep această cerere - setați când = var Îmi puteți da o idee aproximativă despre bugetul dvs.? + *% îmi puteți da o idee aproximativă despre bugetul dvs. - set budget = varOK, îmi puteți spune un rezumat al problemei care trebuie rezolvată, componentele și mediile afectate sau o descriere generală? + *% ok îmi puteți spune un rezumat al problemei care trebuie rezolvată componentele și mediile afectate sau o descriere generală - set project = varAlso, cine v-a trimis la noi? + *%, de asemenea, cine v-a trimis la noi - setați referal = vargreat iată ce am primit până acum: n Servicii necesare: obțineți zone> n Trebuie să începeți: obțineți când> n Buget brut: obțineți buget> n Despre proiectul dvs.: obțineți proiectul> n Referit de: obțineți recomandare> n și vă vom contacta în scurt timp. Mai există ceva ce vă pot ajuta astăzi? apel> admisie obține zone> obține când> obține buget> obține proiect> obține recomandare> / apel>
05. Solicitarea depunerii
Spre deosebire de variabilele de formular standard care sunt trimise către o altă pagină sau serviciu pentru procesare, chat-urile pot valida și trimite informațiile introduse de utilizator într-o fereastră de chat (sau vorbită) imediat, ceea ce înseamnă că utilizatorii pot revizita cu ușurință valorile introduse anterior.
Trebuia să trimitem cererea utilizatorului introdusă în interfața de utilizare chatbot prin intermediul API-ului JSON REST către un server de sarcini de proiect extern.
În RiveScript-js suntem liberi să folosim un XMLHttpRequest obiectați să trimiteți cererea aproape simultan, deoarece datele sunt introduse de utilizator:
> obiect de intrare javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "areas"); var b = rs.getUservar (rs.currentUser (), "când"); var c = rs.getUservar (rs.currentUser (), "buget"); var d = rs.getUservar (rs.currentUser (), "project"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (params); http.open („POST”, url, adevărat); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader („Conexiune”, „închidere”); http.onreadystatechange = function () {// Apelați o funcție când starea se schimbă. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); obiect
06. Nu vă temeți de chatbot
În curând, modalitățile actuale de interacțiune cu computerele pentru a obține informații vor ceda tehnologiei bazate pe AI, cum ar fi chatbot-urile, unde oamenii fac doar comenzi vocale simple, așa cum am văzut cu tehnologii precum Amazon Echo și Google Home.
Comunitatea de design web nu trebuie să se teamă - ar trebui să adoptăm cu toții valoarea adăugată a acestei noi tehnologii.
Ar putea fi un schimbător de jocuri pentru companiile pentru care lucrează, oferind un serviciu complet scalabil pentru clienți și o informație îmbunătățită a clienților.
Acest articol a fost prezentat inițial înrevista net, cea mai bine vândută revistă din lume pentru designeri și dezvoltatori de web. Abonați-vă aici.
