Cum am procedat la crearea elementelor de interfață de utilizare de intrare pentru platforma noastră de chatbot
Publicat: 2017-01-01Chatboții, așa cum există astăzi, nu au multe capacități de a înțelege limbajul uman natural. Și acesta este unul dintre motivele principale pentru care majoritatea aplicațiilor de mesagerie (Messenger, Kik etc.) recurg la o combinație de interfață de utilizare grafică și text în platformele lor bot - gândiți-vă la butoane, carusele, carduri cu imagine și nu doar răspunsuri text.
Noi, cei de la Tars, folosim browserul ca platformă pentru a ne construi propria interfață de chat pentru ca roboții să funcționeze. Și asta ne oferă libertate deplină asupra tuturor componentelor pe care le avem. Dacă ați încercat vreunul dintre roboții noștri (dacă nu ați făcut-o, mai întâi încercați unul aici și aici), știți că susținem cu tărie interfața grafică + abordarea bazată pe text. Ca parte a acestui proces de gândire, am creat o serie de intrări personalizate de la tastatură în interfața noastră frontală pentru a facilita interacțiunile și situațiile diferite ale utilizatorului.
Messenger, Kik, Telegram sunt platforme uriașe în care dezvoltatorii implementează sute de roboți în fiecare zi. Încă simt că aceste platforme de mesagerie nu au făcut suficient în ceea ce privește componentele front-end pentru a ajuta un boomaker să creeze interacțiuni îmbogățitoare cu utilizatorii.
Și de aceea, am vrut să vorbesc mai multe despre cum am creat fiecare interfață de utilizare personalizată, de ce fiecare dintre ele are sens și despre modul în care lipsa acestora îngreunează interacțiunile utilizatorilor chiar acum.
Deci iată-ne:
Scroller pentru dată și oră
Gândiți-vă la un scenariu în care trebuie să întrebați un utilizator când ar dori să facă programarea pentru? Pot exista mai multe moduri de a oferi aceleași informații.
25 noiembrie, 25 noiembrie, 25 noiembrie, 25/11, 25–11–2016, 25/11/16 — toate înseamnă în esență același lucru, dar devine dificil pentru o mașină să înțeleagă aceste date.
Acesta este motivul pentru care am încorporat un scroller pentru dată și oră, unde utilizatorii pot rula cadranele și pot selecta data/ora.

Nu am văzut nicio altă platformă de mesagerie care să ofere această interfață de utilizare până acum și consider că acest lucru este obligatoriu dacă un bot solicită data sau ora de la utilizator.
Butoane verticale
Gândiți-vă la acestea ca opțiuni cu mai multe variante într-o formă în care aveți un număr limitat de lucruri din care să alegeți. Atingerea butoanelor face interacțiunea mai rapidă și, de asemenea, limitează sfera conversației.
Abordarea bazată pe butoane are sens atunci când trebuie să alegeți între o pizza vegetală și non-veg, dar s-ar putea să nu fie cea mai bună interfață de utilizare dacă aveți 100 de polițe de asigurare din care să alegeți.
Ce se mai poate face cu butoanele verticale?
- adăugați o imagine lângă fiecare opțiune pentru a o face mai atractivă din punct de vedere vizual.
- puteți fie să lăsați utilizatorul să răspundă la o singură atingere, fie să îl faceți să facă clic pe „Trimite” după ce atinge oricare dintre opțiuni. Acesta din urmă ajută la reconfirmarea dacă utilizatorul nu a selectat din greșeală opțiunea anume. Nu există nicio modalitate de a reveni într-un flux de chat și de aceea această personalizare are sens.
- adăugați un meniu rapid de informații la fiecare opțiune pentru a oferi informații detaliate și pentru a îmbunătăți procesul de luare a deciziilor.

Nu toată lumea știe diferența dintre Advance și Basic Facial. Adăugarea de detalii despre tot ceea ce este inclus și prețul face experiența utilizatorului mai bună.
Un lucru important de reținut atunci când utilizați Button UI este să vă încadrați întrebarea în mod corect. După cum explică Leszek în articolul său de aici, este mai bine să puneți întrebarea într-un mod care să limiteze gama de opțiuni și să stabilească contextul în loc să puneți o întrebare foarte deschisă.

