Conversational UI Principles - Volledig proces van het ontwerpen van een website-chatbot

In dit artikel laat ik je een case study zien die een volledig proces beschrijft van het ontwerpen van een conversatie-UI voor een B2B-website, inclusief fragmenten van het conversatiescript, basisprincipes van de communicatietheorie en enkele tips en trucs die ik denk dat dit project tot een beetje uniek.

Opening

Het is eind 2016. Veel mensen zeggen dat een gebruikersinterface voor gesprekken de toekomst is van de webinterface. IM-apps, chatbots, tekstgebaseerde UI's of emoji's zijn waarschijnlijk nog nooit zo populair geweest. Sommigen zullen misschien zeggen dat het gewoon een andere modeverschijnsel is of dat op tekst gebaseerde interfaces niets nieuws zijn, maar eerlijk gezegd - laten we toegeven - met de komst van iPhone-berichten, Slack of Facebook Messenger veranderde de manier waarop we informatie uitwisselen onomkeerbaar. Tekstberichten zijn tegenwoordig een zeer natuurlijke manier van communiceren geworden.

Dus natuurlijk, toen de kans zich voorde om The Rectangles te laten werken aan een conversatiewebsite voor een van onze klanten, aarzelden we geen seconde.

Kom op - laat me een team zien dat nu niet aan zo'n project zou willen werken.

Projectdoelen

Cliënt:

  • Chop-Chop - een bedrijf voor webontwikkeling

Onze hoofdtaken in dit project:

  • ontwerp een complete set conversatie UI-middelen
  • maak een conversatiescript
  • omgaan met de meest voorkomende soorten conversational randomness (wat betekent f * cks en dfdffjhfdjhfkfs)
  • het karakter van het merk overbrengen (ook door de merkheld van het bedrijf, Cody te gebruiken)
  • nieuwsgierigheid en sympathie van de gebruiker (gesprekspartner) wekken
  • de vaardigheden voor webontwikkeling van het bedrijf weergeven

Ik zal je laten zien hoe we het stap voor stap hebben gedaan, maar eerst ...

Een beetje theorie

Laten we beginnen met de basis. Ik denk dat het soms belangrijk is om even een stapje terug te doen voordat je in meer complexe zaken duikt. In dit geval heeft het ons echt geholpen. Geloof het of niet, maar het lezen van al die fundamentele definities opende onze ogen voor een paar creatieve oplossingen en stimuleerde het hele ideatieproces.

En ik denk dat je dit deel ook niet moet overslaan.

De principes van communicatie

Er zijn honderden definities die communicatie verklaren. De onderstaande is mijn hybride versie van een paar die ik heb gevonden.

Communicatie is een proces van het delen van zinvolle berichten

De berichten (communicatie in het algemeen) kunnen verbaal of non-verbaal zijn.

De meest voorkomende tool voor verbale communicatie is taal, een set symbolen die wordt gebruikt om informatie uit te wisselen in de vorm van woorden die kunnen worden omgezet in betekenissen.

Voorbeelden: Hallo; Dank je; Je ziet er goed uit vandaag

Non-verbaal verwijst daarentegen naar elk type communicatie dat anders is dan woorden. Het kunnen gebaren, gezichtsuitdrukkingen, tone of voice zijn, maar ook acties of symbolen die een gemeenschappelijke sociale betekenis hebben.

Voorbeelden: , ,

Communicatie is een proces waarbij alle aspecten op elkaar van invloed zijn. Het betekent dat communicatie holistisch is en dat het hele proces een systeem creëert waarin alle elementen (alle berichten) samenwerken voor het algemeen belang.

Deze berichten zijn functioneel, wat betekent dat we ze gebruiken om gewenste effecten te verkrijgen, maar ook adaptief - wat betekent dat, afhankelijk van de situatie, ze kunnen worden aangepast en aangepast om betere resultaten te bereiken.

Ten slotte is de taal die we gebruiken om te communiceren gebaseerd op communicatiecode, een verzameling principes en betekenissen. Ze vormen de basis voor interpretatie. Deze communicatiecodes worden ook wel regels genoemd; er zijn twee soorten:

  1. Constituerende regels: verwijzen naar de betekenis en de betekenis van bepaalde woorden, en hoe we ze moeten interpreteren. Ze vertellen ons ook hoe we een bericht in een bepaalde context kunnen begrijpen.
  2. Normatieve regels: helpen om een ​​juiste reactie te bepalen op basis van een gegeven interpretatie van berichten. Met andere woorden, ze vertellen ons wat we wel en niet moeten doen (zeggen) in een bepaalde situatie.

