- PVSM.RU - https://www.pvsm.ru -
Павел Гвай, android-разработчик KODE
Привет, меня зовут Павел pavelgvay [1], я работаю в калининградской студии разработки мобильных приложений KODE и около года назад активно погрузился в процесс разработки приложений для Google Assistant и просто-таки залип над этапом проектирования интерфейса, который стал настоящей творческой отдушиной после строчек кода.
Разработав с десяток проектов, выступив на нескольких конференциях, познакомившись с разработчиками Google Assistant, который, кстати, совсем скоро заговорит по-русски [2], обменявшись опытом с разработчиками, студиями и даже автором книги [3], я серьезно задумался об оптимизации процесса проектирования и тестирования голосовых приложений, которые уже можно [4] делать даже для Алисы.
Именно эта мысль дала мне мотивационного пинка, отправила в длительное путешествие по существующим инструментам и анализу их недостатков, ну и привела к ожидаемому выводу — о нем в конце статьи, а пока о настоящем.
Для тех, кто еще не щупал изнутри разговорные интерфейсы, поясню, что вообще из себя представляет дизайн такого приложения.
Хорошее разговорное приложение отличается от чатботов отсутствием принуждения к использованию конкретных команд — здесь у пользователя выстраивается свободный диалог с сервисом, похожий на общение с реальным человеком. Основное — это голос и текст, но в случае, если у устройства есть экран, приложение может подключать визуальное сопровождение в виде карточек, каруселей, списков для лучшего донесения информации.
Возьмем хотя бы “заказ пиццы”: Представьте, сколько различных вариантов фраз можно использовать, чтобы сказать приложению, что вы хотите пиццу. Пользователь может назвать конкретное название, а может попросить посоветовать ему варианты с грибами и ветчиной или попросить прочитать весь доступный список и выбрать из него, а может и просто сообщить, что голоден.
Все это варианты развития сюжета. Вот что мы должны предусмотреть: каждый отдельный шаг в каждом возможном пути каждого из сценариев приложения. Непаханое поле! А мы все еще пиццу не заказали!
Проектирование (или дизайн, как вам удобней) разговорного интерфейса вне зависимости от платформы проходит через стандартный набор шагов. Подробные гайдлайны можно найти у самих разработчиков Google Assistant [5], Amazon Alexa [6], Microsoft Cortana [7], я же свел это в короткий чек-лист:
Строим дерево диалога — чтобы учесть все варианты хода событий, все шаги, которые приведут пользователя к гипотетическому “заказу пиццы”, стоит визуализировать все действия.
[9]
Корень всех проблем проектировщика разговорных интерфейсов — это огромная масса информации. Сценарии, варианты их прохождения, деревья диалогов, шаги, которых на небольшое приложение может набраться штук сто. Всю эту массу информации надо где-то хранить, как-то синтезировать, сверять, тестировать, передавать в разработку, давать посмотреть заказчику, а рекомендаций по выбору инструмента от разработчиков голосовых помощников в гайдлайнах просто нет.
Спроектировав первые приложения, я свел все свои боли в основной набор проблем:
Итогом этой постоянной борьбы с болями становится не только растягивающиеся сроки разработки, но и потеря качества из-за невнимательности, усталости и, конечно, потери мотивации.
В сети уже появился ряд инструментов, который должен облегчить процесс, но функционал их достаточно ограничен.
Чтобы не быть голословным в своем анализе и субъективной критике, я, в лучших традициях научного исследования, взял одну и ту же часть реального приложения, над которым работал и попробовал ее реализовать с помощью предложенного инструментария.
Все результаты я сводил в таблицу [10] и оценивал каждый набор сервисов по трем основным критериям, выставляя им оценку по 5-ти бальной шкале:
Начнем с “классического” подхода: карту диалогов строим на белой доске, а точнее в ее цифровом аналоге — Realtimeboard [12]. Описание персонажа и фраз будет храниться в Google Docs [13].
[14]
Перед построением карты придется выработать свои условные обозначения — снова затраты времени, а при построении карты каждый шаг прорисовывается и выравнивается вручную — выходит медленно, зато зрительно карта становится понятнее.
Процесс сбора материалов для тестирования занимает уйму времени. Выглядит это примерно так: заглянули в карту, затем взяли из таблицы фразу и вписали ее в документ. Никакой гибкости, сплошная рутина и постоянное переключение между инструментами.
Править карту легко: шаги можно менять местами, перемещать целые ветки и выделять отдельные элементы в группы. А вот синхронизировать карту с таблицей фраз приходится вручную — вновь скребущее чувство потерянных данных.
Ставим “хорошо” Realtimeboard за наглядность и гибкое подстраивание методологии работы под проектировщика. Грозим пальцем за затянутый процесс тестирования и ручную синхронизацию таблицы фраз с картой.
Карта и фразы находятся внутри Sayspring [15], информация о персонаже и персонах останется в Google Docs [13].
[16]
Карта формируется пошагово: есть обозначения для пользователя и интерфейса, ее можно делить на сценарии. В процессе построения ловишь мелкие неудобства, например, необходимость постоянно сохранять изменения. При этом карта абсолютно линейна: переходы никак не отображаются (связи и развилки на скрине добавлены уже самостоятельно).
[17]
Сервис позволяет протестировать сценарии голосом, но при этом недоступен текстовый аналог фраз, отсутствует возможность возврата на пару шагов назад (придется начать заново), распознавание речи доступно лишь для трех языков и работает плохо. Для тестирования этот режим бесполезен, ибо нет возможности смотреть историю диалога, всё равно придётся собирать диалоги в файл.
[18]
К счастью, сбор диалогов здесь облегчен. По нажатию на кнопку инструмент сам покажет вам возможные диалоги. Там много проблем и неудобств (например нельзя собрать два сценария в один файл; нельзя скачать файл, только просмотреть в инструменте), но это уже экономит нам время на тестировании.
[19]
Все реплики закреплены за конкретным логическим шагом в карте, что избавляет от необходимости переключаться между инструментами и синхронизировать их состояние.
Вносить правки в карту неудобно: перетаскивание элементов возможно лишь внутри одного сценария, группировки недоступны.
Sayspring избавляет от рутинной работы по сбору материалов для тестирования и синхронизации таблицы фраз с картой, так как реплики закреплены за шагами. Это единственные плюсы.
Карта ненаглядна, работать с ней трудно и неудобно. Тестирование голосом работает, но бесполезно, так как нет возможности вчитаться в реплики, посмотреть историю, а выгрузка диалогов ограничена.
Инструмент [21] отличается форматом основного экрана: первоначально выстраивается диалог, а карта рисуется автоматически. Фразы и персонажа будем хранить в Google Docs [13].
На карте хорошо видны развилки и связи между шагами. Она интерактивна: по клику на шаг открывается редактирование элемента.
Разделения на сценарии нет, что приведёт к большому числу повторений и огромной запутанной блок-схеме.
[23]
Тестирование выполнено в виде переписки, что позволяет вчитаться в реплики, посмотреть историю.
Однако, нет возможности выбрать шаги: по сути мы не управляем процессом, а смотрим видео, что делает режим бесполезным.
Поскольку фразы и карта хранятся отдельно, то проблема с синхронизацией остаётся. Вносить правки в карту довольно удобно, есть drag-and-drop, а вот выделить несколько элементов и сделать общее действие над ними нельзя.
Кстати, в сервисе реализован так называемый build-mode: в фразы можно встраивать переменные и получать к ним доступ через API. Таким образом инструмент может стать хранителем контента. Какого конкретно — непонятно, ведь можно указывать только один вариант фразы.
Инструмент скорее создан для быстрого прототипирования простых приложений, а не для полноценного проектирования. Тестирование не работает, оставляя проблему со сбором материалов открытой. Выгрузка диалогов доступна только в формате MP4, GIF или AVI.
Инструмент [24] позволяет строить карты, но не специализируется на дизайне разговорных интерфейсов. Персонажа и фразы будем хранить в Google Docs [13].
[25]
Карту можно разделить на сценарии. Строится удобно и быстро благодаря удобным хоткеям, снимая с нас необходимость выравнивания.
Плохо реализованы связи между шагами, невозможно менять кривые, и они строятся поверх всего, сильно уменьшая читабельность карты.
Как и в realtimeboard, перед построением карты придется выработать условные обозначения.
Для сбора материалов в инструменте нет ничего, проблема не решена совсем.
Работать с картой удобно: доступно выделение и перетаскивание элементов. Поскольку фразы хранятся отдельно, то проблема с синхронизацией остается.
Процесс построения карты очень удобный, сама карта достаточно наглядная, но есть проблема со связями между шагами. Проблемы с тестированием и синхронизацией таблицы фраз и карты не решены.
Понятно, что в исследовании были рассмотрены не все доступные варианты (буду рад вашим советам в комментариях), но по проанализированным сервисам можно сделать четкий вывод — ни один инструмент не похож на Священный Грааль. Временным решением лично для меня служит комбо из Realtimeboard + Google Sheets + Google Docs.
Однако, мириться с потерей времени и сил на проектирование я не стал и задался целью разработать собственный инструмент — Tortu [26].
Разработка функционала напрямую зависит от мнения заинтересованных разработчиков. Специально для этого подготовил несколько вопросов, которые помогут мне сориентироваться. Буду благодарен, если Вы поможете мне и заполните форму [27]. Заполнение займет не больше 5-7 минут.
Если Вам интересна тема разговорных интерфейсов, и Вы хотите узнать больше про дизайн, разработку, либо у Вас появились какие-либо вопросы, то велком в мой telegram-чат [28], посвященный разговорным интерфейсам, где уже собралось небольшое комьюнити разработчиков и дизайнеров.
Автор: APPKODE
Источник [29]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ux/277089
Ссылки в тексте:
[1] pavelgvay: https://habrahabr.ru/users/pavelgvay/
[2] по-русски: https://habrahabr.ru/company/google/blog/347824/
[3] книги: https://www.amazon.com/How-Program-Amazon-Echo-Development-ebook/dp/B011J6AP26/
[4] можно: https://habrahabr.ru/company/yandex/blog/350968/
[5] Google Assistant: https://developers.google.com/actions/design/
[6] Amazon Alexa: https://developer.amazon.com/designing-for-voice/
[7] Microsoft Cortana: https://docs.microsoft.com/en-us/cortana/skills/design-principles
[8] SSML: https://developers.google.com/actions/reference/ssml
[9] Image: https://habrastorage.org/webt/dw/u_/ep/dwu_epdkoy60jzi9zqxoegffeu4.png
[10] таблицу: https://docs.google.com/spreadsheets/d/1K5LI8OhCul9S_k0CM6QPoKv_Iixonlv66mxlVFe9p0s/edit#gid=0
[11] Image: https://habrastorage.org/webt/66/wc/_f/66wc_fadmjj2iyjto9wbslhq0w0.png
[12] Realtimeboard: https://realtimeboard.com
[13] Google Docs: https://docs.google.com/
[14] Image: https://habrastorage.org/webt/oz/ok/so/ozoksol5tancyol4vxbrsfpzryy.png
[15] Sayspring: https://www.sayspring.com/
[16] Image: https://habrastorage.org/webt/zj/zh/yq/zjzhyq8nxer7dshyy-skb-ljo20.png
[17] Image: https://habrastorage.org/webt/yz/po/x4/yzpox4rmxmc9j16e2cauhwnyxdo.png
[18] Image: https://habrastorage.org/webt/ok/fm/fw/okfmfwnj8ppfqqnkwrye4ksnn-k.png
[19] Image: https://habrastorage.org/webt/im/8w/iw/im8wiwgymit2rjjeojde4-apwf0.png
[20] Image: https://habrastorage.org/webt/h1/ev/5t/h1ev5tllg_ahrczd0gswjgkmdc4.png
[21] Инструмент: https://app.botsociety.io
[22] Image: https://habrastorage.org/webt/k5/-q/cs/k5-qcsmgwyhxl53luinfykaxabc.png
[23] Image: https://habrastorage.org/webt/ld/jb/kf/ldjbkfl7-uz8xeuoei-jdfnzcbu.png
[24] Инструмент: http://www.xmind.net/
[25] Image: https://habrastorage.org/webt/a9/n0/af/a9n0afrowojj9j_7o_au7na1ow4.png
[26] Tortu: https://tortu.io
[27] форму: https://docs.google.com/forms/d/e/1FAIpQLSd038nrm8_K0latemL6K9EZ0TuSamRWIZnWwXhnGFR75H2I9g/viewform
[28] telegram-чат: https://t.me/conversational_interfaces_ru
[29] Источник: https://habrahabr.ru/post/352136/?utm_campaign=352136
Нажмите здесь для печати.