Konversations-UI-principper - Komplet proces med at designe et websted Chatbot

I denne artikel viser jeg dig en case study, der beskriver en hel proces med at designe en samtale UI til et B2B-websted, herunder fragmenter af samtaleskriptet, det grundlæggende i kommunikationsteorien og nogle af de tip og tricks, som jeg tror gør dette projekt til lidt unik.

Åbning

Det er sidst i 2016. Mange mennesker siger, at UI-samtale er fremtiden for webgrænseflade. IM-apps, chatbots, tekstbaserede UI'er eller emojier har sandsynligvis aldrig været mere populære. Nogle vil måske sige, at det bare er en anden designfad, eller at tekstbaserede grænseflader ikke er noget nyt, men ærligt talt - lad os indrømme det - med fremkomsten af ​​iPhone-meddelelser, Slack eller Facebook Messenger ændrede den måde, vi udveksler information på, irreversibelt. Tekstbeskeder er blevet ekstremt naturlig måde at kommunikere i disse dage.

Så naturligvis, da der opstod en chance for, at The Rectangles arbejdede på en samtalewebside for en af ​​vores klienter, tøvede vi ikke et eneste sekund.

Kom nu - vis mig et hold, der ikke gerne vil arbejde på et sådant projekt nu.

Projektmål

Klient:

  • Chop-Chop - et webudviklingsfirma

Vores vigtigste opgaver i disse projekter:

  • designe et komplet sæt af samtale UI-aktiver
  • oprette et samtaleskript
  • håndtere de mest almindelige typer samtale tilfældighed (betyder f * cks og dfdffjhfdjhfkfs)
  • formidle brandets karakter (også ved at bruge virksomhedens brandhelte, Cody)
  • hæv bruger (samtalepartner) nysgerrighed og smag
  • vise virksomhedens webudviklingsevner

Jeg viser dig, hvordan vi gjorde det trin for trin, men først ...

Lidt teori

Lad os starte med det grundlæggende. Jeg tror, ​​at det undertiden er vigtigt at tage et skridt tilbage et kort stykke inden jeg dykker ned i mere komplekse spørgsmål. I dette tilfælde hjalp det os virkelig. Tro det eller ej, men læsning gennem alle disse grundlæggende definitioner åbnede vores øjne for et par kreative løsninger og øgede hele idéprocessen.

Og jeg synes, du ikke skulle springe over denne del også.

Principperne for kommunikation

Der er hundreder af definitioner, der forklarer kommunikation. Nedenunder er min hybridversion af nogle få, jeg fandt.

Kommunikation er en proces til deling af meningsfulde beskeder

Beskederne (kommunikation generelt) kan være verbale eller ikke-verbale.

Det mest almindelige verbale kommunikationsværktøj er sprog, som er et sæt symboler, der bruges til at udveksle information i form af ord, der kan omdannes til betydninger.

Eksempler: Hej; Tak skal du have; Du ser godt ud i dag

Ikke-verbal derimod henviser til enhver form for kommunikation, der er forskellig fra ord. Det kan være bevægelser, ansigtsudtryk, tone, men også handlinger eller symboler, der har en fælles social betydning.

Eksempler: , ,

Kommunikation er en proces, hvor alle aspekter påvirker hinanden. Det betyder, at kommunikation er holistisk, og at hele processen skaber et system, hvor alle elementer (alle meddelelser) arbejder sammen til fælles gavn.

Disse meddelelser er funktionelle, hvilket betyder, at vi bruger dem til at opnå ønskede effekter, men også tilpasningsdygtige - hvilket betyder, at de, afhængigt af situationen, kan ændres og justeres for at opnå bedre resultater.

