Како направити цхатбот интерфејс

Средином 2000-их, виртуелни агенти и цхатботови за корисничку подршку добили су много похвала, иако нису били превише разговорни, а испод хаубе су били само састављени од размене података са веб серверима.

У данашње време, иако постоји огроман број примера „слабе уметне интелигенције“ (укључујући Сири, Алека, веб претраживаче, аутоматизоване преводиоце и препознавање лица) и других тема попут прилагодљив веб дизајн привлаче пажњу, цхатботови и даље изазивају пометњу. Уз велика улагања великих компанија, остаје пуно могућности за хаковање конверзационих интерфејса будућности.

Понекад добију лошу репутацију, али цхатботови могу бити корисни. Не треба да се осећају као основна замена за стандардни веб образац, где корисник попуњава поља за унос и чека валидацију - могу да пруже искуство разговора.



У основи побољшавамо корисничко искуство да се осећате природније, попут разговора са стручњаком или пријатељем, уместо да прстима кликнете или кликнете у веб прегледач или покрете на мобилном уређају. Циљ је да пружањем емпатичних, контекстуалних одговора ова технологија постане директно уграђена у животе људи.

Погледајте видео испод или прочитајте даље да бисте открили практичан начин дизајнирања и израде цхатбота, заснован на стварној апликацији за преузимање пројеката у пракси дизајнирања услуга.

01. Поставите личност

Важно је осигурати да личност цхатбота одражава компанију коју представља

Важно је осигурати да личност цхатбота одражава компанију коју представља

Како ова пракса служи преко 110.000 чланова широм света, циљ је био пружити брз, прикладан и природан интерфејс путем којег би интерни актери могли да захтевају ефикасне дигиталне услуге, уместо да морају да попуњавају збуњујуће обрасце.

Први корак био је успостављање личности цхатбота, јер би то представљало глас тима за дизајнирање услуга својим заинтересованим странама. Градили смо на основном раду Ааррона Валтера на људи за дизајн . То је у великој мери помогло нашем тиму да развије ботове особине личности, које су затим утврдиле поруке за поздраве, грешке и повратне информације корисника.

Ово је деликатна фаза, јер утиче на то како се организација доживљава. Да бисмо били сигурни да имамо што више информација, одмах смо успоставили радионице за заинтересоване стране да бисмо прикупили одговарајућу личност, боју, типографију, слике и проток корисника приликом интеракције са ботом.

Након што смо стекли сва потребна одобрења - укључујући тражење правног саветника - кренули смо у претварање архаичних образаца захтева у низ повратних и назад питања која су опонашала разговор између заинтересованих страна и представника нашег дизајнерског тима.

02. Користите РивеСцрипт

Овај једноставан скриптни језик пружа све што је потребно за дизајнирање и изградњу ПОЦ-а за цхатбот

Овај једноставан скриптни језик пружа све што је потребно за дизајнирање и изградњу ПОЦ-а за цхатбот

Знали смо да не желимо да улазимо предубоко у језик за означавање АИ за део обраде - требало нам је само довољно да покренемо искуство.

РивеСцрипт је једноставан АПИ за цхатбот који је довољно лак за учење и довољан за наше потребе. У року од неколико дана имали смо логику да прихватимо пројектни захтев од бота и да га рашчланимо са довољно пословне логике да га потврдимо и категоризујемо како би могао да се пошаље путем ЈСОН РЕСТ услуга у одговарајући интерни ред задатака пројеката.

Да бисте покренули овај основни цхатбот, идите на РивеСцрипт репо , клонирајте га и инсталирајте све стандардне Ноде зависности. У репо-у такође можете да окусите интеракције које можете додати помоћу различитих фрагмената примера.

Затим покрените директоријум веб-клијента, који претвара бота у веб страницу извођењем основног Грунт сервера. У овом тренутку можете побољшати искуство према својим потребама.

03. Генеришите мозак свог бота

