Рекомендации по проектированию (Dialogflow)

Существует два основных аспекта проектирования Interactive Canvas:

  • Проектирование разговора
  • Проектирование пользовательского интерфейса (UI)

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

Подходит ли Interactive Canvas для моего действия?

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

  • Ваше действие выиграет от полноэкранного, визуально богатого опыта. Interactive Canvas идеально подходит для полноэкранных игр с богатыми визуальными эффектами, например, для захватывающих голосовых игр.
  • Ваше действие имеет интуитивно понятный диалоговый поток. Критический путь вашего действия должен быть доступен только с помощью голоса. Действие, требующее пространственной точности, например приложение для рисования, может представлять собой сложную задачу для разработки интуитивно понятного потока разговора.
  • Существующих компонентов и настроек недостаточно (например, если вы хотите выйти за рамки существующих визуальных компонентов и настроек Assistant). Interactive Canvas отлично подходит для демонстрации уникальных визуальных атрибутов вашего бренда, динамических элементов и анимации. Кроме того, Interactive Canvas можно использовать для предоставления обновлений единого визуального интерфейса по мере прохождения пользователем диалога.

Требования

Хотя Interactive Canvas — это знакомая среда веб-разработки, перед разработкой действия необходимо принять во внимание некоторые требования.

В верхней части каждого веб-приложения на основе холста есть заголовок с названием вашего бренда. Эта зарезервированная область имеет высоту 56 дп для мобильных устройств, 96 дп для Home Hub и 120 дп для Smart Display. Обязательно соблюдайте это требование к заголовку:

  • Убедитесь, что за заголовком не скрыта важная информация или интерактивные элементы. Метод getHeaderHeightPx() определяет высоту заголовка.
Рисунок 1. Примеры того, как заголовок отображается в различных действиях.

Ограничения

Учитывайте эти ограничения перед разработкой действия с помощью интерактивного холста:

  • Нет локального хранилища данных. Мы запрещаем действию сохранять файлы cookie и получать доступ к API веб-хранилища . Учитывая эти ограничения, мы рекомендуем, чтобы ваше действие управляло состоянием веб-перехватчика и использовало поле userStorage AppRequest для сохранения пользовательских данных .
  • Никаких всплывающих окон и модальных окон. Мы запрещаем действию показывать всплывающие окна или модальные окна. Мы также настоятельно не рекомендуем использовать другие стандартные элементы навигационного пользовательского интерфейса, которые вы обычно видите в веб-приложениях, такие как клавиатуры и нумерация страниц.

Создайте свой разговор

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

Методические рекомендации

Для лучшего пользовательского опыта вам следует:

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

    • Убедитесь, что ваш опыт действий хорошо подходит для разговора.
    • Создайте образ бренда
    • Обрабатывайте ошибки в разговоре
    • Попробуйте использовать только голосовой интерфейс, прежде чем придумывать, как это будет выглядеть на экране.

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

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

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

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

Создайте свой пользовательский интерфейс

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

Методические рекомендации

Для лучшего пользовательского опыта вам следует:

  • Создавайте адаптивные дизайны. Убедитесь, что ваши проекты подходят как для альбомной, так и для портретной ориентации и подходят как для маленьких телефонов, так и для больших экранов. Ваши пользователи должны иметь возможность легко читать пользовательский интерфейс для каждого типа поверхности.
  • Учитывайте когнитивную нагрузку. Чтобы не перегружать пользователей, держите информацию и контент, которые вы представляете на экране, организованными, чистыми и краткими.
  • Адаптируйте голосовой вывод для экрана. Будьте изобретательны в использовании визуальных эффектов в дополнение к звуку — не просто записывайте то, что говорится вслух. Когда экран доступен, мы можем более кратко выражать свои мысли, чем когда его нет.
  • Избегайте размещения важной информации или компонентов в нижней части экрана. На мобильных устройствах расшифровка пользовательского сообщения отображается над панелью микрофона и может достигать нескольких строк. Несмотря на то, что эта расшифровка является временной, избегайте записи важного содержимого в нижней части экрана. Кнопки, похожие на чипы предложений, можно разместить в нижней части экрана, поскольку пользовательский ввод является альтернативой использованию чипов предложений.
  • Обрабатывайте ошибки в разговоре визуально. Ошибки могут возникнуть, если пользователь не отвечает, если вы его не понимаете или не выполняете то, что он сказал. Выясните, где эти сообщения об ошибках находятся в вашем пользовательском интерфейсе. Это может быть любое место, где вы размещаете подсказки для отображения (например, в заголовке), или это может быть что-то другое (например, специальная область контента, которая появляется по мере необходимости). Дополнительные советы по обработке ошибок можно найти на сайте проектирования бесед .

Дизайн для умных дисплеев

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

  • Умные дисплеи поддерживают голосовую связь, а Google Assistant – это операционная система.
  • Умные дисплеи являются стационарными и, в отличие от мобильных устройств, при использовании дома их часто размещают на кухне или в спальне.

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

Методические рекомендации

Чтобы обеспечить максимальное удобство использования умных дисплеев, вам следует:

  • Проектируйте, уделяя первоочередное внимание голосу. Разработка интерактивного действия на холсте с возможностью голосовой переадресации еще более важна для интеллектуальных дисплеев. В отличие от мобильного устройства, ваш пользователь может стоять в другом конце комнаты и общаться со своим умным дисплеем только голосом. По этой причине вы не всегда можете рассчитывать на то, что пользователь прикоснется к устройству для выполнения вашего действия, и вам необходимо убедиться, что ваши пользователи могут продолжить ваше действие с помощью голоса.
  • Проектируйте с учетом определенного расстояния просмотра. Размещайте контент на интеллектуальном дисплее так, чтобы его можно было просматривать на расстоянии. В зависимости от размера комнаты типичное расстояние просмотра интеллектуальных дисплеев составляет от 3 до 10 футов.
    • Используйте минимальный размер шрифта 32 пт для основного текста, например заголовков. Используйте минимум 24 пт для дополнительного текста, например описаний или абзацев текста.
  • Сосредоточьтесь на одной точке соприкосновения за раз. Поочередно отображайте один тип основной информации или задач, чтобы снизить когнитивную нагрузку и обеспечить разборчивость контента на расстоянии. Например, когда пользователи спрашивают: «Каков мой день?» Ассистент отвечает информацией о погоде, календаре, маршрутах и ​​новостях. Каждый тип контента занимает весь экран и отображается последовательно, а не весь одновременно.

Ресурсы

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