Endelig er det sprog, vi bruger til at kommunikere, baseret på kommunikationskode, som er et sæt af principper og betydninger. De skaber base for fortolkning. Denne kommunikationskoder kaldes også regler; der er to typer af dem:

  1. Konstitutive regler: henviser til forstand og betydning af bestemte ord, og hvordan vi skal fortolke dem. De fortæller os også, hvordan vi kan forstå en meddelelse i en bestemt sammenhæng.
  2. Normative regler: hjælper med at bestemme en korrekt reaktion baseret på en given meddelelsestolkning. Med andre ord fortæller de os, hvad vi skal og hvad vi ikke skal gøre (siger) i en bestemt situation.

Og selvfølgelig er en af ​​de mest naturlige og mest almindelige måder at kommunikere på en samtale. Så når vi diskuterer samtale-UI'er, synes jeg, at vi også bør se på en prøvekonversationsdefinition:

Samtale er en snak mellem to eller flere mennesker, normalt en uformel

Så er det muligt at oprette uden stærk AI-mastermind en grænseflade, der opfylder kommunikationsprincipperne?

Sådan kan en konversationsgrænseflade UI (CUI) -definition se ud:

En grænseflade, der er baseret på et holistisk system med funktionelle, adaptive og meningsfulde meddelelsesudveksling, hvor begge sider af samtalen bruger og tolker sprogkoder, vedligeholder og overholder de konstitutive og normative regler på en venlig, uformel måde

Og vi ønskede at oprette en sådan brugergrænseflade.

Teori om praksis - opbygning af samtale UI

Definition af mål

Chatbots i B2B har deres funktion. Folk besøger sådanne websteder af en særlig grund, fordi de vil have noget. Det er som at gå til en restaurant eller gå ind i en mursten og mørtel butik. Selvfølgelig gør folk nogle gange det, fordi de ikke har noget bedre at gøre, eller de bare vil more sig, men generelt - der er et eller andet formål bag det; bestilling af mad, køb af et par sko eller lære om priser. På bagsiden har en tjener eller en butiksassistent også deres opgaver og manuskripter at følge, når de taler med en klient. Et samtalewebsted kan fungere nøjagtigt på samme måde, og en chatbots rolle kan svare til en butiksassistent eller en tjener.

I dette tilfælde vidste vi nøjagtigt, hvad vi ønskede at opnå, da vi har arbejdet med Chop-Chop i årevis (faktisk, jeg stiftede det i 2010), men hvis du har brug for hjælp til at definere chatbots / brugers mål, kan du bruge Brugercentreret design lærred.

Vi specificerede følgende mål for vores chatbot:

  • udtrykke Chop-Chop mærke karakter
  • Brug webstedet i sig selv til at vise Chop-Chop webudviklingsevner
  • give brugeren information om Chop-Chop-tjenester
  • opfordre brugeren til at bogmærke webstedet
  • lære noget om brugeren (navn, besættelse, e-mail, telefon)
  • hjælp til at komme i kontakt (CUI som et alternativ til kontaktformular)
  • opfordre brugere til at tilmelde sig nyhedsbrevet

Del 1. Design af verbal kommunikation

Bygning af samtaleskriptet

UX-designere skal kunne forudse. I dette projekt vidste vi, at dette er den eneste måde for os at opbygge et holistisk kommunikationssystem uden AI-støtte. Vi havde brug for et fantastisk samtaleskript ved hjælp af en adaptiv syntaks, som også ville gøre samtalen behagelig og meningsfuld for brugerne.

1. Samtalsrammen

Ved hjælp af en tavle startede vi med et simpelt tankekort. Når vi har chatbot-målene i tankerne, noterede vi alle de mulige emner og samtaledele. Vi ønskede hurtigt at kontrollere, hvor kompliceret det endelige script kunne være.

Tidlige stadier af skrivning af samtaleskript

Derefter delte vi og arrangerede delene i funktionelle grupper (vi kaldte dem blokke). Vi begyndte allerede at se nogle mønstre. Nogle af grupperne var målrelaterede (vi kaldte dem kerner), andre var ansvarlige for at gøre samtalen mindre officiel (chattere), endnu en anden gruppe gav brugeren muligheder eller yderligere oplysninger (ekstramateriale), og der var også reaktioner på brugeren svar. Endelig kunne springe hurtigt spole samtalen videre til en anden scriptblok.

