Чат-бот UX — советы и соображения по дизайну

Опубликовано: 2022-03-11

Дизайнеры создают графические пользовательские интерфейсы (GUI) уже более 50 лет. Однако переход к диалоговым пользовательским интерфейсам (CUI) — это выход на неизведанную территорию. CUI — это новая волна взаимодействия человека с компьютером, в которой среда меняется с графических элементов (кнопок и ссылок) на человеческое общение (эмоции и естественный язык).

Разговорные пользовательские интерфейсы часто представляют собой чат-боты — программное обеспечение, которое имитирует разговор с реальным человеком с помощью текста или голоса. Чат-ботов можно использовать для рекомендаций продуктов, бронирования билетов, заказа еды и так далее. Вместо того, чтобы нажимать кнопки на экране, чтобы найти ответ, пользователи могут просто задать боту вопрос, например: «Какие последние новости об НБА?» или «Сколько денег у меня на счету?»

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

Диалоговые интерфейсы позволяют компаниям создавать быстрые и полезные взаимодействия с клиентами (часто в большей степени, чем с приложением или веб-сайтом), и многие компании быстро внедрили чат-ботов. Согласно исследованию The Economist, 75% из более чем 200 опрошенных руководителей предприятий заявили, что ИИ будут активно внедрять в своих компаниях до 2020 года.

Чат-бот службы поддержки клиентов Burberry UX
Burberry создал бота Facebook Messenger, который обеспечивает поддержку клиентов и предлагает ответы на часто задаваемые вопросы с помощью категорий.

Два года назад я работал в банке и имел возможность погрузиться в UX-дизайн чат-ботов. Банк нанимал живых агентов для поддержки клиентов на Facebook, но решил использовать недавно запущенный API Facebook Messenger для создания чат-бота, который предлагал бы основные банковские функции, такие как расчет кредита, предложения кредитных карт, поддержка клиентов, а также отделение или банкомат. места.

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

Вот набор советов и рекомендаций для дизайнеров, которые заинтересованы в создании превосходных чат-ботов.

Совет 1: Узнайте о платформе

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

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

Дизайн чат-бота «Лимонад»
Lemonade — это страховая компания, которая настроила своего чат-бота в соответствии с фирменными рекомендациями по пользовательскому интерфейсу и конкретными вариантами использования как в своем мобильном приложении, так и на веб-сайте.

С другой стороны, чат-боты можно создавать на таких платформах, как Facebook Messenger, Slack, Kik или Telegram. Эти платформы предлагают готовые элементы, такие как открытие, предложения, платежи и заказ. Они также предоставляют (с некоторыми ограничениями) визуальные компоненты для форматирования, такие как шрифты, размеры изображений и т. д.

Например, элемент быстрого ответа Messenger Bot имеет ограничение на количество символов для кнопок ответа. Далее разговор ограничивается возможностями платформы. В таких ситуациях дизайнерам приходится более творчески подходить к словарному запасу, чем к типичным элементам дизайна, таким как размер и цвет кнопок.

Пользовательский интерфейс чат-бота быстрого ответа FB Messenger
Этот пример создан в инструменте прототипирования чат-бота Botsociety. Элементы быстрого ответа часто следуют возможностям платформы, и дизайнер соответствующим образом разрабатывает поток и язык.

Дизайнеры должны понимать возможности, ограничения и возможности платформы, над которой они работают, задолго до начала процесса проектирования. Также важно быть реалистичным и сбалансировать цели проекта с проектными ограничениями. У команды разработчиков могут быть отличные идеи для чат-бота, но если элементы пользовательского интерфейса не поддерживаются платформой, диалог не пройдет.

Наш проект чат-бота начался со смеси идей, которые очень понравились команде. Но поскольку он должен был быть создан как бот Messenger, нам пришлось исключить идеи, которые технически не работали. Как команда Scrum, мы все зашли на сайт разработчиков Messenger и погрузились в доступные функции. Мы нашли несколько вариантов создания наших потоков, которые успешно реализовали наши первоначальные идеи.

Требуются штатные UX-дизайнеры-фрилансеры из США

Совет 2: сформулируйте цель бота

Первое, что нужно сделать, приступая к любому дизайн-проекту, — это поставить перед собой цель. Это для прогноза погоды? Предлагаете одежду? Иметь дружескую беседу? Разработчики чат-ботов должны начать с определения ценности, которую чат-бот принесет конечному пользователю, и ссылаться на нее на протяжении всего процесса проектирования. Именно здесь дизайнеры UX вносят большой вклад в определение объема проекта с помощью ориентированных на пользователя методов проектирования, таких как исследования и идеи.

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

Важно помнить, что цель бота может многократно меняться на основе отзывов пользователей. Например, в 2016 году авиакомпания KLM Airlines создала чат-бота Facebook Messenger, изначально предназначенного для помощи пользователям в бронировании билетов. Со временем они расширили цель бота «проводить вас через все, что вам нужно доставить до места назначения». Бот KLM теперь помогает пользователям со всеми их потребностями в поездках, включая оформление виз и отправку напоминаний о необходимости взять с собой лекарства.

Меню приложения чат-бота KLM Messenger
Усовершенствованные элементы меню KLM предлагают гораздо больше функциональных возможностей, чем было в оригинальном дизайне бота.

Совет 3: Установите тон голоса

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

Рассмотрим реальный разговор между клиентом и агентом. Агент — это человек, который может постоянно адаптировать свой голос, язык тела и словарный запас в зависимости от поведения клиента и его ответов. С другой стороны, бот имеет предопределенные шаблоны ответов. Важно осознавать, как тон может повлиять на работу пользователя.

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

Сравнение тона голоса чат-бота разговорный UX
Чат-боты демонстрируют индивидуальность через тон голоса. Выше представлен набор различных тонов голоса из The New York Times, Spotify и PennyCat.

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

