Як створити інтерфейс ChatBot

У середині 2000-х років віртуальні агенти та служби обслуговування клієнтів отримали багато аделювання, навіть якщо вони не були дуже розмовними, а під капотом вони були просто складатися з обмінів даних з веб-серверами.

На сьогоднішній день, навіть якщо існує величезна кількість прикладів "слабкого АІ" (включаючи Siri, Alexa, веб-пошукові системи, автоматизовані перекладачі та розпізнавання обличчя) та інші теми, такі як Реактивний веб-дизайн Шукають, чатботи все ще викликають перемішування. З великими інвестиціями з великих компаній залишаються безліч можливостей зламати розмовні інтерфейси майбутнього.

• Як спроектувати досвід ChatBot

Іноді вони отримують погану репутацію, але ChatBots можуть бути корисними. Вони не повинні відчувати себе як основна заміна стандартної веб-форми, де користувач заповнює поля вводу та чекає перевірки - вони можуть забезпечити розмовний досвід.

По суті, ми вдосконалюємо досвід користувача Щоб відчувати себе більш природним, як розмовляти з експертом або другом, замість веб-браузера точками та кліками або мобільними жестами. Метою є те, що, надаючи емпатичні, контекстні відповіді, ця технологія стане вбудованою безпосередньо в житті людей.

Перегляньте відео нижче або прочитайте, щоб відкрити практичний спосіб розробки та побудувати Chatbot, заснований на реальному застосуванні проектів у практиці дизайну сервісу.

01. Встановіть особистість

Оскільки ця практика обслуговує понад 110 000 членів у всьому світі, метою було забезпечити швидкий, зручний та природний інтерфейс, завдяки якому внутрішні зацікавлені сторони могли б вимагати ефективні цифрові послуги, а не заповнювати заплутані форми.

Першим кроком було встановлення особистості Chatbot, оскільки це буде представляти голос команди дизайну послуг своїм зацікавленим сторонам. Ми побудували на головній роботі Харрон Вальтера Дизайн особистості . Це дуже допомагало нашій команді розробити риси особистості бота, які потім визначали повідомлення для привітання, помилок та відгуків користувачів.

Це делікатний етап, оскільки це впливає, як сприймається організація. Щоб переконатися, що ми мали якомога більше інформації, ми негайно встановили семінари зацікавлених сторін, щоб залучити відповідну особистість, колір, типографіку, образи та потік користувача при занятті з ботом.

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

02. Використовуйте Rivescript

Ми знали, що ми не хотіли отримати занадто глибоко в мову розмітки AI для обробки частини - ми просто потребували достатньо, щоб стрибати - запустити досвід.

Resivescript - це простий API Chatbot, який легко навчитися і виставити для наших потреб. Протягом декількох днів ми мали логіку, щоб прийняти запит на проект з бота, а також розібрати його достатньою діловою логікою, щоб перевірити та класифікувати його, тому його можна було надіслати через послуги JSON REST до відповідної черги завдань внутрішнього проекту.

Щоб отримати цей основний робочий чатбот, голова до Rivescript Repo , клон і встановіть всі стандартні залежності вузлів. У репо ви також можете отримати смак взаємодій, які ви можете додати з різними прикладами фрагментів.

Далі запустіть папку Web-клієнта, яка перетворює бот на веб-сторінку, запустивши основний сервер Grunt. На цьому етапі ви можете покращити досвід відповідно до ваших потреб.

03. Створіть мозок вашого бота