Den endelige liste over script-blokke:

  • Åbning
  • Ekstra (s)
  • Skip (s)
  • Kerne (r)
  • Chatter (s)
  • Slutning
Eksempel på simpel tidsramme

Naturligvis er den endelige scriptkonstruktion langt mere knudede end en lineær ramme. Alle afhængigheder og uendelige kombinationer baseret på samtalenes holistiske karakter gør det hele ekstremt kompliceret.

2. Scriptet

Dette var det øjeblik, vi alle ventede på siden projektets første minut: Vi kunne endelig komme til at skrive det egentlige samtaleskript. Denne del var sjov, men den krævede også maksimal fokus. Det var meget lettere med scriptet opdelt i blokke, da alle samtaledele kunne skrives separat.

Den gode ting er - det eneste værktøj, du har brug for til at skrive CUI-scripts, er pen og papir eller en teksteditor.

Nedenfor er der nogle af eksemplerne på scriptblokke.

Åbning:

Hej
Jeg er Cody, og jeg ville elske at chatte med dig
    Hej, Cody
Hvordan har du det i dag?
    Nå ... kunne være bedre
Dårlig dag, hva? Det sker ...

ekstra:

Jeg håber du ikke har noget imod at jeg bruger cookies
    Hvad er disse?
Min morgenmad!
Haha, dårlig joke
Cookies er data om dig, der er gemt i en browser
    Lyder uhyggeligt men hm… OK
Store!

Springe:

Hej med dig!
Du synes velkendt
Har vi mødt hinanden?
    Ja vi har
Ha! Jeg har en god hukommelse!
Sidste gang vi talte om Magento-udvikling
Vil du fortsætte vores samtale?
    Lad os fortsætte

kerne:

    Fortæl mig om dig
Med fornøjelse! :-)
Vil du vide, hvor jeg kommer fra?
Hører min historie?
Eller måske lære hvad gør jeg for at leve?
    Hvor kommer du fra?
Ideen til mig kom fra UX designstudie The Rectangles
Men det var den polske designer Jan Kallwejt, som klædte mig og gjorde mit hår

Chatter:

Ser du den del i øverste hjørne?
    Hvad med det?
Hvis du kunne lide vores chat, introducer mig til dine venner! :-)
Jeg er glad for at tale med dem også.
    Måske senere

Slutning:

Jeg skal snart gå
Vil du se noget trick før?
    Vis mig!
Tryk på Cmd + D
Haha!
Har du bogmærket mig?
    Ikke endnu
Gør det så! :-)
Ok, det er tid for mig at gå
Lad os holde kontakten
    Farvel, Cody!

3. Syntaks

Et godt script skal lade dig oprette en anden scenarie for samtalen. Det er lettere, hvis samtalen foregår på engelsk, da engelsk syntaks er relativt enkel. På mange sprog skal du dog være i stand til at oprette mere end en mulighed for en meddelelse (sætning) ved at erstatte et ord med et andet. En scriptdesigner skal også være i stand til at specificere stederne for brugers svar, indstillinger osv.

For at oprette en sådan scriptnotation har du brug for et sæt symboler: parenteser, parenteser, krøllede parenteser, og hvad du og dit team kan læse og forstå. Dette er også meget vigtigt for de udviklere, der vil implementere scriptet. De skal også være i stand til at forstå det.

{(God morgen) | Hej | Hej} ven, {jeg er | mit navn er} Cody!

I nogle tilfælde kan chatbot vælge et ord fra et specifikt sæt tilfældigt (Hej; Hej, Hej; Yo), men i stedet kan det også være lidt smartere og vise nogle meddelelser i henhold til, lad os sige, brugertid på dagen (God morgen; God aften).