En natuurlijk is een van de meest natuurlijke en gebruikelijke manieren om te communiceren een gesprek. Dus bij het bespreken van conversatie-UI's, denk ik dat we ook een voorbeeld van een gespreksdefinitie moeten bekijken:

Gesprek is een gesprek tussen twee of meer mensen, meestal een informeel gesprek

Is het dus mogelijk om, zonder krachtig AI-mastermind, een interface te creëren die voldoet aan de communicatieprincipes?

Dit is wat een conversational UI (CUI) -definitie eruit kan zien:

Een interface gebaseerd op een holistisch systeem van functionele, adaptieve en zinvolle berichtenuitwisseling, waarbij beide partijen van het gesprek de taalcodes gebruiken en interpreteren, waarbij de constitutieve en normatieve regels op een vriendelijke, informele manier worden gehandhaafd en nageleefd

En we wilden zo'n gebruikersinterface maken.

Theorie in de praktijk - conversatie UI opbouwen

Doelen definiëren

Chatbots in B2B hebben hun functie. Mensen bezoeken dergelijke websites om een ​​bepaalde reden, omdat ze iets willen. Het is alsof je naar een restaurant gaat of een fysieke winkel binnengaat. Natuurlijk doen mensen het soms omdat ze niets beters te doen hebben of gewoon zichzelf willen amuseren, maar over het algemeen zit er een doel achter; eten bestellen, schoenen kopen of prijzen leren kennen. Aan de andere kant moeten een ober of een winkelmedewerker ook zijn taken en scripts volgen om met een klant te praten. Een conversatiewebsite kan op precies dezelfde manier werken en de rol van een chatbot kan vergelijkbaar zijn met een winkelassistent of een ober.

In dit geval wisten we precies wat we wilden bereiken, omdat we al jaren met Chop-Chop werken (eigenlijk heb ik het in 2010 mede opgericht), maar als je hulp nodig hebt bij het definiëren van de doelen van de chatbot / gebruiker, kun je gebruiken User Centered Design Canvas.

We hebben de volgende doelen opgegeven voor onze chatbot:

  • uiten Chop-Chop merkkarakter
  • gebruik de website op zichzelf om Chop-Chop webontwikkelingsvaardigheden te tonen
  • de gebruiker informatie verstrekken over Chop-Chop-services
  • gebruiker aanmoedigen om een ​​bladwijzer voor de site te maken
  • iets leren over de gebruiker (naam, beroep, e-mail, telefoon)
  • hulp bij contact (CUI als alternatief voor een contactformulier)
  • gebruikers aanmoedigen zich aan te melden voor de nieuwsbrief

Deel 1. Ontwerpen van de verbale communicatie

Het gespreksscript bouwen

UX-ontwerpers moeten kunnen anticiperen. In dit project wisten we dat dit de enige manier voor ons is om een ​​holistisch communicatiesysteem te bouwen zonder AI-ondersteuning. We hadden een geweldig conversatiescript nodig met een adaptieve syntaxis die het gesprek ook aangenaam en zinvol zou maken voor gebruikers.

1. Het gesprekskader

Met behulp van een whiteboard zijn we begonnen met een eenvoudige mindmap. Met de chatbotdoelen in gedachten, hebben we alle mogelijke onderwerpen en gespreksonderdelen genoteerd. We wilden snel controleren hoe complex het uiteindelijke script zou kunnen zijn.

Vroege stadia van het schrijven van conversatiescript