Наступним кроком є ​​створення "мозку" нашого бота. Це вказується у файлах з розширенням .Rive, а на щастя, який вже є основними взаємодіями з коробки (наприклад, питання, такі як "Яке ваше ім'я?", Скільки вам років? улюблений колір? ').

Коли ви ініціюєте додаток Web-клієнта за допомогою відповідної команди вузла, файл HTML доручено завантажувати їх Випуску файли.

Далі ми повинні генерувати частину мозку Нашого Чатбота, який буде мати справу з запитами проекту. Наша головна мета полягає в тому, щоб перетворити вибір заданих задач проекту у звичайну розмову.

Отже, наприклад:

• Привіт, як ми можемо допомогти?
• Великий, як скоро ми повинні почати?
• Чи можете ви дати мені грубу ідею вашого бюджету?
• Розкажіть мені більше про ваш проект ...
• Як ви дізналися про нас?

Типова доступна веб-форма виглядатиме так:

 & lt; Форма дії = "" & gt;
& lt; fieldset & gt;
& lt; Legend & GT; Тип запиту: & lt; / Legend & GT;
& lt; input id = "опція-один" тип = "радіо" name = "тип запиту" value = "опція-один" & gt;
& lt; label for = "опція-один" & gt; варіант 1 & lt; / label & gt; & lt; br & gt;
& lt; input id = "option-two" type = "радіо" name = "тип запиту" value = "опція-два" & gt;
& lt; етикетка для = "опція-два" & gt; опція 2 & lt; / label & gt; & lt; br & gt;
& lt; invent id = "опція-три" type = "радіо" name = "type type value =" опція-три "& gt;
& lt; label for = "опція-три" & gt; опція 3 & lt; / label & gt; & lt; br & gt;
& lt; / fieldset & gt;
& lt; fieldset & gt;
& lt; legend & gt; хронологія: & lt; / Legend & GT;
& lt; Вхідний ідентифікатор = "одномісячний" тип = "радіо" name = "запит-хронологія" значення = "одномісячний" & gt;
& lt; label for = "один місяць" & gt; 1 місяць & lt; / label & gt; & lt; br & gt;
& lt; Вхідний ідентифікатор = "один-три місяці" тип = "радіо" name = "запит- шкалу" значення = "один-три місяці" & gt;
& lt; label for = "один місяць" & gt; 1-3 місяці & lt; / label & gt; & lt; br & gt;
& lt; Вхідний ідентифікатор = "Four-Plus-Meuty" Type = "Radio" Name = "Запит- шкалу" Значення = "Чотири плюс-місяці" & GT;
& lt; етикетка для = "чотири-п'ять місяців" & gt; 4+ місяців & lt; / label & gt; & lt; br & gt; & lt; / fieldset & gt;
& lt; br & gt;
& lt; етикетка для = "запит-бюджет" & gt; бюджетна інформація & lt; / label & gt; & lt; br & gt; & lt; textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
& lt; етикетка для = "запит-опис" & gt; проект Опис & lt; / label & gt; & lt; br & gt;
& lt; textarea id = "запит-опис" name = "запит - опис-текст" рядки = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
& lt; label for = "довідник запиту" & gt; посилання & lt; / label & gt; & lt; br & gt; & lt; textarea id = "посилання на запит" name = "revice-text" rows = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
 & lt; Вхідний тип = "Надіслати" value = "Надіслати" & gt;
& lt; / form & gt; 

За допомогою веб-форм ми дуже знайомі з певними моделями: ви натискаєте кнопку "Надіслати", всі дані форми надсилаються на іншу сторінку, де обробляється запит, а потім, швидше за все, нахабна сторінка подяки вискочить.

З чатами, ми можемо взяти взаємодію подання запиту та зробити це більш значущим.

04. Дизайн голосу

Для того, щоб перетворити цю форму до розмовного інтерфейсу, який подається в веб-клієнті Rivescript CatBot, нам потрібно перетворити інформаційну архітектуру від жорсткого до рідини; або польові етикетки в рядки інтерфейсу.

Давайте розглянемо деякі доступні польові етикетки та їх відповідний тонус запитання:

• Запит: Як ми можемо допомогти? Не впевнений? Ви не заперечуєте, якщо я запитую кілька запитань?
• Хронологія: Як скоро нам потрібно почати?
• Бюджетна інформація: Чи можете ви дати мені грубу ідею вашого бюджету?
• Опис проекту: Добре, ви можете сказати мені резюме проблеми, яку потрібно вирішити?
• Довідка: Також, хто посилався на нас?

Далі нам потрібно перетворити код веб-форми в сценарій AI, дотримуючись дуже вивченню Rivescries Обробка логіки для двостороннього розмови:

- Як ми можемо допомогти?

+ *
% Як ми можемо допомогти
- & lt; встановити області = & lt; var & gt; & gt; звичайно, ви не заперечуєте, якщо я запитую кілька питань?

+ *
Звичайно, ви не заперечуєте, якщо я запитую пару питань - як скоро мені потрібно почати цей запит?

+ *
% Як скоро мені потрібно почати цей запит
- & lt; встановити, коли = & lt; var & gt; & gt; ви можете дати мені грубу ідею вашого бюджету?

+ *
% Чи можете ви дати мені грубу ідею вашого бюджету
- & lt; встановити бюджет = & lt; var & gt; & gt; ok, ви можете сказати мені резюме проблеми, яка буде вирішена, компоненти та середовища, або загальний опис?

+ *
% OK Чи можете ви сказати мені короткий виклад проблеми, щоб бути вирішеними компонентами та навколишнім середовищем або загальним описом
- & lt; встановити проект = & lt; var & gt; & gt; також, хто посилався на нас?

+ *
% також хто посилав вас на нас
- & lt; встановити реферал = & lt; var & gt; & gt; великий ось те, що я отримав досі: \ n необхідні послуги: & lt; отримати області & gt; \ n потрібно запустити: & lt; отримати, коли & gt; \ n грубий бюджет: & lt; отримати бюджет & gt; \ n Про ваш проект: & lt; Отримати проект & gt; \ n згадується: & lt; отримати реферал & gt; \ n І буде зв'язатися незабаром, чи є ще щось, що я можу вам допомогти сьогодні? & lt; call & gt; споживання & lt; отримати області & gt; & lt; отримати, коли & gt; & lt; отримати бюджет & gt; & lt; отримати проект & gt; & lt; get reffal & gt; & lt; / call & gt; 

05. Подання запиту

На відміну від стандартної форми змінних, що надсилаються на іншу сторінку або послугу, щоб процес обробки, ChatBots може перевірити та подавати інформацію, введену користувачем у вікні чату (або розмовляти) негайно, що означає, що користувачі також можуть переглядати раніше введені значення.

Нам потрібно було надіслати запит користувача, введений в UI CHATBOT за допомогою API JSON REST до зовнішнього сервера завдань проекту.

В Rivescript-JS Ми вільно використовуємо Xmlhttprequest Об'єкт, щоб подати запит майже одночасно, оскільки дані вводяться користувачем:

 & gt; Об'єкт споживання JavaScript
 var http = новий 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 = "області =" + a + "& amp; коли =" + b + "& amp; budget =" + c + "& amp; project =" + d + "& amp; referal =" + e;
 console.log (парами);

 http.open ("post", url, true);

 http.setrequestheader ("вміст-тип", "застосування / x- www-form-urlencoded");
 http.setrequestheader ("підключення", "закриття");
 http.onreadystatechange = Функція () {// викликати функцію, коли стан змінюється.
  if (http.readystate == 4 & amp; & amp; http.status == 200) {
    оповіщення (http.responsetext);
  }
 }
 http.send (парами);

& lt; Об'єкт 

06. Не бійтеся чабного

Незабаром існуючі способи взаємодії з комп'ютерами для отримання інформації нададуть технологію AI, як ChatBots, де люди просто роблять прості голосові команди, як ми бачили з TECH, такими як Amazon Echo та Google Home.

Співтовариство веб-дизайну не боїться - ми всі повинні обіймати додаткову вартість цієї нової технології.

Це може бути гра-чейнджер для компаній, які він працює, пропонуючи повністю масштабовану службу обслуговування клієнтів та покращує інтелект клієнтів.

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

Пов'язані статті:

• Як навчаються ChatBots - інтерв'ю з Giles Colborne
• Як інтелектуальна веб-сайт змінить наші взаємодії
• Як розмовні інтерфейси є інноваційними банківськими