Her er et eksempel på et sæt symboler og deres funktioner:

  • {} krøllede parenteser: definer et sæt indstillinger
  • | rør: adskiller indstillingerne i et sæt
  • () parenteser: angiv de tilstandsrelaterede indstillinger i et sæt
  • [] parenteser: angiver brugerinput
Eksempel på syntaksnotation

Hvis du gerne vil lære mere om at skrive scriptet i sig selv, fortæl os det.

4. Chatbot-meddelelser

Den visuelle visning af samtalen var en af ​​dette projekts vigtigste UX-udfordringer. Nedenfor er nogle af højdepunkterne.

Enkelt udsagn kontra komplette afsnit

Folk taler ikke i afsnit. Vi taler ved hjælp af enkelt sætninger. Naturligvis kan disse undertiden danne uendelige ytringer, men i en samtale skifter folk ofte skift. Vi mener også, at visning af lange afsnit af tekst, som brugeren har brug for at læse før besvarelse, kan sammenlignes med at tale med en person, der taler forfærdeligt hurtigt. Så i stedet for afsnit besluttede vi at vise kombinationer af enkelt (korte) sætninger.

Kombination af enkeltstående udsagn i blokke

Ved at manipulere boblenes hjørneradius er det muligt at oprette en logiske tekstblokke med enkeltmeddelelser. På den måde kunne vi stadig tale i sætninger og ikke i afsnit, men give brugeren et mildt tip - hej, denne del af samtalen starter her og slutter der.

Rundede hjørner er med til at kombinere enkeltangivelser i tekstblokke

Fading out vs Scrolling

Den mest hyppige metode til at vise samtalestrømmen er konstant at tilføje nye beskeder under de gamle og lade brugeren rulle.

Som et eksperimentelt alternativ kan de gamle meddelelser falme ud, og som et resultat er rulling ikke længere nødvendigt. Jeg ved, at det anvendelige aspekt af en sådan løsning er tvivlsomt, men se på det fra forskellige perspektiv - en sådan løsning afspejler arten af ​​en reel samtale. Når du taler med nogen, har du heller ikke adgang til de udvekslede oplysninger hele tiden.

Brug af gennemsigtighed til at markere tidligere meddelelser

Derudover kan du på et tidspunkt blot bruge overspring for at spørge brugeren, om de gerne vil vende tilbage til en af ​​de foregående dele af samtalen, eller alternativt vise en permanent 'Spring til' -knap, som når hit blev udløst af Bot's spørgsmål om at vende tilbage til en hvilken som helst af de tidligere passager.

5. Brugermeddelelser (svar)

For en samtale UI, der ikke bruger AI til at fortolke brugers svar, er dette den mest udfordrende del af at skrive et script. Scriptet skal lade brugere (lad os referere til dem her som samtalepartnere) give chatbotten med logiske svar (husk, konstitutive og normative regler), men jo mere naturlig og åben samtalen, desto mere underholdende er det for samtalepartneren.

Vi brugte to typer svar:

A. defineret (kontrolleret, tæt afsluttet)

  • de er relativt lette at håndtere
  • de kræver gode forventningsevner
  • brugere har måske ikke tilladelse til at tale, hvad de vil
Prøvedefineret svar

B. ikke-defineret (ikke-kontrolleret, åben)

  • de er vanskeligere at håndtere
  • de kan muligvis kræve, at nogle foruddefinerede orddatabaser analyseres
  • brugere har tilladelse til at kommunikere mere naturligt
Prøve ikke-defineret svar

Der er sandsynligvis ingen universel måde at håndtere åbne svar på. Vi kan ikke antage, at folk vil følge kommunikationskoden. Nogle af de ikke-definerede meddelelser vil overtræde (især) de normative regler. Selvfølgelig vil nogle brugere tale (skrive), som de ville tale (skrive) med et menneske, men selvfølgelig - andre vil forsøge at udfordre din bot ved at sende sexts, sværge eller gibberish.