Vervolgens hebben we de onderdelen in functionele groepen verdeeld en gerangschikt (we hebben ze blokken genoemd). We begonnen al enkele patronen te zien. Sommige groepen waren doelen gerelateerd (we noemden ze kernen), anderen waren verantwoordelijk voor het minder officieel maken van het gesprek (chatters), weer een andere groep bood de gebruiker opties of aanvullende informatie (extra's), en er waren ook reacties op de gebruiker antwoorden. Ten slotte kunnen skips het gesprek snel naar een ander scriptblok doorsturen.

De definitieve lijst met scriptblokken:

  • Opening
  • Extra (s)
  • Skip (s)
  • Kern (en)
  • Chatter (s)
  • Einde
Voorbeeld van een eenvoudige tijdlijn voor een gespreksframe

Natuurlijk is de uiteindelijke scriptconstructie veel knotter dan een lineair kader. Alle afhankelijkheden en eindeloze combinaties op basis van de holistische aard van het gesprek maken het geheel uiterst complex.

2. Het script

Dit was het moment waarop we allemaal zaten te wachten sinds de eerste minuut van het project: we konden eindelijk aan de slag om het eigenlijke gespreksscript te schrijven. Dit deel was leuk, maar het vereiste ook maximale focus. Het was veel eenvoudiger met het script in blokken verdeeld, omdat alle gespreksonderdelen afzonderlijk konden worden geschreven.

Het mooie is - het enige hulpmiddel dat u nodig hebt om CUI-scripts te schrijven is pen en papier of een teksteditor.

Hieronder staan ​​enkele voorbeelden van scriptblokken.

Opening:

Hallo daar
Ik ben Cody en ik zou graag met je chatten
    Hallo, Cody
Hoe gaat het met je vandaag?
    Nou ... Zou beter kunnen
Slechte dag, he? Dat gebeurt…

Extra:

Ik hoop dat je het niet erg vindt dat ik cookies gebruik
    Wat zijn deze?
Mijn ontbijt!
Haha, arme grap
Cookies zijn gegevens over u opgeslagen door een browser
    Klinkt eng maar hm ... OK
Super goed!

Overspringen:

Hallo daar!
Je komt me bekend voor
Kennen wij elkaar?
    Ja we hebben
Ha! Ik heb een goed geheugen!
De vorige keer hebben we het gehad over de ontwikkeling van Magento
Wilt u ons gesprek voortzetten?
    Laten we doorgaan

Kern:

    Vertel me over jou
Graag gedaan! :-)
Wil je weten waar ik vandaan kom?
Hoor je mijn verhaal?
Of misschien leren wat ik doe voor de kost?
    Waar kom je vandaan?
Welnu, het idee van mij kwam van UX-ontwerpstudio The Rectangles
Maar het was de Poolse ontwerper Jan Kallwejt die me kleedde en mijn haar deed

Chatter:

Zie je dat aandeel in de bovenhoek?
    Wat is ermee?
Als je onze chat leuk vond, stel me dan aan je vrienden voor! :-)
Ik zal ook graag met ze praten.
    Misschien later

Einde:

ik moet zo gaan
Wil je wat trucjes eerder zien?
    Laat het mij eens zien!
Druk op Cmd + D
Haha!
Heb je een bladwijzer voor me gemaakt?
    Nog niet
Doe het dan! :-)
Ok, het is tijd voor mij om te gaan
Laten we contact houden
    Tot ziens, Cody!

3. De syntaxis

Met een goed script kunt u verschillende scenario's van het gesprek maken. Het is gemakkelijker als het gesprek in het Engels is, omdat de syntaxis van het Engels relatief eenvoudig is. In veel talen moet u echter meerdere opties voor een bericht (zin) kunnen maken door het ene woord te vervangen door het andere. Ook moet een scriptontwerper de plaatsen voor de antwoorden, opties, enz. Van de gebruiker kunnen specificeren.

Om een ​​dergelijke scriptnotatie te maken, hebt u een aantal symbolen nodig: haakjes, haakjes, accolades en alles wat u en uw team kunnen lezen en begrijpen. Dit is ook erg belangrijk voor de ontwikkelaars die het script gaan implementeren. Ze moeten het ook kunnen begrijpen.

{(Goedemorgen) | Hallo | Hallo}, vriend, {ik ben | mijn naam is} Cody!

In sommige gevallen kan chatbot willekeurig een woord uit een specifieke set kiezen (Hallo; Hallo, Hey; Yo), maar in plaats daarvan kan het ook een beetje slimmer zijn en sommige berichten weergeven volgens, laten we zeggen, de gebruikerstijd van de dag (goed ochtend; Goedenavond).