Следећи корак је генерисање „мозга“ нашег бота. Ово је наведено у датотекама са екстензијом .РИВЕ, а на срећу РивеСцрипт већ долази са основним интеракцијама из оквира (на пример, питања попут „Како се зовеш?“, „Колико имаш година?“ И „Који је твој омиљена боја?').

Када покренете апликацију веб-клијента помоћу одговарајуће команде Ноде, ХТМЛ датотеци је наложено да их учита .БАНКА фајлови.

Даље треба да генеришемо део мозга нашег цхатбота који ће се бавити пројектним захтевима. Наш главни циљ је да одабир пројектних задатака претворимо у редован разговор.

како нацртати мачку која стоји

Тако, на пример:

  • Здраво, како можемо помоћи?
  • Одлично, колико брзо треба да започнемо?
  • Можете ли ми дати оквирну представу о вашем буџету?
  • Реците ми више о свом пројекту ...
  • Како сте чули за нас?

Типичан приступни веб образац би изгледао овако:

Request Type: option 1
option 2
option 3
Timeline: 1 month
1-3 months
4+ months

Budget Information

Project Description

Reference

Веб обрасци су нам добро познати са одређеним обрасцима: кликнете на дугме Пошаљи, сви подаци обрасца се шаљу на другу страницу на којој се обрађује захтев и тада ће се највероватније појавити дрска страница Хвала.

Помоћу цхат-ботова можемо да подузмемо интеракцију приликом подношења захтева и учинимо га значајнијим.

04. Дизајнирајте глас

Да бисмо претворили овај образац у конверзацијски кориснички интерфејс који се послужује у РивеСцрипт-овом цхатбот веб клијенту, треба да претворимо информациону архитектуру из круте у флуидну; или ознаке поља у низове корисничког интерфејса.

Размотримо неке доступне ознаке поља и с њима повезан тон питања:

  • Захтев: Како можемо помоћи? Нисам сигуран? Смета ли вам ако поставим неколико питања?
  • Временска линија: Колико брзо треба да започнемо?
  • Информације о буџету: Можете ли ми дати оквирну представу о вашем буџету?
  • Опис пројекта: ОК, можете ли ми рећи резиме проблема који треба решити?
  • Референца: Такође, ко вас је упутио на нас?

Даље морамо да конвертујемо код веб обрасца у АИ скрипту, пратећи РивеСцрипт-ов врло научив логика обраде за двосмерне разговоре:

- How can we help? + * % how can we help - Sure, Do you mind If I ask a couple of questions? + * % sure do you mind if i ask a couple of questions - How soon do I need to start this request? + * % how soon do i need to start this request - Can you give me rough idea of your budget? + * % can you give me rough idea of your budget - OK, can you tell me a summary of the problem to be solved, components and environments affected, or an overall description? +* % ok can you tell me a summary of the problem to be solved components and environments affected or an overall description - Also, who referred you to us? +* % also who referred you to us - great here is what I got so far: Services needed: Need to start: Rough budget: About your project: Referred by: and will get in touch shortly is there anything else i can help you with today? intake

05. Захтев за подношење

За разлику од тога што се променљиве стандардног обрасца шаљу на другу страницу или услугу ради обраде, цхатботови могу одмах потврдити и доставити информације које је корисник унео у прозор за ћаскање (или изговорио), што значи да корисници такође могу лако да посете за претходно унете вредности.

Морали смо да пошаљемо захтев корисника унесен у корисничко име за цхатбот преко ЈСОН РЕСТ АПИ на спољни сервер за задатке пројеката.

У РивеСцрипт-јс слободни смо да користимо КСМЛХттпРекуест објект да се захтев поднесе готово истовремено, јер податке уноси корисник:

> object intake javascript var http = new XMLHttpRequest(); var a = rs.getUservar(rs.currentUser(), 'areas'); var b = rs.getUservar(rs.currentUser(), 'when'); var c = rs.getUservar(rs.currentUser(), 'budget'); 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, true); http.setRequestHeader('Content-type', 'application/x- www-form-urlencoded'); http.setRequestHeader('Connection', 'close'); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(params); < object

06. Не бој се цхатбота

Ускоро ће тренутни начини интеракције са рачунарима за добијање информација уступити технологији заснованој на АИ попут цхатботова, где људи само извршавају једноставне гласовне команде, као што смо видели код технологија као што су Амазон Ецхо и Гоогле Хоме.

Заједница веб дизајна не треба да се плаши - сви бисмо требали прихватити додатну вредност ове нове технологије.

То може бити промена игре за компаније за које ради, нудећи потпуно скалабилну корисничку услугу и побољшану интелигенцију купаца.

Овај чланак је првобитно представљен у нет магазине , Најпродаванији светски часопис за веб дизајнере и програмере. Претплатите се овде .

Повезани чланци:

  • Како цхатботови уче - интервју са Гилесом Цолборнеом
  • Како ће интелигентни веб променити наше интеракције
  • Како конверзацијски интерфејси иновирају банкарство