Голосовое взаимодействие в Canvas App
Этот этап проектирования включает:
- обработку запросов пользователя (проектирование интентов);
- написание ответных реплик ассистента;
- проработку реакций интерфейса.
Проектирование интентов
В этом разделе мы рассмотрим, как обрабатывать запросы пользователя в Canvas App на примере смартапа «Забери кота». Предварительно рекомендуем ознакомиться с разделом UX-принципы проектирования интентов.
Определите интенты для голосового сценария
Для начала составьте идеальный голосовой сценарий по верхнеуровневым макетам интерфейса: как бы пользователь проходил сценарий в вашем приложении.
Как правило, в Canvas App пользователь формулирует запросы, исходя из контекста и элементов интерфейса на экране. Где-то он голосом переходит к оплате, где-то выбирает карточку для открытия, а где-то просто ведет диалог и задает уточняющие вопросы. Поэтому большую часть интентов стоит проектировать, когда у вас уже есть верхнеуровневые макеты.
Для структурирования и передачи в разработку спроектированных интентов используйте таблицы, где:
- Экран — начальный экран, на котором доступен голосовой запрос.
- Обозначение — универсальное название интента на латинице, которое будет сквозной единицей разработки.
- Наименование — суть (функция) голосового запроса в нескольких словах.
- Описание — детальное описание запроса, может совпадать с пользовательской историей.
- Фраза пользователя — пример фразы, которой пользователь может выразить свое намерение.
| Экран | Обозначение | Наименование | Описание | Фраза пользователя |
|---|---|---|---|---|
| MainPage, SearchPage | FindСat | Найти кота | Пользователь хочет голосом найти подходящего кота | «Найди мне котика белого цвета» |
| MainPage, SearchPage | OpenCard | Открыть карточку с котом | Пользователь хочет открыть голосом одну из карточек на экране | «Открой Маркизу» |
| CatPage | TakeCat | Забрать кота (добавить в корзину) | Пользователь хочет забронировать кота в приюте, чтобы его забрать | «Давай забронируем кота» |
Добавляйте интенты там, где нужно
Проектируя интенты, отталкивайтесь от экранов Canvas App, так как не все интенты должны отрабатывать на каждом из них. Например, когда пользователь находится на экране оформления брони, новый поиск нелогичен и может случайно сбросить важную сессию оформления. В таком случае можно сделать предупреждение о выходе или не обрабатывать интент поиска на этом экране.
На этом этапе вы получаете первую проектировку голосовых интентов вашего приложения, которую нужно уточнить, проведя тестирование на пользователях. Например, показать им экраны и попросить голосом пройти сценарий. Так вы, возможно, найдете новые интенты, которые ранее не учитывали.
Наполните интенты тренировочными фразами
Одна из главных задач проектирования интентов — собрать реплики, которыми пользователь выражает намерение и из которых вы сформируете тренировочные фразы для технологии SmartApp Brain. Чтобы повысить вероятность того, что запрос будет правильно классифицирован, собирайте реплики для тренировочных фраз. Это можно сделать при тестировании вашего прототипа или просто попросив друзей озвучить ту или иную команду на экране.
Чтобы в дальнейшем проверить, корректно ли работают интенты в смартапе, используйте таблицу, где для каждого экрана указаны доступные интенты со списками тренировочных фраз.
| Обозначение интента | Наименование интента | Описание интента | С какого экрана доступен | Реплики пользователя, которые заносим в SmartApp Brain |
|---|---|---|---|---|
| find_cat | Найти кота | Пользователь хочет голосом найти подходящего кота | main_page, search_page | «Найди мне кота» «Покажи мне кота» «Найди мне кота из приюта» «Есть ли черный кот» |
| open_card | Открыть карточку с котом | Пользователь хочет открыть голосом одну из карточек на экране | main_page, search_page | «Открой карточку кота» «Покажи кота» «Открой Клару» «Открой этого кота» |
| take_cat | Забрать кота (добавить в корзину) | Пользователь хочет забронировать кота в приюте, чтобы его забрать | cat_page | «Хочу забрать котика» «Начнем оформление кота» «Давай забронируем кота» «Перейти к бронированию» |
Проектирование ответов ассистента и реакций интерфейса
Для написания реплик ассистента ознакомьтесь с редакционной политикой. Изучите также советы по проектированию ответов ассистента с точки зрения UX.
Ответы на основной сценарий
Сначала спроектируйте ответы на интенты основного голосового сценария, затем — для всех его разветвлений.
Например:
- что уточняет ассистент, если не хватило данных для заполнения формы;
- что отвечает ассистент, если нет результатов поиска;
- какие подсказки ассистент дает пользователю и когда, на каких экранах;
- что ассистент отвечает, когда ни один интент не классифицирован и т. д.
Таких разветвлений может быть столько, сколько требуется в сценарии вашего смартапа.
Обращение к ассистенту через events
Помимо голосовых запросов есть еще один неявный способ обращения к ассистенту — события (events). Например, загрузилась страница, отработал таймер, пользователь нажал на кнопку. Все это — события, которые мы можем обрабатывать со стороны приложения и реагировать на них.
Чтобы описать все реакции смартапа на запросы пользователя и события, используйте таблицу:
| Начальный экран | Интент/Событие | Условие 1 | Условие 2 | Уточнение данных ассистентом (заполнение слотов) | Ответ пользователя (при заполнении слотов) | Ответ ассистента | Ответ приложения |
|---|---|---|---|---|---|---|---|
| MainPage, SearchPage | open_card | На экране есть карточка с названным именем | Первый вход пользователя | * | * | «Открываю подробную информацию о {cat_name}. Вы можете забрать {cat_name} домой или пожертвовать деньги на содержание в приюте» | Открывается карточка |
| Не первый вход пользователя | * | * | «Открываю подробную информацию о коте» | ||||
| На экране нет карточки с названным именем | * | * | * | Запуск поискового механизма |
В этом примере мы видим такие разветвления:
- наличие запрашиваемого пользователем при открытии объекта на экране;
- логика первого и последующих входов в приложение для включения в ответ подсказок.
Добавление нескольких ответов
Чтобы диалог был более естественным, для каждого ответа ассистента стоит предусмотреть несколько вариантов ответа.
Когда вы сформировали ответы ассистента, убедитесь, что диалог получился логичным и помогает пользователю пройти ваш сценарий. Например, протестируйте сценарий на пользователях, отвечая за ассистента.
Пример диалога в смартапе «Забери кота»:
Событие: Пользователь открыл приложение из каталога и попал на главный экран (MainPage).
> Ассистент: «Привет, я помогу тебе подобрать четвероногого друга и доставить его прямо домой. Кого мы будем искать?» (MainPage).
> Пользователь: «Найди котенка девочку белого окраса» (от пользователя с главного экрана — MainPage — поступил поисковый интент).Ассистент: «Вот кого я нашла по ва шему запросу» (на экране смартапа выводятся результаты поиска — SearchPage).
> Пользователь: «Открой подробное описание Клары» (пользователь находится на экране с результатами поиска — SearchPage — и формирует интент, побуждающий к открытию карточки с детальным описанием кота).Ассистент: «Открываю подробную информацию о коте. Вы можете забрать кота домой или пожертвовать деньги на его содержание в приюте» (на экране смартапа показывается карточка выбранного кота — CatPage).
> Пользователь: «Хочу забронировать Клару» (пользователь находится на экране с карточкой кота — CatPage — и формирует интент, побуждающий к бронированию кота).Ассистент: «Давайте выберем дату и способ доставки котенка домой» (на экране смартапа с карточкой кота — CatPage — ассистент уточняет данные).
Приветствие можно использовать как вводную инструкцию для пользователя при первом входе. Также это может быть а ктуально, если в смартапе всего одна функция.