Совет 4: Создавайте пользовательские потоки, которые меняют жизнь пользователя

Чат-боты предлагают другой тип взаимодействия с веб-сайтами или мобильными приложениями. Согласно глобальному исследованию Гринберга, 80% взрослых и 91% подростков ежедневно используют приложения для обмена сообщениями. Бесспорно, общение в чате является важной частью современного человеческого взаимодействия.

Только 33% чат-ботов создаются для революционных новых вариантов использования. Многие боты решают нерелевантные варианты использования просто потому, что компании хотят следовать за волной технологий чат-ботов. Согласно опросу LivePerson, 2 из каждых 3 компаний, использующих чат-ботов, используют их (в некоторых случаях без необходимости) для услуги, которую они чаще всего используют: поддержка клиентов.

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

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

Другой пример нового опыта работы с чат-ботом был создан дизайнером Адрианом Зумбрунненом. Он разработал полностраничного чат-бота, чтобы приветствовать новых посетителей своего веб-сайта, и дал пользователям возможность связаться с ним в самом начале взаимодействия, чтобы им было легко отправить ему сообщение. Адриан сообщил, что трафик вырос на 1000%! И всего за 48 часов он получил более 250 писем от людей, которые общались с ботом.

Адриан Зумбруннен UX-дизайн чат-бота
Чат-бот Адриана Цумбруннена на личном веб-сайте исследует различные способы взаимодействия человека с компьютером.

Совет 5. Направляйте пользователей с помощью подробного UX-дизайна чат-бота

Возможности для разговора безграничны. Когда пользователи впервые приходят в чат с ботом, они могут спросить все, что хотят. Однако это может вызвать проблемы при продвижении диалога с использованием предопределенных ответов. Дизайнеры должны взять на себя ответственность и спроектировать поток использования, который проведет пользователей через намеченный разговор.

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

Например, чтобы начать беглый диалог и не отклоняться от цели бота, намерение чат-бота должно быть четко описано в приветственном сообщении.

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

Приветственное сообщение коллективного чат-бота UX
Приветственное сообщение UX Bear мгновенно помогает пользователю понять, как можно использовать бота. Кнопки пользовательского интерфейса для быстрого ответа удерживают беседу в рамках дизайна чат-бота.

При разработке банковского чат-бота от пользователя требовалось ввести денежную сумму. Когда мы запустили чат-бота, мы увидели, что все ответили немного по-разному: «20 000», «20 000», «20 000», «20 000 тл», «20 000 лир». Чтобы упростить несоответствия, нам пришлось выбирать между добавлением всех возможностей в наш язык разметки, чтобы он принимал каждую версию, или дать четкие указания о том, как пользователь должен вводить сумму.

Совет 6: готовьтесь к недоразумениям

Самая болезненная часть взаимодействия с чат-ботом — непонимание. Многие чат-боты в фоновом режиме используют расширенный NLP (обработку естественного языка), в то время как другие основаны на простой логике дерева решений. Технология чат-ботов еще не способна достаточно хорошо понимать каждый ответ пользователя, чтобы дать осмысленный ответ — независимо от того, насколько идеально написан сценарий, в сложных ситуациях он, скорее всего, не сработает.

Креативное решение — одна из самых мощных вещей, которые может сделать дизайнер. При разработке чат-бота дизайнер должен создать резервные сценарии. Якоб Нильсен, создатель «10 эвристик дизайна пользовательского интерфейса», утверждает, что «дизайнеры должны исходить из того, что пользователи не могут понять техническую терминологию, поэтому сообщения об ошибках почти всегда должны быть выражены простым языком, чтобы ничего не потерялось при переводе».

Дизайн чат-бота Fynd Messenger Bot Fail Responses
Разработчики чат-бота Fynd Messenger создали несколько ответов об ошибках, чтобы не звучать как заезженная пластинка.

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

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

Помощник Google не отвечает на UX чат-бота
Ответ Google Assistant на ошибку и быстрые ответы предлагают пользователю варианты, относящиеся к предполагаемому разговору.

Совет 7: Отслеживайте и анализируйте поведение пользователей

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

Лучший способ отслеживать данные — использовать аналитическую платформу для чат-ботов. Аналитические платформы и аналитические API, такие как Botanalytics, предоставляют информацию о том, как использовался чат-бот, где он не работал и как пользователи взаимодействовали с ним. Они также могут включать общее количество пользователей, удержание пользователей, наиболее часто используемые потоки, слова пользователей, которые чат-бот не может понять, и так далее.

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

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

Google Assistant предлагает аналогичный способ получения постоянной обратной связи. Смайлики с большим пальцем вверх и большим пальцем вниз отображаются как кнопки быстрого ответа, поэтому пользователи могут ответить в любой момент. Таким образом, если пользователь не удовлетворен ответом чат-бота, он может отправить смайлик «палец вниз» или сообщение обратной связи.

Эмоджи опроса о дизайне UX чат-бота Fynd Messenger
Смайлики обратной связи Google Assistant позволяют пользователям очень легко указать, насколько полезным они нашли ответ. Этот тип данных имеет решающее значение для улучшения работы чат-бота.

Изменение подхода к дизайну

Чат-боты появились внезапно, и маловероятно, что они исчезнут в ближайшее время.

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

• • •

Дальнейшее чтение в блоге Toptal Design:

  • Ценность дизайн-мышления в бизнесе
  • Совместное проектирование — руководство по успешному проектированию корпоративных продуктов
  • Стратегия продукта: руководство по основным концепциям и процессам
  • Карты пути клиента — что это такое и как их создать
  • Откажитесь от MVP, внедрите минимально жизнеспособные прототипы (MVPr)