Voice UI Design
Впервые люди познакомились с голосовым ассистентом 10 лет назад, когда Apple презентовала Siri. Тогда никто не ожидал, что voice tech станет движущей силой инноваций, а люди будут использовать голосовой поиск в 50% случаях, когда захотят найти информацию в интернете. Мировые продажи умных устройств тоже ежегодно бьют рекорды: только за последний квартал 2020 года Amazon продала 16,5 млн позиций. В России уже 52 млн человек пользуются голосовыми ассистентами.
Высокий спрос привёл к тому, что компании начали активно развивать экспертизу в проектировании голосовых интерфейсов. И выигрывают те, кто уделяет особое внимание качественному дизайну — и не просто внешнему виду продукта, а удобству его использования. Разговорные интерфейсы нуждаются в разработке пользовательского опыта (UX) не меньше, чем графические.
Основные правила разговорного UX такие же, как и везде: удобство, понятность, доступность, консистентность (согласованность данных), соответствие контексту. Но дьявол кроется в деталях. Паттерн поведения пользователя в графическом интерфейсе отличается от голосового, где взаимодействие происходит без помощи рук. Руками мы нажмём кнопку «назад», голосом — попытаемся объяснить, что именно хотим. Управляя интерфейсом с помощью кнопок, мы раздражаемся из-за незначительных ошибок, но продолжаем взаимодействие, управляя голосом — перестаём понимать ассистента и заканчиваем диалог.
UX-дизайнеры, которые стали разрабатывать голосовые продукты, узнали, что речевое поведение — это сложно. Мало перенести структуру сайта или привычную воронку продаж в текстовый сценарий — нужно научить машин общаться с пользователями на одном языке. Так появился спрос на специалистов по разговорному дизайну.
Кто такой VUI-дизайнер
Voice User Interface Designer (voice UX designer, conversation designer) — новая профессия, связанная с развитием виртуальных ассистентов, а также телефонных роботов и чат-ботов. Специалист по разговорным интерфейсам обладает компетенциями в копирайтинге, психологии, лингвистике, дизайне, исследованиях пользователей, понимает архитектуру разговорных продуктов и проблемы, с которыми можно столкнуться при их создании.
Почему с задачами VUI-дизайнера не справятся UX-райтер, UX-дизайнер и копирайтер?
Потому что без опыта, знания ограничений NLU (Natural Language Understanding) и насмотренности специалист не сможет сделать даже основные задачи VUI-дизайнера:
Заранее оценить, насколько сценарий подходит для реализации в голосе.
Выявить технические сложности, которые могут замедлить разработку и повысить её стоимость.
Учесть возможные ошибки, побочные варианты сценария и способы навигации пользователя по диалогу.
Создать диалог естественным и комфортным для пользователей.
Специалист без опыта в проектировании интерфейсов часто падает в одну из крайностей:
Дублирует существующий интерфейс сайта или приложения. Это просто, но абсолютно не пригодно для живого диалога и не помогает достичь поставленной целей.
Строит воздушный замок, для реализации которого потребуется создать Скайнет.
Опытный VUI-дизайнер умеет находить правильный баланс между качественным продуктом и сложностью сценариев, а при изменении вводных — быстро адаптировать дизайн и тексты.
Чем занимается VUI-дизайнер
VUI-дизайнер занимается разработкой голосовых интерфейсов, которые позволяют человеку взаимодействовать с компьютером с помощью распознавания речи. Иногда к голосу может подключаться текст — и тогда это разработка разговорного интерфейса — CUI (Conversational User Interface).
![Алиса в Яндекс.Станции — это VUI, а в смартфоне, где с ней можно говорить голосом и чатиться, — CUI](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fhabrastorage.org%2Fr%2Fw1560%2Fgetpro%2Fhabr%2Fupload_files%2Fd9e%2Ff23%2F005%2Fd9ef2300595daac44f9d5b576c939d3a.png&width=768&dpr=4&quality=100&sign=52cefb2&sv=1)
Конкретные задачи VUI-дизайнера:
Генерировать идеи и создавать концепты разговорных интерфейсов. Формирование концепта происходит на основании идей заказчика. Это первичная визуализация диалога для будущего ассистента — описание того, как навык будет выглядеть в голосовом помощнике.
Писать сценарии для ассистентов, навыков и ботов. Сюда входит копирайтинг отдельных фраз и UX-проектирование. Пользовательский путь к цели должен быть коротким и комфортным. В ход идут аналитика, построение CJM (Customer Journey Map) и другие инструменты UX-дизайнеров.
Собирать чат-боты и голосовые навыки в конструкторах диалогов. Дизайнеры самостоятельно проектируют сценарии диалогов в конструкторах с простым интерфейсом: AimyLogic, DialogFlow, VoiceFlow или других. Для создания более сложных систем подключаются разработчики.
Генерировать фразы пользователей, обозначающие разные намерения. Они называются аттерансами и позволяют попасть в интент (намерение пользователя; то, что он хочет сделать) без линейного сценария. Например, интент — заказать пиццу. Аттерансами могут быть: «хочу пиццу», «закажи маргариту» или «мне бы пиццу с сырным бортом». Чем больше аттерансов, тем выше шанс попасть в интент.
Участвовать в проектировании мультимодальных интерфейсов с экранами, кнопками и другими графическими элементами. Будущее разговорных технологий — за мультимодальностью, когда ассистентом можно пользоваться и голосом, и с помощью экранов. Дизайнер должен уметь проектировать под разные интерфейсы.
Проводить user-тесты. Тестирование прототипов сценария помогает минимизировать ошибки проектирования на ранних этапах развития продукта. Диалоги проверяются на реальной аудитории и позволяют понять, как пользователь будет взаимодействовать с ботом.
Анализировать существующие сценарии и изучать логи. В том числе находить в них проблемы и предлагать решения.
Накапливать экспертизу и делиться ей с командой. Сюда может входить консультирование команды по развитию разговорного продукта и выступление на профессиональных конференциях.
Этим всем занимается 1 человек?
Не обязательно.
В командах существуют разные варианты с разделением ролей. Например, conversation UX-дизайнер и conversation-копирайтер. Техническую экспертизу в команду приносит системный аналитик или команда разработки.
Далее мы рассмотрим, как может формироваться команда в зависимости от навыков VUI-дизайнера.
Пирамида скиллов дизайнера
Прежде чем строить дом, нужно научиться класть кирпичи. В разговорном дизайне дом — это сценарий взаимодействия, а кирпичики — промпты (фразы ассистента, от англ. prompt reply — быстрый ответ).
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fhabrastorage.org%2Fr%2Fw1560%2Fgetpro%2Fhabr%2Fupload_files%2F4cd%2Fdc8%2Fd20%2F4cddc8d2047e37f07b8a5a262bd6ab22.png&width=768&dpr=4&quality=100&sign=befaccca&sv=1)
Пирамида представляет собой вектор развития от простых задач и решений — к сложным:
Копирайтинг. Практическое обучение нужно начинать с написания отдельных фраз. Именно на это нацелены самые полезные разделы в обучающих книгах и гайдах. Каким бы хорошим не был дизайн, один промпт может завести пользователя в тупик и испортить его позитивный опыт. Составлять списки тренировочных фраз помогает навык работы с текстом — копирайтинг.
Проектирование интерфейсов. Постепенно специалист берёт ответственность за большие сценарии. Он уже хорошо разбирается в основах положительного пользовательского опыта и умеет проектировать интерфейсы.
UX-исследования. Скиллы в этой сфере дают дизайнеру возможность с максимальной пользой проводить user-тесты и даже CustDev-сессии — своими силами или в качестве постановки ТЗ. UX-исследования помогают тестировать диалоги на фокус-группе. На основе анализа собранных данных VUI-дизайнеры делают выводы о дальнейшем развитии продукта.
Разработка и аналитика. Знания о разработке помогают дизайнеру проектировать интерфейсы, заранее учитывая технические ограничения системы, а не опираться только на пользовательский опыт и личную экспертизу. Аналитика позволяет адаптировать сценарии на основе реальных логов. Тем самым VUI-дизайнер может принимать грамотные продуктовые и сценарные решения и составлять оптимальные наборы фраз для тренировки NLU.
Продукт и маркетинг. Подразумевает опыт и компетенции продуктового дизайнера, а не изучение фреймворков PM или чтение бизнес-литературы. Опытный VUI-дизайнер создаёт не интерфейс, а продукт, в котором сходятся интересы бизнеса и потребителя. Данные скиллы особенно важны на этапе концептуализации будущего навыка или ассистента.
По пирамиде можно формировать команду и растить VUI-специалистов
Возьмите 5 компетенций и передавайте их от дизайнера отдельным специалистам, начиная сверху. Проиллюстрируем примерами.
Сетап №1. Команда на вырост
Так выглядит команда, где ещё нет скиллового разговорного дизайнера.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fhabrastorage.org%2Fr%2Fw1560%2Fgetpro%2Fhabr%2Fupload_files%2F70c%2Fdd8%2Fbb9%2F70cdd8bb9bcb0c773722f3a5b35e91e9.png&width=768&dpr=4&quality=100&sign=11549a85&sv=1)
В такой команде UX-дизайнер и копирайтер должны изучить книги по VUI и conversation-гайды от Google (подборка материалов — в конце статьи). Обучением NLU займётся аналитик, а задачи по UX-исследованиям может брать на себя специалист из другой команды — своей, клиента, подрядчика.
Сетап №2. Стандартная команда
На следующем этапе один специалист может объединить скиллы отличного копирайтера и проектировщика интерфейсов. Возможно, UX-дизайнер и копирайтер вырастят друг друга — так тоже бывает.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fhabrastorage.org%2Fr%2Fw1560%2Fgetpro%2Fhabr%2Fupload_files%2F8cc%2F5f5%2Fec9%2F8cc5f5ec96c71a0f7c7b32c334e82b2e.png&width=768&dpr=4&quality=100&sign=9f2b9112&sv=1)
Сетап №3. Dream team
Постепенно VUI-дизайнер берёт на себя часть ответственности за продукт: отвечает за направление развития с точки зрения бизнеса и полученных аналитических данных.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fhabrastorage.org%2Fr%2Fw1560%2Fgetpro%2Fhabr%2Fupload_files%2F8c8%2Fbc6%2Fce7%2F8c8bc6ce7d7ad7ec948ddfb08f8acea4.png&width=768&dpr=4&quality=100&sign=c330d4b5&sv=1)
Сетап №4. Бонни и Клайд
Дизайнер берёт на себя все задачи, кроме обучения NLU, аналитики и разработки. Больше не нужно привлекать специалистов из других команд или целиком полагаться на экспертизу подрядчиков.
Сетап №5. VUIдинорог
Если увидите такого — напишите нам, пожалуйста.
Как стать VUI-дизайнером
Если хотите попробовать себя в этом непростом, но невероятно интересном ремесле — держите пошаговый план от команды TORTU.
Этап 1: знакомство
Посмотрите доклад про создание голосового приложения с конференции AppsConf.
Прочитайте разбор голосового навыка Atom Tickets в Google Assistant.
Зарегистрируйтесь в Fabble. Это инструмент, с помощью которого VUI-дизайнеры проектируют интерфейсы. Спроектируйте свой первый навык и протестируйте его.
Опробуйте диалог на друзьях. Это поможет вам понять, как люди общаются с ассистентами.
Этап 2: погружение
Ознакомьтесь с гайдлайном по разговорному дизайну от Google. Вы узнаете об этапах проектирования разговорного навыка и научитесь писать диалоги по принципам Voice UX.
Изучите документацию и гайдлайн Алисы.
Соберите голосовой навык в конструкторе Aimylogic и опубликуйте черновик для собственного использования. Обязательно протестируйте его на своих знакомых.
Этап 3: решимость
Прочитайте The Ultimate Designer’s Guide. Он даст более комплексное представление о разговорном дизайне и голосовых устройствах.
Прочитайте Designing Voice User Interfaces Кэти Перл — это настольная книга для многих VUI-дизайнеров.
Посмотрите доклад про подходы к проектированию VUI с конференции Conversations. Спроектируйте интерфейс вашего навыка в блок-схемах и на канвасе, попробуйте гибридный формат. Опыт в подготовке подобной документации увеличит вашу ценность для работодателей.
Продолжайте практиковаться: собирайте демонстрационные навыки, делайте редизайн навыков в Алисе, Марусе и ассистентах Салют от Сбера. Формируйте портфолио.
Отправляйте CV в компании, где ищут VUI-дизайнеров. Например, в нашу команду TORTU.
Что ещё стоит развивать VUI-дизайнеру?
Качаем копирайтинг:
«Пиши, сокращай» и «Ясно, понятно» Максима Ильяхова
«Этой кнопке нужен текст» Кирилла Егерева
Качаем дизайн интерфейсов:
«Дизайн привычных вещей» Дональда Нормана
Осваиваем Figma и Adobe XD
Качаем UX-исследования:
Осваиваем 52 термина из области UX-исследований
Изучаем Wizard of Oz Testing — способ проведения UX-тестирования голосовых продуктов
«Не заставляйте меня думать» Стива Круга
Качаем разработку и аналитику:
Знакомимся с документацией JAICP, DialogFlow, Sber
Осваиваем JavaScript Learning (например, здесь)
«Азбука системного мышления» Донеллы Медоуз
«Аналитическая культура. От сбора данных до бизнес-результатов» Карла Андерсона
Last updated