Съдържание
- 01. Задайте личност
- 02. Използвайте RiveScript
- 03. Генерирайте мозъка на вашия бот
- 04. Проектирайте глас
- 05. Искане за подаване
- 06. Не се страхувайте от чатбота
В средата на 2000-те години виртуалните агенти и чат-ботовете за обслужване на клиенти получиха много възхищение, въпреки че не бяха много разговорни и под капака те бяха просто съставени от обмен на данни с уеб сървъри.
В днешно време, въпреки че съществуват огромен брой примери за „слаб ИИ“ (включително Siri, Alexa, уеб търсачки, автоматизирани преводачи и разпознаване на лица) и други теми като отзивчивия уеб дизайн, все още предизвикват раздвижване. . С големи инвестиции от големи компании остават много възможности за хакване на разговорните интерфейси на бъдещето.
- Как да проектираме чатбот изживяване
Понякога получават лоша репутация, но чатботовете могат да бъдат полезни. Не е нужно да се чувстват като основен заместител на стандартен уеб формуляр, където потребителят попълва полета за въвеждане и чака проверка - те могат да осигурят разговорно изживяване.
По същество подобряваме потребителското изживяване, за да се чувстваме по-естествено, като например разговор с експерт или приятел, вместо насочване и кликване в уеб браузъра или мобилни жестове. Целта е чрез предоставяне на съпричастни, контекстуални отговори, тази технология да се вгради директно в живота на хората.
Гледайте видеоклипа по-долу или прочетете нататък, за да откриете практически начин за проектиране и изграждане на чат бот, базиран на реално приложение за приемане на проекти в практиката на проектиране на услуги.
01. Задайте личност
Тъй като тази практика обслужва над 110 000 членове в световен мащаб, целта беше да се осигури бърз, удобен и естествен интерфейс, чрез който вътрешните заинтересовани страни да могат да поискат ефективни цифрови услуги, вместо да се налага да попълват объркващи формуляри.
Първата стъпка беше да се установи личността на чатбота, тъй като това би представлявало гласа на екипа за проектиране на услуги пред заинтересованите страни. Ние надграждахме върху основната работа на Aarron Walter върху дизайнерските персони. Това до голяма степен помогна на нашия екип да развие личностните черти на бота, които след това определиха съобщенията за поздрави, грешки и обратна връзка от потребителите.
Това е деликатен етап, тъй като влияе върху начина, по който се възприема организацията. За да сме сигурни, че разполагаме с възможно най-много информация, незабавно организирахме семинари на заинтересованите страни, за да закрепим подходящата личност, цвят, типография, изображения и поток на потребителя, когато се ангажираме с бота.
След като получихме всички необходими одобрения - включително търсенето на юрисконсулт - ние се заехме да преобразуваме архаични формуляри за заявки в поредица от въпроси и назад, имитиращи разговор между заинтересованите страни и представител на нашия екип за дизайнерски услуги.
02. Използвайте RiveScript
Знаехме, че не искаме да навлизаме твърде навътре в езика за маркиране на AI за частта за обработка - просто ни трябваше достатъчно, за да започнем изживяването.
RiveScript е прост API на chatbot, който е достатъчно лесен за научаване и достатъчен за нашите нужди. В рамките на няколко дни имахме логиката да приемем заявка за проект от бота и да я анализираме с достатъчно бизнес логика, за да я валидираме и категоризираме, за да може да бъде изпратена чрез JSON REST услуги до съответната вътрешна опашка за задания на проекта.
За да накарате този основен чатбот да работи, насочете се към репозитория на RiveScript, клонирайте го и инсталирайте всички стандартни зависимости на Node. В репото можете също да усетите вкуса на взаимодействията, които можете да добавите с различните примерни фрагменти.
След това стартирайте папката за уеб клиент, която превръща бота в уеб страница чрез стартиране на основен сървър на Grunt. На този етап можете да подобрите преживяването според вашите нужди.
03. Генерирайте мозъка на вашия бот
Следващата стъпка е да генерираме „мозъка“ на нашия бот. Това е посочено във файлове с разширение .RIVE и за щастие RiveScript вече се предлага с основни взаимодействия извън кутията (например въпроси като „Какво е вашето име?“, „На колко години сте?“ И „Какво е вашето любим цвят?').
Когато стартирате приложението за уеб клиент с помощта на правилната команда Node, HTML файлът е инструктиран да ги зареди.RIVE файлове.
След това трябва да генерираме частта от мозъка на нашия чатбот, която ще се занимава с заявки за проекти. Нашата основна цел е да преобразуваме селекция от задаващите въпроси за проекти в обикновен разговор.
Така например:
- Здравейте, как можем да помогнем?
- Чудесно, колко скоро трябва да започнем?
- Можете ли да ми дадете приблизителна представа за вашия бюджет?
- Разкажете ми повече за вашия проект ...
- как разбрахте за нас?
Типичен достъпен уеб формуляр ще изглежда така:
form action = ""> fieldset> legend> Request Type: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> опция 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> опция 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 месец / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 месеца / label> br> input id = "четири плюс месеца" type = "radio" name = "request- timeline" value = "four-plus-months"> label for = "four-plus-months"> 4+ месеца / label> br> / fieldset> br> label for = "request-budget"> Информация за бюджета / label> br> textarea id = "request-budget" name = "request-budget-text" редове = "10" cols = "30"> / textarea> br> label for = "request-description"> Описание на проекта / етикет> br> textarea id = "request-description" name = "request- description-text" редове = "10" cols = "30"> / textarea > br> етикет за = "request-reference"> Справка / етикет> br> textarea id = "request-reference" name = "request-reference- text" redo = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>
С уеб формулярите сме добре запознати с определени модели: щракнете върху бутона Изпращане, всички данни на формуляра се изпращат на друга страница, където се обработва заявката, и след това най-вероятно се появява нахална страница Благодаря.
С chatbots сме в състояние да вземем взаимодействието при подаване на заявка и да я направим по-смислена.
04. Проектирайте глас
За да преобразуваме този формуляр в разговорен потребителски интерфейс, обслужван в уеб клиент за чатбот на RiveScript, трябва да преобразуваме информационната архитектура от твърда в флуидна; или полеви етикети в низове на потребителския интерфейс.
Нека разгледаме някои етикети на достъпни полета и свързания с тях тон на въпроса:
- Заявка: Как можем да помогнем? Не съм сигурен? Имате ли нещо против да задам няколко въпроса?
- Хронология: Колко скоро трябва да започнем?
- Информация за бюджета: Можете ли да ми дадете приблизителна представа за вашия бюджет?
- Описание на проекта: Добре, можете ли да ми кажете резюме на проблема, който трябва да бъде решен?
- Справка: Също така, кой ви насочи към нас?
След това трябва да преобразуваме кода на уеб формуляра в AI скрипт, следвайки много научимата логика за обработка на RiveScript за двупосочни разговори:
- Как можем да помогнем? + *% как можем да помогнем - задайте области = varSure, Имате ли нещо против, ако задам няколко въпроса? + *% сигурен ли сте против, ако задам няколко въпроса - Колко скоро трябва да започна тази заявка? + *% колко скоро трябва да започна тази заявка - задайте кога = var Можете ли да ми дадете приблизителна представа за вашия бюджет? + *% можете ли да ми дадете приблизителна представа за вашия бюджет - задайте бюджет = varOK, можете ли да ми кажете резюме на проблема, който трябва да бъде решен, засегнатите компоненти и среди или цялостно описание? + *% добре, можете ли да ми кажете резюме на проблема, който трябва да бъде решен, засегнати компоненти и среди или цялостно описание - set project = varСъщо така, кой ви насочи към нас? + *% също кой ви е насочил към нас - задайте препоръка = vargreat ето какво получих досега: n Необходими услуги: получаване на области> n Трябва да започнете: вземете кога> n Груб бюджет: вземете бюджет> n Относно вашия проект: вземете проект> n Препоръчано от: получите препоръка> n и скоро ще се свържем има ли нещо друго, с което мога да ви помогна днес? обаждане> области за получаване на прием> получаване при> получаване на бюджет> получаване на проект> получаване на препоръка> / обаждане>
05. Искане за подаване
За разлика от стандартните променливи на формуляра, които се изпращат на друга страница или услуга за обработка, чатботовете могат незабавно да проверяват и подават информация, въведена от потребителя в прозорец за чат (или говорена), което означава, че потребителите могат също така лесно да прегледат предварително въведените стойности.
Трябваше да изпратим заявката на потребителя, въведена в потребителския интерфейс на чатбота чрез JSON REST API на външен сървър за задачи.
В RiveScript-js сме свободни да използваме XMLHttpRequest обект да подаде заявката почти едновременно, тъй като данните се въвеждат от потребителя:
> прием на обект javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "области"); var b = rs.getUservar (rs.currentUser (), "когато"); var c = rs.getUservar (rs.currentUser (), "бюджет"); var d = rs.getUservar (rs.currentUser (), "проект"); var e = rs.getUservar (rs.currentUser (), "препоръка"); var url = "http: // localhost: 3000 / send"; var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (параметри); http.open ("POST", url, true); http.setRequestHeader ("Тип съдържание", "application / x- www-form-urlencoded"); http.setRequestHeader ("Връзка", "затваряне"); http.onreadystatechange = function () {// Извикайте функция, когато състоянието се промени. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (параметри); обект
06. Не се страхувайте от чатбота
Скоро настоящите начини за взаимодействие с компютри за получаване на информация ще се предадат на технология, базирана на AI, като чат ботове, където хората просто правят прости гласови команди, както сме виждали с технологии като Amazon Echo и Google Home.
Общността за уеб дизайн не трябва да се страхува - всички ние трябва да възприемем добавената стойност на тази нова технология.
Това може да промени играта за компаниите, за които работи, като предлага напълно мащабируемо обслужване на клиентите и подобрена интелигентност на клиентите.
Тази статия първоначално е включена внетно списание, най-продаваното списание в света за уеб дизайнери и разработчици. Абонирайте се тук.
