Гайд по голосовому UX: ситуации, паттерны, инструменты (и немного моральной поддержки)

UX-архитектор Just AI Екатерина Юлина рассказывает, что в своем мышлении должен изменить UX-дизайнер традиционных интерфейсов, берясь за голосовые.

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

Но пока они сомневались, сложилась самостоятельная профессиональная сфера — со своими секретами, паттернами и механиками (и даже рынком труда). Вместе с UX-архитектором Just AI Екатериной Юлиной разбираемся, как подступиться к голосовым интерфейсам.

Екатерина Юлина, UX-архитектор Just AI

Но для начала немного ретроспективы. На дворе 1995 год. Microsoft выпускает ОС Windows 95, и в мире происходит революция. Помню, как родители и прочие взрослые говорили о пользе и вреде компьютера. А по выходным мы всей семьей ходили в гости к друзьям, чтобы поиграть в «Косынку» и «Сапера».

В 2000-м вышла Nokia 3310. Мир снова изменился, на этот раз благодаря телефонам с кнопочным интерфейсом. Позже появились смартфоны со стилусами. У меня тоже был такой. Тыкать стилусом в экран было очень круто. Сразу как-то выделяешься на фоне людей с кнопочными телефонами.

Но «лучший стилус — это ваш собственный палец», говорил Стив Джобс. В 2007 году Apple начинает продавать iPhone — и с тех пор люди тапают и свайпят, а тыкать стилусом уже давным-давно стрёмно.

А затем понеслось: 2011 год — Apple презентует Siri, в 2014-м Amazon выпускает Alexa и Amazon Echo, в 2016-м выходит Google Assistant, в 2017-м — «Алиса» от «Яндекса»… Перед разработчиками и бизнесом открылись двери в экосистемы ассистентов, как когда-то — в магазины мобильных приложений. И скоро только ленивый (и недальновидный!) не будет делать навыки для голосовых помощников.

Ситуации, когда голос — это действительно удобно

Невозможно представить, чтобы user experience (UX, пользовательский опыт) строился в вакууме. Голосовой навык рождается в конкретной ситуации, где он полезен и органичен, — бессмысленно создавать голосовой сценарий, а затем думать, где бы его применить. Важно эту ситуацию обнаружить и мастерски её обыграть.

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

В феврале 2019 года американский канал TNT транслировал матчи NBA. В перерывах между играми «Лос-Анджелес Лейкерс» и «Бостон Селтикс» комментатор Эрни Джонсон объявляет, что началась продажа лимитированных кроссовок Nike и что зрители могут попросить Google Assistant забронировать для них пару за $350.

«Hey Google, Ask Nike» в эфире TNT

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

Экшен Nike для Google Assistant 
Adforum

Ещё в 2017 году Starbucks придумала, как с помощью голосового ассистента сократить время ожидания заказа и путь клиента к желанной чашке кофе. Можно сказать «Alexa, order my Starbucks» («Алекса, закажи мой "Старбакс"») и забрать любимый напиток в ближайшем заведении уже через несколько минут.

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

Затем этот же кейс обыграла Ford: Alexa встроили в мультимедийную систему SYNC3, так что у водителей появилась возможность заказывать и оплачивать голосом свой Starbucks прямо в салоне автомобиля, не отвлекаясь от дороги.

«Alexa, order my Starbucks»

А вот коллеги из компании Alan AI рассказали мне, как обнаружили прикладной юзкейс — уже не для маркетинговых, а для enterprise-задач. Техническому персоналу, обслуживающему лифты в США, приходится читать тонны документации, заполнять ряд бланков, вносить данные о ремонте, отчитываться о выполнении задач — и делать всё это в разных системах учёта.

На писанину уходит много времени, в которое лифтёр фактически не работает. Alan AI применили технологии голосового искусственного интеллекта, чтобы пользователи-лифтёры могли заполнять бланки голосом в ходе работы или во время поездки на объект.

Голосовой UX — это не про картинки, а про контекст ситуации. Задача дизайнера — детально изучить контекст и понять, что пользователь захочет в конкретной ситуации.

UX-паттерны в голосе

Одна функция

Итак, один навык — одна функция. Если водитель заказывает кофе, то он решает эту конкретную задачу. Закончил с кофе и хочет узнать расстояние до Луны? За это отвечает уже другой голосовой навык. Делать швейцарский нож в одном навыке — дурная затея.

Скролл

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

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

Модальные окна и кнопки

Второе название модальных окон — диалог. В чём суть модальных окон? Подтвердить или отказаться от намерения выполнить операцию. В реальной жизни люди выражают намерения, говоря да или нет, и для этого не нужны кнопки.

