Как да изградим интерфейс за чат бот

В средата на 2000-те виртуални агенти и чат-ботове за обслужване на клиенти получиха много възхищение, въпреки че не бяха много разговорни и под капака те бяха просто съставени от обмен на данни с уеб сървъри.

В днешно време, въпреки че съществуват огромен брой примери за „слаб ИИ“ (включително Siri, Alexa, уеб търсачки, автоматизирани преводачи и разпознаване на лица) и други теми като отзивчив уеб дизайн са в центъра на вниманието, чат ботовете все още предизвикват раздвижване. При големи инвестиции от големи компании остават много възможности за хакване на разговорните интерфейси на бъдещето.



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



По същество ние подобряваме потребителски опит да се чувствате по-естествено, като да разговаряте с експерт или приятел, вместо насочване и кликване в уеб браузъра или мобилни жестове. Целта е чрез предоставяне на съпричастни, контекстуални отговори, тази технология да се вгради директно в живота на хората.

Гледайте видеоклипа по-долу или прочетете нататък, за да откриете практически начин за проектиране и изграждане на чат бот, базиран на реално приложение за приемане на проекти в практиката за проектиране на услуги.



01. Задайте личност

Важно е да се уверите, че личността на чатбота отразява компанията, която представлява

Важно е да се уверите, че личността на чатбота отразява компанията, която представлява

Тъй като тази практика обслужва над 110 000 членове в световен мащаб, целта беше да се осигури бърз, удобен и естествен интерфейс, чрез който вътрешните заинтересовани страни да могат да поискат ефективни цифрови услуги, вместо да се налага да попълват объркващи формуляри.

Първата стъпка беше да се установи личността на чатбота, тъй като това би представлявало гласа на екипа за проектиране на услуги пред заинтересованите страни. Ние надграждахме върху основната работа на Aarron Walter дизайнерски хора . Това до голяма степен помогна на нашия екип да развие личностните черти на бота, които след това определиха съобщенията за поздрави, грешки и обратна връзка от потребителите.



Това е деликатен етап, тъй като влияе върху начина, по който се възприема организацията. За да сме сигурни, че разполагаме с възможно най-много информация, незабавно организирахме семинари на заинтересованите страни, за да постигнем подходяща личност, цвят, типография, изображения и поток на потребителя, когато се ангажираме с бота.

След като получихме всички необходими одобрения - включително търсенето на юрисконсулт - ние се заехме да преобразуваме архаични формуляри за заявки в поредица от въпроси и назад, имитиращи разговор между заинтересованите страни и представител на нашия екип за дизайнерски услуги.

02. Използвайте RiveScript

Този прост скриптов език предоставя всичко необходимо за проектиране и изграждане на POC на chatbot

Този прост скриптов език предоставя всичко необходимо за проектиране и изграждане на POC на chatbot

Знаехме, че не искаме да навлизаме прекалено дълбоко в езика за маркиране на AI за частта за обработка - просто ни трябваше достатъчно, за да започнем изживяването.

RiveScript е прост API на chatbot, който е достатъчно лесен за научаване и достатъчен за нашите нужди. В рамките на няколко дни имахме логиката да приемем заявка за проект от бота и да я анализираме с достатъчно бизнес логика, за да я валидираме и категоризираме, за да може да бъде изпратена чрез JSON REST услуги до съответната вътрешна опашка за задания на проекта.

За да накарате този основен чатбот да работи, се насочете към RiveScript репо , клонирайте го и инсталирайте всички стандартни зависимости на Node. В репото можете също да усетите вкуса на взаимодействията, които можете да добавите с различните примерни фрагменти.

След това стартирайте папката за уеб клиент, която превръща бота в уеб страница чрез стартиране на основен сървър на Grunt. На този етап можете да подобрите преживяването според вашите нужди.

03. Генерирайте мозъка на вашия бот

Следващата стъпка е да генерираме „мозъка“ на нашия бот. Това е посочено във файлове с разширение .RIVE и за щастие RiveScript вече се предлага с основни взаимодействия извън кутията (например въпроси като „Какво е вашето име?“, „На колко години сте?“ И „Какво е вашето любим цвят?').

Когато стартирате приложението за уеб клиент с помощта на правилната команда Node, HTML файлът е инструктиран да ги зареди .БАНКА файлове.

След това трябва да генерираме частта от мозъка на нашия чатбот, която ще се занимава с заявки за проекти. Нашата основна цел е да преобразуваме селекция от въпроси за задание за проекти в обикновен разговор.

как отменяте избора във фотошоп

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

  • Здравейте, как можем да помогнем?
  • Чудесно, колко скоро трябва да започнем?
  • Можете ли да ми дадете приблизителна представа за вашия бюджет?
  • Разкажете ми повече за вашия проект ...
  • как разбрахте за нас?

Типичен достъпен уеб формуляр ще изглежда така:

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

Budget Information

Project Description

Reference

С уеб формулярите сме добре запознати с определени модели: щракнете върху бутона Изпрати, всички данни на формуляра се изпращат на друга страница, където заявката се обработва, и след това най-вероятно се появява нахална страница Благодаря.

С chatbots сме в състояние да вземем взаимодействието при подаване на заявка и да я направим по-смислена.

04. Проектирайте глас

За да преобразуваме този формуляр в разговорен потребителски интерфейс, обслужван в уеб клиента на chatbot на RiveScript, трябва да преобразуваме информационната архитектура от твърда в флуидна; или полеви етикети в низове на потребителския интерфейс.

Нека разгледаме някои достъпни етикети на полета и свързания с тях тон на въпроса:

  • Заявка: Как можем да помогнем? Не съм сигурен? Имате ли нещо против да задам няколко въпроса?
  • Хронология: Колко скоро трябва да започнем?
  • Информация за бюджета: Можете ли да ми дадете приблизителна представа за вашия бюджет?
  • Описание на проекта: Добре, можете ли да ми кажете резюме на проблема, който трябва да бъде решен?
  • Справка: Също така, кой ви насочи към нас?

След това трябва да преобразуваме кода на уеб формуляра в AI скрипт, следвайки много научимия RiveScript логика на обработка за двупосочни разговори:

- 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. Искане за подаване

За разлика от стандартните променливи на формуляра, които се изпращат на друга страница или услуга за обработка, чатботовете могат незабавно да проверяват и изпращат информация, въведена от потребителя в прозорец за чат (или говорена), което означава, че потребителите могат също така лесно да прегледат предварително въведените стойности.

Трябваше да изпратим заявката на потребителя, въведена в потребителския интерфейс на чатбота чрез JSON REST API на външен сървър за задачи.

В RiveScript-js ние сме свободни да се възползваме от XMLHttpRequest обект да подаде заявката почти едновременно, тъй като данните се въвеждат от потребителя:

> 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. Не се страхувайте от чатбота

Скоро настоящите начини за взаимодействие с компютри за получаване на информация ще се поддадат на технология, базирана на ИИ, като чат ботове, където хората просто правят прости гласови команди, както сме виждали с технологии като Amazon Echo и Google Home.

Общността за уеб дизайн не трябва да се страхува - всички ние трябва да приемем добавената стойност на тази нова технология.

Това може да промени играта за компаниите, за които работи, като предлага напълно мащабируемо обслужване на клиентите и подобрена интелигентност на клиентите.

Тази статия първоначално е включена в нетно списание , Най-продаваното списание в света за уеб дизайнери и разработчици. Абонирайте се тук .

Свързани статии:

  • Как чат ботовете се учат - интервю с Джайлс Колборн
  • Как интелигентната мрежа ще промени взаимодействията ни
  • Как разговорните интерфейси иновации банкиране