Hier is een voorbeeldset van symbolen en hun functies:

  • {} accolades: definieer een set opties
  • | pijpen: scheidt de opties in een set
  • () haakjes: geef de voorwaarde-gerelateerde opties in een set op
  • [] haakjes: geef gebruikersinvoer aan
Voorbeeld van syntaxisnotatie

Laat het ons weten als u meer wilt weten over het schrijven van het script.

4. Chatbot-berichten

De visuele weergave van het gesprek was een van de belangrijkste UX-uitdagingen van dit project. Hieronder staan ​​enkele hoogtepunten.

Enkele verklaringen versus volledige paragrafen

Mensen spreken niet in paragrafen. We spreken met enkele zinnen. Natuurlijk kunnen deze soms eindeloze uitingen vormen, maar in een gesprek wisselen mensen elkaar vaak af. We denken ook dat het weergeven van lange alinea's tekst, die de gebruiker moet lezen voordat hij antwoordt, kan worden vergeleken met praten met een persoon die vreselijk snel spreekt. Dus in plaats van alinea's hebben we besloten combinaties van enkele (korte) zinnen weer te geven.

Het combineren van afzonderlijke instructies in blokken

Door de hoekradius van de bubbels te manipuleren, is het mogelijk om logische tekstblokken van afzonderlijke berichten te maken. Op die manier kunnen we nog steeds in zinnen praten en niet in alinea's, maar de gebruiker een zachte hint geven - hé, dit deel van het gesprek begint hier en eindigt daar.

Afgeronde hoeken helpen bij het combineren van afzonderlijke instructies in tekstblokken

Vervagen versus scrollen

De meest voorkomende methode voor het weergeven van de gespreksstroom is om constant nieuwe berichten onder de oude toe te voegen en de gebruiker te laten scrollen.

Als een experimenteel alternatief kunnen de oude berichten vervagen en is scrollen niet langer nodig. Ik weet dat het bruikbare aspect van een dergelijke oplossing twijfelachtig is, maar bekijk het vanuit een ander perspectief - een dergelijke oplossing weerspiegelt de aard van een echt gesprek. Als je met iemand praat, heb je ook niet altijd toegang tot de uitgewisselde informatie.

Transparantie gebruiken om eerdere berichten te markeren

Bovendien kun je op een gegeven moment gewoon skips gebruiken om de gebruiker te vragen of hij naar een van de vorige delen van het gesprek wil terugkeren, of als alternatief een permanente knop 'Overslaan naar' weergeven die bij een botsing de vraag van de bot over het terugkeren naar van de voorbije passages.

5. Gebruikersberichten (antwoorden)

Voor een gebruikersinterface die geen AI gebruikt om de antwoorden van de gebruiker te interpreteren, is dit het meest uitdagende deel van het schrijven van een script. Het script moet gebruikers (laten we ze hier als gesprekspartners noemen) de chatbot voorzien van logische antwoorden (onthoud, constitutieve en normatieve regels), maar hoe natuurlijker en opener het gesprek, des te leuker het is voor de gesprekspartner.

We hebben twee soorten antwoorden gebruikt:

A. gedefinieerd (gecontroleerd, dichtbij)

  • ze zijn relatief gemakkelijk te hanteren
  • ze vereisen goede anticipatievaardigheden
  • gebruikers mogen niet spreken wat ze willen
Voorbeeld gedefinieerd antwoord

B. niet gedefinieerd (niet gecontroleerd, open einde)

  • ze zijn moeilijker te hanteren
  • ze kunnen vereisen dat sommige vooraf gedefinieerde woorddatabases worden ontleed
  • gebruikers mogen natuurlijker communiceren
Voorbeeld van niet-gedefinieerd antwoord

Er is waarschijnlijk geen universele manier om met open antwoorden om te gaan. We kunnen er niet van uitgaan dat mensen de communicatiecode zullen volgen. Sommige niet-gedefinieerde berichten zullen (met name) de normatieve regels overtreden. Natuurlijk zullen sommige gebruikers spreken (schrijven) zoals ze zouden spreken (schrijven) met een mens, maar natuurlijk - anderen zullen proberen je bot uit te dagen door sexts, vloeken of wartaal te sturen.