Мультимодальность

«Умные» колонки и экраны, смартфоны, говорящие игрушки для детей, «умные» дома, приборная панель в автомобиле — устройства определяют контекст использования.

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

Определите контекст использования и устройство. Проверьте, можно ли комбинировать голос с другим видом взаимодействия на этом устройстве.

Кроссплатформенность

Другой аспект — как сделать один навык под несколько ассистентов. Механика и логика могут сохраняться, но дьявол будет скрываться в деталях реализации и пути пользователя до навыка. Посмотрим, как на одной и той же платформе выглядит путь к навыкам «Алисы» и действиям Google Assistant.

«Алиса» на iOS

Пользователям «Алисы» нужно сначала скачать приложение «Яндекс.Браузер», разрешить ему использовать локацию и микрофон, нажать значок ассистента и сказать активационную фразу навыка. Например, «Запусти навык "Да, милорд"».

Второй и последующий опыт пользователя состоит уже из трёх шагов: открыть «Яндекс.Браузер», нажать на кнопку вызова ассистента, сказать активационную фразу.

Google Assistant на iOS

Пользователь скачивает приложение Google Assistant, авторизуется через аккаунт, разрешает отправку уведомлений и соглашается на доступ к микрофону.

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

Здесь она другая — «Говорить с приложением "Да, милорд"». Затем путь сокращается — во второй раз пользователь откроет приложение Google Assistant и просто озвучит команду.

Не зная активационную фразу (а команды вызова одного и того же навыка в разных экосистемах будут отличаться), навык не запустишь — и в плане UX это одно из слабых мест голосовых ассистентов.

Но над задачей удобного skills discovery (как правильно донести до потребителей информацию о новых навыках) сейчас работают и Google, и «Яндекс», и другие компании, так что со временем находить полезные и актуальные в определённый момент навыки будет проще.

И, кстати, VUI-дизайнеры настаивают, что навык с одной и той же механикой для разных ассистентов — всё же отдельные проекты.

Проектирование интерфейса в семь этапов

Я спрашивала VUI-дизайнеров, коллег из Just AI и пользователей конструктора навыков Aimylogic, с чего они вообще начинают работу над сценарием. Все говорят «с идеи». Описать её можно в свободной форме в текстовом редакторе.

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

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

Павел Гвай, основатель tortu.io — инструмента для проектирования голосовых приложений

Пример диалога в Notion

Поприветствуйте пользователя

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

  • Плохо — «Привет! Я Активити. Не могу прожить ни дня без спорта. Он моё всё, моя жизнь, моё вдохновение! А ещё у меня большой опыт в качестве тренера и сотни упражнений в базе! С радостью поделюсь своими любимыми упражнениями с тобой!»
  • Хорошо — «Привет! Я Активити, бот-спортсмен. С радостью порекомендую тебе комплекс упражнений. Хочешь, расскажу про йогу?»

Проработайте пути пользователя

На языке программистов намерение — интент (английское intent). Аналогия с классическими интерфейсами — формализованный или неформализованный запрос. С формализованным работать проще, а неформализованный может превратить жизнь в кошмар.

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

Блок-схема в Miro

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

Самый простой способ проработать путь пользователя — пройти вместе с ним от начала до конца и посмотреть, в каких точках появятся условия и отклонения от основного сценария.

Создайте навигацию

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

Пример из жизни. Уже упомянутый мною навык «Да, милорд» (его аудитория в «Алисе» – 650 тысяч человек, к тому же он вошёл в число самых популярных игр для Google Assistant не только в России, но и в мире) — это атмосферная игра с музыкой, достойным синтезом речи, интересными сюжетами, игровой механикой.

На старте пользовать мог управлять игрой только с помощью «Да», «Нет» и «Хватит».

По сюжету игрок — милорд, владелец земель и крестьян, попадает в ситуацию «Ваша светлость! В наших благодатных краях найдены большие залежи меди! Изволите начать строить шахту?». Можно было бы и просто ответить да, но хочется же вжиться в роль и говорить, как подобает великосветской особе.

— Ваша светлость! В наших благодатных краях найдены большие залежи меди! Изволите начать строить шахту?

— Изволю!

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

Выпишите примеры диалогов и делайте ответы бота более разнообразными

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

Пользователей сильно раздражает, когда ассистент начинает повторяться. Гипотезу подтверждает Нелли Камаева, дизайнер Alan AI. Во время тестирования навыка для детей она видела, как быстро ребята теряли интерес, столкнувшись с одним и тем же ответом.

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

Загляните в «помойку» для нераспознанных намерений

«Помойка», или catch-all на языке программистов, — это место, куда по разным причинам попадают фразы пользователей.

