Како се гради цхатбот интерфејс

Аутор: Randy Alexander
Датум Стварања: 2 Април 2021
Ажурирати Датум: 16 Може 2024
Anonim
Настройка Ботрикса. Личный магазин в Ботриксе, поинты и награды.  Лучший бот для Трово!
Видео: Настройка Ботрикса. Личный магазин в Ботриксе, поинты и награды. Лучший бот для Трово!

Садржај

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

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

  • Како дизајнирати цхатбот искуство

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


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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

форм ацтион = ""> фиелдсет> легенд> Рекуест Типе: / легенд> инпут ид = "оптион-оне" типе = "радио" наме = "рекуест-типе" валуе = "оптион-оне"> лабел фор = "оптион- оне "> оптион 1 / лабел> бр> инпут ид =" оптион-тво "типе =" радио "наме =" рекуест-типе "валуе =" оптион-тво "> лабел фор =" оптион-тво "> оптион 2 / лабел> бр> инпут ид = "оптион-тхрее" типе = "радио" наме = "рекуест-типе" валуе = "оптион-тхрее"> лабел фор = "оптион-тхрее"> опција 3 / лабел> бр> / фиелдсет > фиелдсет> легенд> Тимелине: / легенд> инпут ид = "оне-монтх" типе = "радио" наме = "рекуест-тимелине" валуе = "оне-монтх"> лабел фор = "оне-монтх"> 1 месец / лабел> бр> инпут ид = "један-три месеца" типе = "радио" наме = "рекуест- тимелине" валуе = "оне-тхрее-монтхс"> лабел фор = "један месец"> 1-3 месеца / лабел> бр> инпут ид = "четири плус месеца" типе = "радио" наме = "рекуест- тимелине" валуе = "фоур-плус-монтхс"> лабел фор = "фоур-плус-монтхс"> 4+ месеца / лабел> бр> / фиелдсет> бр> лабел фор = "рекуест-будгет"> Информације о буџету / лабел> бр> тектареа ид = "рекуест-будгет" наме = "рекуест-будгет-тект" редови = "10" цолс = "30"> / тектареа> бр> лабел фор = "рекуест-десцриптион"> Опис пројекта / лабел> бр> тектареа ид = "рекуест-десцриптион" наме = "рекуест- десцриптион-тект" редови = "10" цолс = "30"> / тектареа > бр> ознака за = "рекуест-референце"> Референца / ознака> бр> тектареа ид = "рекуест-референце" наме = "рекуест-референце- тект" редови = "10" цолс = "30"> / тектареа> бр > инпут типе = "субмит" валуе = "Субмит"> / форм>

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

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

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

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

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

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

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

- Како можемо помоћи? + *% како можемо да помогнемо - сет ареас = варСуре, да ли вам смета ако поставим неколико питања? + *% сигуран да ли вам смета ако поставим неколико питања - Колико брзо треба да започнем овај захтев? + *% колико брзо треба да започнем овај захтев - постави када = варМожете ли да ми оквирно представите свој буџет? + *% да ли можете да ми оквирно представите свој буџет - поставите буџет = варОК, можете ли ми рећи резиме проблема који треба решити, компоненте и окружења на која се то односи или општи опис? + *% ок, можете ли ми рећи резиме проблема који треба решити, компоненте и окружења на која утиче или општи опис - сет пројецт = вар. Такође, ко вас је упутио на нас? + *% и ко вас је упутио код нас - поставите реферал = варгреат ево шта сам до сада добио: н Потребне услуге: добити подручја> н Потребно је започети: добити када> н Груби буџет: добити буџет> н О вашем пројекту: преузмите пројекат> н Навели: добити препоруку> н и ускоро ћемо ступити у контакт да ли још нешто могу да вам помогнем данас? позив> унос добити подручја> добити када> добити прорачун> добити пројекат> добити реферал> / позив>

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

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

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

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

> унос објекта јавасцрипт вар хттп = нев КСМЛХттпРекуест (); вар а = рс.гетУсервар (рс.цуррентУсер (), "подручја"); вар б = рс.гетУсервар (рс.цуррентУсер (), "када"); вар ц = рс.гетУсервар (рс.цуррентУсер (), "буџет"); вар д = рс.гетУсервар (рс.цуррентУсер (), "пројекат"); вар е = рс.гетУсервар (рс.цуррентУсер (), "реферал"); вар урл = "хттп: // лоцалхост: 3000 / сенд"; вар парамс = "ареас =" + а + "& вхен =" + б + "& будгет =" + ц + "& про јецт =" + д + "& реферал =" + е; цонсоле.лог (парамс); хттп.опен ("ПОСТ", урл, труе); хттп.сетРекуестХеадер („Цонтент-типе“, „апплицатион / к- ввв-форм-урленцодед“); хттп.сетРекуестХеадер ("Веза", "затвори"); хттп.онреадистатецханге = фунцтион () {// Позовите функцију када се стање промени. иф (хттп.реадиСтате == 4 && хттп.статус == 200) {алерт (хттп.респонсеТект); }} хттп.сенд (парамс); објект

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

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

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

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

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

Фасцинантни Чланци
6 најбољих дигиталних уметничких алата 2017. године до сада
Даље

6 најбољих дигиталних уметничких алата 2017. године до сада

Увек је узбудљиво видети како се нови дигитални уметнички алати појављују на тржишту. Али 2017. осећа се као да је у ваздуху нешто посебно посебно.Тренутно, технологије спајања појачавају софтвер за д...
10 ПИТАЊА: Како је Гавин Ротхери створио иконски дизајн за Моон
Даље

10 ПИТАЊА: Како је Гавин Ротхери створио иконски дизајн за Моон

Такође је радио на најпродаванијој франшизи игара, Гранд Тхефт Ауто. Овде говори о томе како се све догодило и шта се спрема за будућност ...Некад сам био илустратор. Првобитно док сам дипломирао, црт...
Веризон телефонске понуде: Најбоље понуде у мају 2021
Даље

Веризон телефонске понуде: Најбоље понуде у мају 2021

ЈУМП ТО: иПхоне понуде Андроид понуде Бесплатни телефони Надоградње и планови Пређите на најбоље Веризон телефонске понуде01. иПхоне понуде 02. Андроид понуде 03. Бесплатни телефони 04. Надоградње и ...