Как мы подошли к созданию входных элементов пользовательского интерфейса для нашей платформы чат-ботов

Опубликовано: 2017-01-01

Чат-боты в том виде, в каком они существуют сегодня, не обладают достаточными возможностями для понимания естественного человеческого языка. И это одна из основных причин, почему большинство приложений для обмена сообщениями (Messenger, Kik и т. д.) прибегают к сочетанию графического и текстового пользовательского интерфейса в своих бот-платформах — подумайте о кнопках, каруселях, карточках изображений, а не только текстовых ответах.

Мы в Tars используем браузер в качестве платформы для создания собственного интерфейса чата для работы ботов. И это дает нам полную свободу выбора всех компонентов, которые у нас есть. Если вы пробовали какой-либо из наших ботов (если вы еще не пробовали, сначала попробуйте один из них здесь и здесь), вы должны знать, что мы решительно поддерживаем графический интерфейс + текстовый подход. В рамках этого мыслительного процесса мы создали ряд настраиваемых клавиатурных вводов в нашем внешнем интерфейсе, чтобы облегчить различные взаимодействия с пользователем и ситуации.

Messenger, Kik, Telegram — это огромные платформы, на которых разработчики ежедневно запускают сотни ботов. Я все еще чувствую, что эти платформы обмена сообщениями недостаточно сделали для интерфейсных компонентов, чтобы помочь производителю создать обогащающее взаимодействие с пользователем.

И именно поэтому я хотел больше рассказать о том, как мы создавали каждый пользовательский интерфейс, почему каждый из них имеет смысл и как их отсутствие прямо сейчас портит взаимодействие с пользователем.

Итак, приступим:

Скроллер даты и времени

Подумайте о сценарии, в котором вам нужно спросить пользователя, когда он хотел бы записаться на прием? Одна и та же информация может быть представлена ​​несколькими способами.

25 ноября, 25 ноября, 25 ноября, 25/11, 25–11–2016, 25/11/16 — все они по сути означают одно и то же, но машине становится трудно понять эти данные.

Вот почему мы включили прокрутку даты и времени, где пользователи могут вращать циферблаты и выбирать дату/время.

чат-бот1

Я до сих пор не видел, чтобы какая-либо другая платформа обмена сообщениями предоставляла такой пользовательский интерфейс, и я считаю, что это необходимо, если бот запрашивает дату или время у пользователя.

Вертикальные кнопки

чат-бот2 Думайте об этом как о множественных вариантах выбора в форме, где у вас есть ограниченное количество вещей на выбор. Нажатие на кнопки ускоряет взаимодействие, а также ограничивает объем разговора.

Подход на основе кнопок имеет смысл, когда вам нужно выбирать между вегетарианской и невегетарианской пиццей, но это может быть не лучший пользовательский интерфейс, если у вас есть 100 страховых полисов на выбор.

Что еще можно сделать с вертикальными кнопками?

  • добавьте изображение рядом с каждым вариантом, чтобы сделать его более привлекательным.
  • вы можете либо позволить пользователю ответить на одно нажатие, либо заставить его нажать «Отправить» после того, как он нажмет на любой из вариантов. Последнее помогает повторно подтвердить, не выбрал ли пользователь конкретную опцию по ошибке. Нет возможности вернуться в поток чата, и поэтому эта настройка имеет смысл.
  • добавьте меню быстрой информации к каждому параметру, чтобы предоставить подробную информацию и упростить процесс принятия решений.

чат-бот3

Не все знают разницу между Advance и Basic Facial. Добавление подробностей о том, что все включено, и ценах, делает пользовательский опыт лучше.

Еще одна важная вещь, о которой следует помнить при использовании пользовательского интерфейса кнопок, — это правильно сформулировать вопрос. Как объясняет Лешек в своей статье здесь, лучше задать вопрос таким образом, чтобы ограничить диапазон вариантов и установить контекст, вместо того, чтобы задавать очень открытый вопрос.

чат-бот4

Ограничение пользовательского ввода

Я считаю, что это одна из лучших вещей, которые мы сделали с нашим интерфейсом чата. Всякий раз, когда мы предоставляем графический интерфейс ввода (кнопки, карусели и т. д.), мы не позволяем пользователю вводить что-либо в тексте.

Зачем это делать? Потому что пользователь может ввести что угодно, а ваш бот к этому не готов. Пока вы не окажетесь там, лучше быть простым и ограниченным, чем прерывать разговор.