— Я с кем вообще говорю? Ты робот?!

— Вы меня раскусили. Хотите продолжить общение?

Фраза «Я с кем вообще говорю? Ты робот?!» попадёт в catch-all (если вы её не предусмотрели сценарием). «Вы меня раскусили. Хотите продолжить общение?» — реплика по умолчанию при подобных ситуациях. Подумайте заранее, чем помочь пользователю, провалившемуся в catch-all.

Подумайте над голосом и характером

Вспомните собеседников, которые наводили на вас скуку. С ними неинтересно, разговор продолжать неохота, мы их называем нудными.

То же самое происходит и при общении с навыками. «Алиса», Alexa и Google Assistant имеют свои Speech Toolkit с широким набором мужских и женских голосов, акцентов и звуковых эффектов для оживления речи бота вроде покашливания и пошмыгивания.

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

На внутреннем воркшопе коллега создала навык для Alexa — послушайте фрагмент:

— Hey, man. Awful weather, yeah? Wanna to get drunk? Let your old friend Joe mix you a good Irish drink. Ok?

— And now when you feel better, take your effing ass and go to the Joe's pub. There you will never drink alone. I'm waiting for you.

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

Трейлер «Мира Лавкрафта», голосовой игры для Google Assistant от Just AI

Для одного из бизнес-кейсов мы тоже использовали записи голосов профессиональных актёров. Только 0,5% клиентов смогли заподозрить (даже не догадаться, а заподозрить), что с ними разговаривает бот.

Для создания атмосферы используйте звуки и иллюстрации

Подобрать звуки можно из готовых библиотек или создать свои (Alexa привередлива к расширению файлов, поэтому придётся повозиться с конвертацией).

В той же игре «Да, милорд» для «Алисы» звуки используются для создания атмосферы: ржание коня, ропот толпы, зловещий смех, волынка. А недавно в «Алисе» появился навык «Птицы России», где в беседе можно услышать, как поют и щебечут жаворонок, воробей или другие птицы.

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

И ещё советы от VUI-дизайнеров

О закрытых вопросах и правильных подсказках и канцеляризмах.

Не учите интерфейсу

Язык — привычный и понятный интерфейс. Не надо учить человека говорить. Он это умеет.

  • Плохо — «Чтобы прослушать сообщение заново, скажите "Прослушать заново". Чтобы перейти к следующему сообщению, скажите "Перейти к следующему сообщению"».
  • Хорошо — «Послушаем сообщение ещё раз или перейдём к следующему?»

Задавайте закрытые вопросы

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

  • Плохо — «Привет! Я Симфони, бот-меломан. С радостью порекомендую тебе альбом и расскажу про него».
  • Хорошо — «Привет! Я Симфони, бот-меломан. С радостью порекомендую тебе альбом и расскажу про него. Хочешь узнать про трек дня?»

Избегайте канцеляризмов

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

  • Плохо — «Немаловажно иметь в виду, что дальнейшие альбомы этого исполнителя станут платиновыми, что позволяет сделать вывод о успешности данного дебютного альбома как средства эффектного выхода на международную арену».
  • Хорошо — «Дебютный альбом привлёк к исполнителю внимание всего мира. Недаром его следующие пластинки дважды стали платиновыми!»

Тестирование и обучение

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

Из личного опыта. На одном из воркшопов я проектировала фитнес-навык: по задумке Alexa сначала делала инструктаж, потом включалась музыка и человек повторял упражнение. Я с азартом тестировала всё на себе: прыгала и бегала под нарезанную музыку, меняла длину треков, повторяла упражнения множество раз и в конечном счёте UX навыка меня удовлетворил.

Провоцируйте и материтесь

Пользователи — провокаторы. Они проверят реакции навыка не по теме: навык для заказа пиццы, а пользователь — вроде очень хитёр — спросит про суши. Придумайте достойный ответ. И ещё поматеритесь от души. Я серьёзно! В Just AI есть чек-лист мата, который используют при тестировании.

Проговаривайте и переслушивайте

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

Обучайте навык

Но с первого раза всё в навыке вы не предусмотрите. Примите это и смиритесь. Вашему навыку потребуется дообучение. Читайте диалоги и анализируйте логи. Как это делать с помощью Python, в одном из выпусков «Школы Алисы» рассказывает Дарья Сердюк, NLP Research Engineer Just AI.

Инструменты дизайнера

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

Конструктор с NLU-движком (natural language understanding, понимание естественного языка). Более 10 тысяч пользователей и более 1100 навыков для голосовых ассистентов с общей аудиторией в 1 млн пользователей. Есть бесплатная подписка и бесплатный демопериод на платных подписках.