Restricționarea intrării utilizatorului
Consider că acesta este unul dintre cele mai bune lucruri pe care le-am făcut pentru interfața noastră de chat. Ori de câte ori oferim o interfață grafică de intrare (butoane, carusele etc), nu permitem utilizatorului să introducă nimic în text.
De ce să faci asta? Pentru că un utilizator poate introduce orice, iar botul tău nu este pregătit pentru asta. Până nu ajungi acolo, este mai bine să o păstrezi simplă și restricționată decât să întrerupi conversația.
Recomandat pentru tine:
Ceea ce facem este asta:


Aceasta este interfața noastră de chat
Și asta se întâmplă când nu ai așa ceva:

Acesta este Facebook Messenger, care nu permite introducerea de text restricționată atunci când aveți răspunsuri rapide
Butonul Terminat și Pass
Acestea sunt două nuanțe foarte mici pe care am ajuns să le încorporăm pentru că întotdeauna ne-am gândit la chatbot-urile scriptate ca la o evoluție a formelor.
Când trimiteți adresa dvs. sau oferiți un feedback detaliat prin interfața de chat, comportamentul general este să apăsați butonul de trimitere după ce ați scris câteva cuvinte și întregul răspuns este în cele din urmă împărțit în 3-4 declarații. Cu „butonul Terminat”, puteți continua să tastați și să apăsați acest lucru după ce ați dat răspunsul complet.
Dacă nu aveți o astfel de opțiune, următorul mesaj al mașinii va veni după prima instanță, rezultând răspunsuri incomplete.

Aveți un buton „Terminat” atunci când trebuie să selectați mai multe opțiuni sau să aveți răspunsuri cu mai multe rânduri
S-ar putea să existe și cazuri în care un utilizator dorește să omite întrebarea și, pentru asta, avem un „buton de trecere” în loc de „butonul de trimitere”. De îndată ce utilizatorul începe să tasteze, butonul de trecere se transformă în butonul de trimitere.

Nu vrei să-ți dai e-mailul? Atingeți „Pass” pentru a omite întrebarea.
Sugestii de completare automată
Aceasta este ca și funcționalitatea de completare automată în căutarea Google, unde începeți să tastați și sugerează opțiunile posibile. Acest lucru devine deosebit de util atunci când aveți o listă lungă de opțiuni și a avea butoane verticale nu este o opțiune fezabilă. Gândiți-vă la o listă lungă de localități, orașe, modele de mașini etc.

Stele și Like-uri
Mai ales util atunci când solicitați feedback sau experiență utilizatorilor, iar răspunsul este de natură mai calitativă. Și puteți chiar personaliza pictogramele pentru a fi stele, like-uri, inimi, emoticoane.

Carduri cu imagine
Acest lucru este util atunci când trebuie să prezentați mai multe informații despre fiecare articol dintr-o dată. Ar putea fi un burger într-un proces de comandă de alimente sau o cămașă într-un flux de cumpărături. Toate cărțile sunt stivuite una față de alta și puteți derula pentru a vedea toate opțiunile.
Există 4 părți ale acestui element UI - imagine, titlu, descriere și subsol. Le puteți utiliza diferit, în funcție de ceea ce doriți să afișați acolo.

În cazul în care doriți să testați toate aceste elemente de UI de intrare, iată linkul către un chatbot care vă conduce pe rând.
Chatul fiind o interfață minimalistă, cu doar bule și o casetă de text, nu oferă prea mult spațiu. Și cred că va trebui să regândim modul în care putem facilita o varietate de interacțiuni utilizând elementele existente și adăugând altele noi la interfața de chat.
V-ar plăcea să știți dacă v-ați jucat singur cu interfața de mesagerie și ați adăugat alte elemente interesante ale interfeței grafice?
[Această postare de Ish Jindal a apărut pentru prima dată pe Medium și a fost reprodusă cu permisiunea.]