Рекомендуется для вас:

Как Metaverse изменит индийскую автомобильную промышленность

Как Metaverse изменит индийскую автомобильную промышленность

Что означает положение о борьбе со спекуляцией для индийских стартапов?

Что означает положение о борьбе со спекуляцией для индийских стартапов?

Как стартапы Edtech помогают повышать квалификацию и готовят рабочую силу к будущему

Как стартапы Edtech помогают повысить квалификацию рабочей силы Индии и стать готовыми к будущему ...

Технологические акции нового века на этой неделе: проблемы Zomato продолжаются, EaseMyTrip публикует...

Индийские стартапы срезают путь в погоне за финансированием

Индийские стартапы срезают путь в погоне за финансированием

Сообщается, что стартап цифрового маркетинга Logicserve Digital привлек 80 крор индийских рупий в качестве финансирования от альтернативной фирмы по управлению активами Florintree Advisors.

Цифровая маркетинговая платформа Logicserve Bags Финансирование 80 CR INR, ребрендинг как LS Dig...

Что мы делаем, так это:

чат-бот5

Это наш интерфейс чата

И вот что происходит, когда у вас нет чего-то подобного:

чат-бот6

Это Facebook Messenger, который не разрешает ограниченный ввод текста, когда у вас есть быстрые ответы.

Кнопка «Готово и пройти»

Это два очень маленьких нюанса, которые мы в итоге включили, потому что мы всегда думали о скриптовых чат-ботах как об эволюции форм.

Когда вы отправляете сообщение по своему адресу или даете подробный отзыв через интерфейс чата, обычное поведение заключается в том, чтобы нажать кнопку отправки после написания нескольких слов, и весь ответ в конечном итоге распределяется на 3–4 утверждения. С помощью кнопки «Готово» вы можете продолжать печатать и нажимать ее после того, как дали полный ответ.

Если у вас нет такой опции, следующее сообщение машины придет после самого первого экземпляра, что приведет к неполным ответам.

чат-бот7

Имейте кнопку «Готово», когда вам нужно выбрать несколько вариантов или иметь многострочные ответы.

Также могут быть случаи, когда пользователь хочет пропустить вопрос, и для этого у нас есть кнопка «Пропустить» вместо кнопки «Отправить». Как только пользователь начинает печатать, кнопка «Пропустить» превращается в кнопку «Отправить».

чат-бот8

Не хотите давать свой адрес электронной почты? Нажмите «Пропустить», чтобы пропустить вопрос.

Предложения автозаполнения

Это похоже на функцию автозаполнения в поиске Google, когда вы начинаете печатать, и он предлагает возможные варианты. Это становится особенно полезным, когда у вас есть длинный список опций, а наличие вертикальных кнопок нецелесообразно. Подумайте о длинном списке населенных пунктов, городов, моделей автомобилей и т. д.

чат-бот9

Звезды и лайки

Особенно полезно, когда вы запрашиваете отзыв или опыт пользователя, и ответ носит более качественный характер. И вы даже можете настроить значки в виде звездочек, лайков, сердечек, смайликов.

чат-бот10

Карточки изображений

Это полезно, когда вам нужно продемонстрировать несколько фрагментов информации о каждом элементе за один раз. Это может быть бургер в процессе заказа еды или рубашка в потоке покупок. Все карты сложены друг против друга, и вы можете пролистать, чтобы просмотреть все варианты.

Этот элемент пользовательского интерфейса состоит из 4 частей — изображения, заголовка, описания и нижнего колонтитула. Вы можете использовать их по-разному в зависимости от того, что вы хотите там отобразить.

чат-бот11

Если вы хотите протестировать все эти входные элементы пользовательского интерфейса, вот ссылка на чат-бота, который проведет вас по одному за раз.

Чат, являющийся минималистичным интерфейсом с просто пузырьками и текстовым полем, не дает больших возможностей. И я считаю, что нам придется переосмыслить, как мы можем облегчить различные взаимодействия, используя существующие элементы и добавляя новые в интерфейс чата.

Хотелось бы узнать, экспериментировали ли вы с интерфейсом обмена сообщениями и добавляли ли в него какие-то другие классные элементы графического интерфейса?


[Это сообщение Иша Джиндала впервые появилось на Medium и воспроизведено с его разрешения.]