Hier volgen enkele tips voor het beheren van niet-gedefinieerde berichten:

  • ingangen kunnen alleen worden beperkt tot een bepaald aantal tekens (bijv. als om een ​​naam wordt gevraagd, alleen letters toegestaan)
  • reguliere expressies (regexp) kunnen worden gebruikt voor sommige invoer (bijv. e-mail)
  • gebruik matrices van de meest populaire scheldwoorden
  • (Ik zou hier voorzichtig mee zijn, maar) gebruik een woordenboek met API om te controleren of de antwoorden die u verwacht woorden echt woorden zijn

Natuurlijk zou een ideaal gesprek onbelemmerd moeten zijn, maar in het geval van een conversatie-UI zonder AI-ondersteuning is een beetje controle onvermijdelijk.

Nog een ding:

Wanneer u gedefinieerde vragen gebruikt, kunt u de ervaring van het beantwoorden iets beter maken met een kleine verbetering. In plaats van de vraag als volgt te stellen:

Sluitvraag zonder opties

vraag als volgt:

Sluitvraag met opties

Dit is pure psychologie - in het eerste voorbeeld is het (mogelijk) oneindige scala aan opties die de gebruiker kan hebben beperkt, terwijl u in het tweede dit bereik opgeeft en uw gebruiker een keuze geeft. Het resultaat is hetzelfde in beide scenario's, maar in het laatste geval is de UX beter.

6. Tussenwerpsels, fillers, niet-lexicale gespreksgeluiden

Mensen mompelen, maken fouten, aarzelen of verliezen de draad tijdens het spreken. Dit is normaal. We wilden dat het gesprek met onze chatbot ook zo natuurlijk zou zijn. Dus we hebben ze ook gebruikt.

Hier zijn enkele van de populaire niet-lexicale klanken: ja, oke, uh, oh, aum, mmm, uhh, uh-huh, uu, weet je, ermmm

Voorbeeldgebruik van niet-lexicale geluiden

Deel 2. Het ontwerpen van de non-verbale communicatie

1. Berichtenregeling

De manier waarop de avatars van bot en gebruiker en hun berichten worden gerangschikt, zou ook niet incidenteel moeten zijn. Er zijn twee meest voorkomende manieren om het gesprek weer te geven:

A. avatars + berichten worden onder elkaar uitgelijnd (in de meeste gevallen links)

Uitgelijnde berichtindeling

B. avatars + berichten van beide gebruikers staan ​​tegenover elkaar

Tegengestelde berichtindeling

Wij denken dat optie B de aard van een echt gesprek beter weerspiegelt. Meestal kijken twee mensen naar elkaar als ze praten. Om de conversatie-gebruikersinterface natuurlijker te laten voelen, moeten de avatars van de gesprekspartners en hun berichten ook op die manier worden weergegeven.

2. Het uiterlijk van Chatbot

We hadden geluk, omdat Chop-Chop een merkheld had. Wat meer is, Cody is absoluut perfect voor conversatie UI-doeleinden, omdat hij een grote bibliotheek met vooraf ontworpen optredens heeft die we kunnen gebruiken. Ik denk dat bedrijven binnenkort conversie UI-conversiepercentages gaan meten en optimaliseren door verschillende chatbot-avatars te testen.

Niet alleen dit, ik weet zeker dat als we het vrouwelijke equivalent van Cody hadden, de gebruikersreacties totaal anders zouden zijn dan die met de mannelijke.

Cody avatar-varianten

Terzijde: ik vind dat mensen hun foto's niet als chatbot-avatars moeten gebruiken. Het is verwarrend - heb ik het tegen een bot of een persoon? Echt, het visuele uiterlijk van bot is iets waar ontwerpers uiterst voorzichtig mee moeten zijn. Het is trouwens een evolutionair feit: gezichtsherkenning is een van de allereerste vaardigheden die kleine kinderen ontwikkelen en het gebeurt meestal maanden voordat ze leren praten.

Als je je echte naam als de naam van je bot wilt gebruiken, zorg er dan ook voor dat je script ook je ware persoonlijkheid weerspiegelt. Een alledaagse chat met een bot (= jij) kan bijgevolg een schadelijk effect hebben op je echte beeld.

3. Gezichtsuitdrukkingen van Chatbot

Gezichtsuitdrukkingen zijn super belangrijk. We wilden het ook in ons project opnemen.

Knipperen en knipogen:

Mensen knipperen gemiddeld 10 keer per minuut. Cody doet hetzelfde. Knipogen kan ook een extra non-verbaal signaal zijn (bijvoorbeeld: Nee, ik maak maar een grapje; maak maar een grapje).

Knipperende avatar van chatbot

De 6 basisemoties:

Bovendien kunnen chatbotreacties in een van de 6 basisemoties vallen:

  • geluk
  • droefheid
  • verrassing
  • angst
  • walging
  • boosheid
Voorbeeld van Cody-gezichtsuitdrukkingen

4. Gelaatsuitdrukking van de gebruiker (experimenteel)

We wilden dat de gebruikers ook een non-verbaal bericht naar Cody konden sturen. We hebben de gebruikersavatar gebruikt om dat te doen. Door de avatar aan te wijzen, kunnen gebruikers hun gezichtsuitdrukking wijzigen als reactie op de berichten van de Cody. Het weerspiegelt duidelijk niet de echte gezichtsuitdrukkingen, maar het is een andere manier om te communiceren met de gebruikersinterface van het gesprek.

Alternatieve gezichtsuitdrukkingen van gebruikers

5. Emoji's gebruiken

Iedereen gebruikt nu emoji's. En het zou geen verrassing moeten zijn. Ze zijn universeel en uiterst nuttig en ze voegen de non-verbale laag toe aan schriftelijke communicatie.

Vergelijk deze twee sms-berichten:

A. Ik haat je!

B. Ik haat je!

Ik denk dat B. voor de meesten van ons gemakkelijk te vertalen is naar: ik hou van je, maat!

Het is duidelijk dat Cody emoji's gebruikt, net als de meesten van ons.

Bericht met emoji

6. Phatic-expressie - het gesprek animeren

Animatie kan de gebruikerservaring van de gebruikersinterface naar een hoger niveau tillen, waardoor de interacties van de gebruikersinterface natuurlijker en aangenamer worden voor de gebruiker. Maar dat is niet alles, geanimeerde elementen kunnen een belangrijke rol spelen voor het hele gesprek en verantwoordelijk zijn voor de zogenaamde phatic-expressie. Simpel gezegd, dit is alles wat het gesprek soepel laat verlopen.

Avatar van chatbot animeren

Wanneer twee mensen elkaar ontmoeten, beginnen ze heel vaak een gesprek met een handdruk. Hiermee kunt u dichter bij een gesprekspartner komen, in hun ogen kijken en hun gezicht duidelijker zien. Daarom is de avatar van Cody aan het begin van het gesprek iets groter, waardoor de gebruiker zich vertrouwd kan maken met Cody en wanneer de eerste berichten worden uitgewisseld, wordt deze kleiner.

Typen indicatoren

Eenvoudige laad- (typ-) indicatoren kunnen worden gebruikt als een equivalent van phatische expressie bij het spreken en de gebruiker vertellen: blijf kalm, schat, ik ben er nog, geef me een seconde om te retorteren.

Er zijn oneindig veel typindicatoren. Dit is een van de meest voorkomende:

Typen indicator

Typindicatoren en zweeftoestanden

Bovendien hebben we besloten typeaanduidingen te gebruiken om de gebruiker voor te stellen - u staat op het punt het te zeggen. Een statische typeaanduiding wordt naast de gebruikersavatar weergegeven, maar wanneer de gebruiker, zeg maar, de antwoordknop met einde antwoord, de typeaanduiding begint te animeren.

Beweeg de typindicator

Einde

Dit was absoluut een van de meest interessante projecten waaraan The Rectangles recent heeft gewerkt. Een conversatiewebsite ontwerpen terwijl er nog zo weinig online zijn, was een fantastisch avontuur voor ons team. We hebben veel geleerd en om eerlijk te zijn - we kunnen niet wachten op zo'n project.

Nu kunnen we het ook zien - de toekomst van UX-ontwerp is schrijven.

Het artikel dat het schrijfproces van ons chatbotscript beschrijft, is gepubliceerd:

De Cody-chatbot-website wordt momenteel ontwikkeld bij Chop-Chop.
Blijf op de hoogte om op de hoogte te blijven wanneer het klaar is.

Als je dit artikel leuk vond, zou ik het op prijs stellen als je het hebt aanbevolen of een reactie hebt geplaatst. Je kunt me ook volgen op Twitter. Vrede!