Her er nogle tip, hvordan du kan kontrollere de ikke-definerede meddelelser:

  • input kan kun begrænses til specificeret sæt tegn (f.eks. hvis der bliver spurgt om et navn, er det kun tilladt bogstaver)
  • regulære udtryk (regexp) kan bruges til nogle input (f.eks. e-mail)
  • brug matriser af mest populære sværgeord
  • (Jeg ville være forsigtig med denne, men) brug en eller anden ordbog med API til at kontrollere, om de svar, du forventer at være ord, virkelig er ord

Naturligvis skal en ideel samtale være ubundet, men i tilfælde af en samtale UI uden AI-opbakning - ja, en smule kontrol er uundgåelig.

En ting mere:

Når du bruger definerede spørgsmål, kan du gøre oplevelsen med at svare lidt bedre med en lille forbedring. I stedet for at stille spørgsmålet sådan:

Spørgsmål tæt afsluttet uden indstillinger

spørg sådan:

Tæt spørgsmål med indstillinger

Dette er ren psykologi - i det første eksempel er den (muligvis) uendelige række muligheder, som brugeren måske har, begrænset, mens du i det andet specificerer dette interval og giver din bruger et valg. Resultatet er det samme i begge scenarier, men UX er bedre i sidstnævnte.

6. Interjektioner, fyldstoffer, ikke-leksikale samtalelyde

Folk mumler, begår fejl, tøver eller mister tråden, når de taler. Dette er normalt. Vi ønskede, at samtalen med vores chatbot også var så naturlig. Så vi brugte dem også.

Her er nogle af de populære ikke-leksikale konversationslyde: ja, okay, åh, åh, aum, mmm, uhh, uh-huh, uu, du ved, ermmm

Eksempel på brug af ikke-leksikale lyde

Del 2. Designe den ikke-verbale kommunikation

1. Arrangement af meddelelser

Den måde bot og bruger avatarer og deres meddelelser er arrangeret, bør ikke være tilfældig. Der er to hyppigste typer visning af samtalen:

A. avatars + -meddelelser justeres (i de fleste tilfælde til venstre) en under en anden

Justeret meddelelsesarrangement

B. avatars + meddelelser fra begge brugere er overfor hinanden

Modsat beskedarrangement

Vi mener, at mulighed B reflekterer arten af ​​en reel samtale bedre. Normalt, når to mennesker snakker, ser de på hinanden. Så for at gøre samtalen UI føles mere naturlig, skal samtalernes avatarer og deres meddelelser også vises på den måde.

2. Chatbots udseende

Vi var heldige, da Chop-Chop havde en brandhelt. Hvad mere er, Cody er helt perfekt til alle UI-konversationsformål, da han har et stort bibliotek med foruddesignede optrædener, vi kunne bruge. Jeg tror, ​​snart virksomheder vil begynde at måle og optimere konversationsfrekvensen for UI-konversationer ved at teste forskellige chatbot-avatarer.

Ikke kun dette, jeg er sikker på, at hvis vi havde Codys kvindelige ækvivalent, ville brugerens svar være helt anderledes end dem med det mandlige.

Cody-avatarvarianter

På en side-note synes jeg, folk skal undgå at bruge deres billeder som chatbot-avatarer. Det er forvirrende - taler jeg med en bot eller en person? Virkelig, Bot's visuelle udseende er noget, designere skal være ekstremt omhyggelige med. For øvrig er det en evolutionær kendsgerning: ansigtsgenkendelse er en af ​​de allerførste evner, som små børn udvikler, og det sker normalt måneder, før de lærer at tale.

Hvis du også vil bruge dit rigtige navn som dit bot-navn, skal du sørge for, at dit script også afspejler din ægte personlighed. En dagligdags chat med en bot (= dig) kan følgelig have en skadelig effekt på dit rigtige image.

3. Chatbots ansigtsudtryk

Ansigtsudtryk er super vigtigt. Vi ønskede også at medtage det i vores projekt.

Blinker og blinker:

Folk blinker i gennemsnit 10 gange pr. Minut. Cody gør det samme. Blinking kan også være et ekstra ikke-verbalt signal (for eksempel: Nah, jeg bare joker; bare tuller).

Blinkende chatbot-avatar

De 6 grundlæggende følelser:

Derudover kan chatbot-reaktioner falde ind i en af ​​de 6 grundlæggende følelser:

  • lykke
  • sorg
  • overraskelse
  • frygt
  • afsky
  • vrede
Eksempel på Cody-ansigtsudtryk

4. Brugers ansigtsudtryk (eksperimentelt)

Vi ønskede, at brugerne også kunne sende en ikke-verbal besked til Cody. Vi brugte brugeravatar til at gøre det. Ved at holde musen hen over avataren kan brugerne ændre deres ansigtsudtryk som en reaktion på Codys meddelelser. Det afspejler naturligvis ikke de reelle ansigtsudtryk, men det er en anden måde at kommunikere med samtale UI på.

Alternative bruger ansigtsudtryk

5. Brug af emojier

Alle bruger emojier nu. Og det burde ikke være en overraskelse. De er universelle og ekstremt nyttige, og de tilføjer det ikke-verbale lag til skriftlig kommunikation.

Sammenlign disse to tekstmeddelelser:

A. Jeg hader dig!

B. Jeg hader dig!

For de fleste af os kunne B. let oversættes til: Jeg elsker dig, kammerat!

Naturligvis bruger Cody emojis ligesom de fleste af os.

Besked med emoji

6. Statisk udtryk - animere samtalen

Animation kan tage brugeroplevelsen til konversationsgrænsefladen til næste niveau, hvilket gør brugergrænsefladeinteraktioner mere naturlige og behagelige for brugeren. Men det er ikke alt, animerede elementer kan spille en vigtig rolle for hele samtalen og være ansvarlig for det såkaldte, fatiske udtryk. Kort sagt, dette er alt, der får samtalen til at flyde jævnt.

Animering af chatbots avatar

Når to mennesker mødes, starter de ofte en samtale med et håndtryk. Det giver mulighed for at komme tættere på en samtalepartner, se ind i deres øjne og se deres ansigt tydeligere. Derfor er Codys avatar lidt større i begyndelsen af ​​samtalen, så brugeren kan gøre sig bekendt med Cody, og når de første meddelelser udveksles, bliver den mindre.

Indtastningsindikatorer

Enkel indlæsning (indtastning) -indikatorer kan bruges som et ækvivalent med det fatiske udtryk ved at tale, fortælle brugeren - hold dig kølig, skat, kanin, jeg er stadig her, giv mig et øjeblik til at retortere.

Der er uendeligt mange skriveindikatorer. Her er en af ​​de mest almindelige:

Indtastningsindikator

Indtastning af indikatorer og hovertilstande

Derudover besluttede vi at bruge skriveindikatorer til at foreslå brugeren - hey, du er ved at sige det. En statisk indtastningsindikator vises ved siden af ​​brugeravataren, men når brugeren hører, lad os sige, den tætte svarknap, begynder skriveindikatoren at blive animeret.

Hold markøren aktiveret indtastningsindikator

Slutning

Dette var bestemt et af de mest interessante projekter, som rektanglerne har arbejdet på for nylig. At designe et konversationswebsted, når der stadig er så få af dem online, var et fantastisk eventyr for vores team. Vi har lært meget og for at være ærlige - vi kan ikke vente på et andet projekt som det.

Nu kan vi også se det - fremtiden for UX-design skriver.

Artiklen, der beskriver processen med at skrive vores chatbot-script, er blevet offentliggjort:

Cody chatbot-webstedet er i øjeblikket ved at blive udviklet hos Chop-Chop.
For at få besked, når det er klar - hold kontakten.

Hvis du kunne lide denne artikel - ville jeg virkelig sætte pris på, hvis du anbefalede den eller efterlod en kommentar. Du kan også følge mig på Twitter. Fred!