Интерфейс конструктора Aimylogic 

В конструкторе можно создать сценарий, протестировать его и подключить более чем к десяти каналам («Алиса», Google Assistant, Telegram, «ВКонтакте» и другие). Есть техническая поддержка и сообщество в Telegram. Вот примеры нескольких голосовых навыков:

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

Графический конструктор Alexa Skills. Позволяет создавать Alexa Skills без навыков программирования. Подходит для UX-тестирования.

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

Материалы для прокачки

  1. Исследование Voice Tech об инструментах для голоса.

  2. Сайт-каталог инструментов для голоса.

  3. Github-репозиторий с инструментами для голоса.
  4. Telegram-чат, посвящённый разговорным интерфейсам. В канале не привязываются к конкретной платформе или инструменту, обсуждают всё от бизнес-составляющих и трендов до разработки и проектирования.
  5. Tools for Voice.

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

Опыт и материалы VUI-дизайнеров, упомянутые в статье, использованы с их согласия.

Благодарности:

0
18 комментариев
Написать комментарий...
Irina Griaznykh

Спасибо за статью! Кейс с найками просто бомба ;)

Ответить
Развернуть ветку
Anait Badalyan

Спасибо, Катя! Отличный материал для погружения. Не останавливайтесь, пожалуйста:)

Ответить
Развернуть ветку
Екатерина Юлина

Спасибо за отзыв! Вы мотивируете меня продолжать!

Ответить
Развернуть ветку
Oleg Shestoperov

Главный вопрос: как заменить Алису на умную брюнетку?

Ответить
Развернуть ветку
Екатерина Юлина

Напишите в Яндекс, у них найдется всё.

Ответить
Развернуть ветку
Mary Pavlova

На voiceflow можно создать навык и для гугла. А так же вышел буквально недавно Skill Flow Builder от Alexa.
Не очень поняла цель статьи. Пробежались по очень многим вопросам, но по верхам(

Ответить
Развернуть ветку
Юлия Рыжих

Так статья не про инструменты, а про то, как создать хороший сценарий для голосового UX/UI. Как его спроектировать, протестировать и успешно запустить так,чтобы пользователь один раз попробовал, а потом вернулся в навык. Цель статьи - помочь тем, кто только начинает развиваться как разработчик на этом рынке. А каким инструментом пользоваться - это уже второй вопрос. У Алексы, кстати, не поддерживается русский.

Ответить
Развернуть ветку
Mary Pavlova

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

PS Не понимаю, зачем минусовать..... за что ..... видимо конструктивный диалог не интересен. ну ок.

Ответить
Развернуть ветку
Юлия Рыжих

Ну наверное потому, что для поиска ответов о том, как создать качественный сценарий нужно читать блог Яндекс.Диалогов, тематические телеграм-каналы для разработчиков или, например, Habr (куда уж более тематический ресурс): https://habr.com/ru/company/just_ai/blog/462301/

Ответить
Развернуть ветку
Mary Pavlova

Вы сами себе противоречите, то пишите, что статья  про то, "как создать хороший сценарий для голосового UX/UI", то пишите, что "для поиска ответов о том, как создать качественный сценарий нужно читать блог Яндекс.Диалогов, тематические телеграм-каналы для разработчиков ". Так все же о чем статья?

Ответить
Развернуть ветку
Екатерина Юлина

Мария, а вы можете накидать мне свои вопросы в личку на Фейсбуке? Мне интересно, что волнует сообщество.

Ответить
Развернуть ветку
Иван Голубев

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

Ответить
Развернуть ветку
Екатерина Юлина

Ваня, что ты имеешь в виду под дискавери? Расскажи подробнее, пожалуйста

Ответить
Развернуть ветку
Иван Голубев

Например, как правильно доносить пользователю навыка, что этот навык умеет, а что нет.

Ответить
Развернуть ветку
Юлия Рыжих

Ваня, так дискавери вроде как привязан к экосистеме и ее инструментарию и не очень зависит от разработчика навыка? Или я чего-то не знаю?

Ответить
Развернуть ветку
Иван Голубев

Экосистема, например Яндекс, жёстко ограничивает дискавери навыков в пользу своих сервисов. Тут разработчик действительно пока может только что уйти в другую экосистему.

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

Ответить
Развернуть ветку
Юлия Рыжих

Мне кажется, это тема отдельной статьи вообще :) Про дискавери внутри самого навыка и внутри экосистемы, где навык живет.

Ответить
Развернуть ветку
Иван Голубев

Да, у меня комментарий-запрос на статью-продолжение)

Ответить
Развернуть ветку
15 комментариев
Раскрывать всегда