Inhoud
- 01. Stel een persoonlijkheid in
- 02. Gebruik RiveScript
- 03. Genereer het brein van je bot
- 04. Ontwerp een stem
- 05. Verzoek indienen
- 06. Wees niet bang voor de chatbot
In het midden van de jaren 2000 kregen virtuele agenten en chatbots voor klantenservice veel bewondering, ook al waren ze niet erg communicatief, en onder de motorkap bestonden ze slechts uit gegevensuitwisseling met webservers.
Tegenwoordig, hoewel er een groot aantal voorbeelden van 'zwakke AI' bestaat (waaronder Siri, Alexa, webzoekmachines, geautomatiseerde vertalers en gezichtsherkenning) en andere onderwerpen zoals responsive webdesign staan in de schijnwerpers, zorgen chatbots nog steeds voor opschudding . Met grote investeringen van grote bedrijven blijven er volop kansen om de conversational interfaces van de toekomst te hacken.
- Hoe je een chatbot-ervaring ontwerpt
Soms krijgen ze een slechte reputatie, maar chatbots kunnen handig zijn. Ze hoeven geen vervanging te zijn voor een standaardwebformulier, waarbij de gebruiker invoervelden invult en wacht op validatie - ze kunnen een gesprekservaring bieden.
In wezen verbeteren we de gebruikerservaring om zich natuurlijker te voelen, zoals een gesprek met een expert of een vriend, in plaats van aanwijzen en klikken via de webbrowser of mobiele gebaren. Het doel is dat door empathische, contextuele reacties te geven, deze technologie direct in het leven van mensen wordt ingebed.
Bekijk de onderstaande video of lees verder om een praktische manier te ontdekken om een chatbot te ontwerpen en te bouwen, gebaseerd op een echte project-intake-applicatie in een service design praktijk.
01. Stel een persoonlijkheid in
Aangezien deze praktijk wereldwijd meer dan 110.000 leden bedient, was het doel om een snelle, gemakkelijke en natuurlijke interface te bieden waarmee interne belanghebbenden om effectieve digitale diensten konden verzoeken, in plaats van dat ze verwarrende formulieren moesten invullen.
De eerste stap was om de persoonlijkheid van de chatbot vast te stellen, aangezien dit de stem van het service-ontwerpteam naar zijn belanghebbenden zou vertegenwoordigen. We bouwden voort op het baanbrekende werk van Aarron Walter aan designpersonages. Dit heeft ons team enorm geholpen de persoonlijkheidskenmerken van de bot te ontwikkelen, die vervolgens de berichten voor begroetingen, fouten en gebruikersfeedback bepaalden.
Dit is een delicate fase, omdat het van invloed is op hoe de organisatie wordt gezien. Om ervoor te zorgen dat we zoveel mogelijk informatie hadden, hebben we onmiddellijk workshops voor belanghebbenden opgezet om de juiste persoonlijkheid, kleur, typografie, afbeeldingen en gebruikersstroom vast te stellen wanneer we met de bot bezig waren.
Nadat we alle benodigde goedkeuringen hadden gekregen - inclusief het zoeken naar juridisch advies - gingen we op zoek naar archaïsche verzoekformulieren om te zetten in een reeks heen en weer vragen die een gesprek nabootsten tussen de belanghebbenden en een vertegenwoordiger van ons designserviceteam.
02. Gebruik RiveScript
We wisten dat we niet te diep wilden ingaan op AI-opmaaktaal voor het verwerkingsgedeelte - we hadden net genoeg nodig om de ervaring een vliegende start te geven.
RiveScript is een eenvoudige chatbot-API die gemakkelijk te leren is en voldoende is voor onze behoeften. Binnen een paar dagen hadden we de logica om een projectverzoek van de bot in te nemen en het te analyseren met voldoende bedrijfslogica om het te valideren en te categoriseren, zodat het via JSON REST-services naar de juiste interne projecttaakwachtrij kon worden gestuurd.
Om deze eenvoudige chatbot te laten werken, gaat u naar de RiveScript-repo, kloont u deze en installeert u alle standaard knooppuntafhankelijkheden. In de repo kun je ook een voorproefje krijgen van de interacties die je kunt toevoegen met de verschillende voorbeeldfragmenten.
Voer vervolgens de webclient-map uit, die de bot in een webpagina verandert door een standaard Grunt-server uit te voeren. Op dit punt kunt u de ervaring verbeteren om aan uw behoeften te voldoen.
03. Genereer het brein van je bot
De volgende stap is om het ‘brein’ van onze bot te genereren. Dit wordt gespecificeerd in bestanden met de .RIVE extensie, en gelukkig komt RiveScript al met standaard interacties uit de doos (bijvoorbeeld vragen als 'Wat is je naam?', 'Hoe oud ben je?' En 'Wat is je favoriete kleur?').
Wanneer u de webclient-app start met de juiste Node-opdracht, wordt het HTML-bestand geïnstrueerd om deze te laden.RIVE bestanden.
Vervolgens moeten we het deel van het brein van onze chatbot genereren dat projectverzoeken kan afhandelen. Ons belangrijkste doel is om een selectie van projectopgaven met intakevragen om te zetten in een regulier gesprek.
Dus bijvoorbeeld:
- Hallo, hoe kunnen we helpen?
- Geweldig, hoe snel moeten we beginnen?
- Kunt u mij een globaal beeld geven van uw budget?
- Vertel me meer over je project ...
- hoe heb je over ons gehoord?
Een typisch toegankelijk webformulier zou er als volgt uitzien:
form action = ""> fieldset> legend> Request Type: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label voor = "optie- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> optie 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> optie 3 / label> br> / fieldset > fieldset> legend> Tijdlijn: / legend> input id = "één maand" type = "radio" name = "request-timeline" value = "één maand"> label voor = "één maand"> 1 maand / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 maanden / label> br> input id = "vier-plus-maanden" type = "radio" name = "aanvraag-tijdlijn" waarde = "vier-plus-maanden"> label voor = "vier-plus-maanden"> 4+ maanden / label> br> / fieldset> br> label for = "request-budget"> Budgetinformatie / label> br> textarea id = "request-budget" name = "request-budget-text" rijen = "10" cols = "30"> / textarea> br> label voor = "request-description"> Projectbeschrijving / label> br> textarea id = "request-description" name = "request- description-text" rijen = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" rijen = "10" cols = "30"> / textarea> br > input type = "submit" value = "Verzenden"> / formulier>
Bij webformulieren zijn we goed bekend met bepaalde patronen: u klikt op de knop Verzenden, alle formuliergegevens worden naar een andere pagina gestuurd waar het verzoek wordt verwerkt, en dan verschijnt hoogstwaarschijnlijk een brutale bedankpagina.
Met chatbots kunnen we de interactie van het indienen van een verzoek opvatten en deze zinvoller maken.
04. Ontwerp een stem
Om dit formulier om te zetten naar een conversatie-gebruikersinterface die wordt bediend in de chatbot-webclient van RiveScript, moeten we de informatiearchitectuur omzetten van rigide naar vloeiend; of veldlabels in UI-reeksen.
Laten we eens kijken naar enkele toegankelijke veldlabels en de bijbehorende vraagtoon:
- Verzoek: Hoe kunnen we helpen? Niet zeker? Vind je het erg als ik een paar vragen stel?
- Tijdlijn: Hoe snel moeten we beginnen?
- Budget informatie: Kunt u mij een globaal beeld geven van uw budget?
- Projectomschrijving: OK, kunt u mij een samenvatting geven van het probleem dat moet worden opgelost?
- Referentie: Wie heeft u ook naar ons verwezen?
Vervolgens moeten we de code van het webformulier omzetten in AI-script, volgens de zeer leerbare verwerkingslogica van RiveScript voor tweerichtingsgesprekken:
- Hoe kunnen we helpen? + *% hoe kunnen we helpen - set areas = var Zeker, vind je het erg als ik een paar vragen stel? + *% vind je het erg als ik een paar vragen stel - Hoe snel moet ik met dit verzoek beginnen? + *% hoe snel moet ik met dit verzoek beginnen - stel wanneer = var Kunt u mij een globaal idee geven van uw budget? + *% kun je me een globaal idee geven van je budget - set budget = varOK, kun je me een samenvatting geven van het op te lossen probleem, de betreffende componenten en omgevingen, of een algemene beschrijving? + *% ok kun je me een samenvatting geven van het probleem dat moet worden opgelost componenten en omgevingen die worden beïnvloed of een algemene beschrijving - set project = var Ook, wie heeft je naar ons verwezen? + *% ook wie u naar ons heeft verwezen - set referal = vargreat hier is wat ik tot nu toe heb gekregen: n Services nodig: haal gebieden op> n Moet beginnen: haal wanneer> n Ruw budget: haal budget op> n Over uw project: haal project> n Doorverwezen door: ontvang verwijzing> n en we nemen binnenkort contact met u op. Is er nog iets anders waarmee ik u vandaag kan helpen? bel> intake ontvang gebieden> ontvang wanneer> ontvang budget> haal project op> ontvang verwijzing> / bel>
05. Verzoek indienen
In tegenstelling tot standaardformuliervariabelen die naar een andere pagina of dienst worden gestuurd om te verwerken, kunnen chatbots informatie die door de gebruiker is ingevoerd in een chatvenster (of gesproken) onmiddellijk valideren en verzenden, wat betekent dat gebruikers ook eerder ingevoerde waarden gemakkelijk opnieuw kunnen bezoeken.
We moesten het verzoek van de gebruiker dat is ingevoerd in de chatbot-gebruikersinterface via de JSON REST API naar een externe server voor projecttaken verzenden.
In RiveScript-js zijn we vrij om gebruik te maken van een XMLHttpRequest bezwaar maken om het verzoek bijna gelijktijdig in te dienen, aangezien de gegevens worden ingevoerd door de gebruiker:
> objectopname javascript var http = nieuwe XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "gebieden"); var b = rs.getUservar (rs.currentUser (), "wanneer"); var c = rs.getUservar (rs.currentUser (), "budget"); var d = rs.getUservar (rs.currentUser (), "project"); var e = rs.getUservar (rs.currentUser (), "verwijzing"); 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, true); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Verbinding", "sluiten"); http.onreadystatechange = function () {// Roep een functie aan wanneer de status verandert. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); voorwerp
06. Wees niet bang voor de chatbot
Binnenkort zullen de huidige manieren van interactie met computers om informatie te verkrijgen, plaats maken voor AI-gebaseerde technologie zoals chatbots, waar mensen simpele spraakopdrachten maken, zoals we hebben gezien bij technologie zoals Amazon Echo en Google Home.
De webdesigngemeenschap hoeft niet bang te zijn - we zouden allemaal de toegevoegde waarde van deze nieuwe technologie moeten omarmen.
Het zou een game-changer kunnen zijn voor de bedrijven waarvoor het werkt, door een volledig schaalbare klantenservice en verbeterde klantinformatie te bieden.
Dit artikel kwam oorspronkelijk voor innet tijdschrift, 's werelds best verkochte tijdschrift voor webontwerpers en -ontwikkelaars. Schrijf je hier in.
