UI/UX для AR
Практические советы по UX в дополненной реальности
Александр Камаев, Автор текстов
5 марта 2023

Дополненная реальность (AR) открывает новые возможности для создания уникальных и захватывающих пользовательских интерфейсов.

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

Начало и безопасность пользователя

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

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

  • Безопасность пользователя должна быть одним из приоритетов в разработке приложения AR. Это включает предупреждения и различные меры предосторожности при запуске AR-режима, а также учет механики управления контентом, чтобы избежать резких движений в реальном пространстве.

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

  • Рекомендуется поддерживать как портретный, так и ландшафтный режимы в приложении AR, чтобы пользователь мог выбрать удобное положение устройства. Это особенно важно в AR-приложениях, где положение устройства в пространстве имеет большое значение.
Расположение элементов интерфейса
  • Рекомендуется размещать важные элементы управления на плоскости экрана, чтобы пользователь не должен был менять положение телефона в пространстве для их доступа. Это может включать кнопки выхода из AR-режима или настроек. Однако, в контексте игровых активностей элементы меню могут быть привязаны к физическим плоскостям, таким как пол или стена, и сделаны диегетическими элементами виртуальной среды игры, что усиливает погружение пользователя в виртуальный мир. Например, настольная игра может быть отображена на реальном столе, а элементы игрового меню на планшете.

  • Так как вся интерактивность с дополненным слоем происходит через рамку экрана, важно не перегружать пользовательский интерфейс большим количеством элементов в плоскости экрана, когда это не нужно. Например, определенные пункты меню могут быть скрыты до их вызова, и количество кнопок на экране во время взаимодействия с AR должно быть минимальным. Фиксированные элементы управления лучше расположить по краям экрана, чтобы не загораживать центральную область. В некоторых приложениях для улучшения читаемости элементов интерфейса в нижней и верхней частях экрана могут добавляться небольшие градиенты. Кнопки на экране также могут быть полупрозрачными или не очень яркими.
Варианты установки AR-объекта
  • Чтобы пользователь мог активировать дополненный слой с самого начала использования приложения, необходимо давать информацию о каждом шаге действия поэтапно. Например, для активации дополненного слоя нужно навести маркер или найти плоскость, а затем установить объект. Для улучшения заметности инструкции можно анимировать.

  • Если пользователю нужно выбрать место для установки объекта, можно использовать интерактивную метку, которую можно позиционировать в пространстве. Также можно использовать изображение объекта в состоянии "установки", например, полупрозрачный силуэт. Один из примеров реализации - приложение от Икеи.
  • Для более убедительного эффекта можно создать анимацию, которая объяснит, как объект появляется в реальном мире после установки на маркер или в определенном месте. Это позволит пользователям лучше понимать, как дополненный слой взаимодействует с окружающей средой.

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

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

Варианты выделения AR-объекта

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

  • Тема с учетом расстояния пользователя до объектов в дополненном слое может быть выделена в отдельный пункт. Пространство вокруг пользователя можно разделить на несколько диапазонов, таких как "Близкий" (до 30 см), "Персональный" (на расстоянии руки, до 1 м), "Социальный" (до 3 м) и "Публичный" (от 3 метров). На основе этого можно выстраивать интерфейс вокруг пользователя и систему смены состояний и вариантов взаимодействия с интерактивными элементами, в зависимости от позиции пользователя относительно объекта. Например, в радиусе 2 метров у интерактивных объектов могут появляться подсказки с их названиями, а при подходе к объекту на расстояние вытянутой руки, он может подсвечиваться, указывая на то, что его можно взять. Таким образом, можно сократить количество ненужной информации в кадре до самой актуальной относительно текущей позиции в пространстве.

  • Для подтверждения факта выделения объекта (например, после нажатия на него) можно использовать не только обводку или подсветку, но также приподнять объект над плоскостью пола, если выделение подразумевает редактирование его положения. Это является достаточно понятным сигналом, что объект можно перемещать в пространстве, поскольку он не связан с реальной поверхностью.

  • Если пользователь случайно потерял объект, который находился в выделенном состоянии (например, объект вышел за границы экрана устройства), то для удобства пользователя можно использовать классические указатели у краев экрана, которые могут появиться через небольшую паузу после того, как объект потерян. Пауза в этом случае необходима, чтобы избежать ложных срабатываний.
Управление положением AR-объектов в пространстве
  • Если объекты должны быть размещены на полу, то можно ограничить их перемещение только по горизонтали, чтобы они двигались только по поверхности пола. Для этого можно использовать простое перемещение пальцем по экрану, что легко и понятно для пользователей.

  • Для перемещения объектов по вертикали можно использовать мультитач или разделить перемещение на несколько шагов. Однако, из-за увеличения сложности, это потребует более детальной системы обучения.

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

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

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

  • Разделение на зоны может использоваться для ограничения размещения объектов в пространстве. Например, можно ограничить размещение виртуальных объектов в определенном диапазоне, например, от 30 сантиметров до 3 метров, что предотвратит их размещение в зоне ног пользователя или слишком далеко от него, что снизит удобство взаимодействия с объектом.
Интеграция AR-объектов в реальный мир
  • Для лучшей интеграции цифрового контента с реальным пространством рекомендуется использовать возможности учета освещения в кадре, а также отражений окружения на виртуальных объектах. Если реальное освещение не учитывается, то можно добавить фейковые тени объектам, которые значительно усилят эффект интеграции виртуального слоя в реальность.

  • Object Occlusion - это мощный инструмент для более органичной интеграции AR с реальным миром, и его следует использовать, если это позволяет платформа, на которой реализуется проект. Это относится к учету реальных объектов, которые могут перекрывать дополненный слой - в настоящее время это одно из важных и актуальных направлений развития технологии дополненной реальности. В будущем возможность перекрытия цифровых объектов будет постоянно улучшаться и становиться более доступной для использования.
  • Чтобы обеспечить лучшую читаемость текстовых подсказок при разных условиях освещения и различных материалах окружающей среды, рекомендуется помещать их на плашки. Если такие плашки не соответствуют общему дизайну, то для текста можно использовать мягкие тени.

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

  • Для лучшей интерактивности с виртуальными объектами в AR, необходимо использовать все доступные инструменты, включая звуковые эффекты и вибрацию телефона, чтобы усилить эффект достоверности цифрового слоя. Однако, не следует злоупотреблять вибрацией, поскольку некоторые платформы, такие как Google, не рекомендуют ее использование.

  • Как и в VR, пользователь может свободно перемещаться в реальном пространстве, что может приводить к пересечению виртуальных объектов телефоном. Чтобы избежать восприятия пересекаемых объектов как материальных, можно исключить их геометрию в момент пересечения или стилизовать этот момент таким образом, чтобы не создавалось впечатление бага. Также можно использовать стилизацию, показывая внутреннее устройство объекта, даже если это не соответствует реальности, но вписывается в сеттинг проекта.

  • Вопрос органичной интеграции масштабных объектов в реальный мир представляет большой интерес. Если это соответствует концепции проекта, то рекомендуется сначала показать уменьшенную копию объекта, а затем позволить пользователю увеличить ее до реального масштаба, таким образом пользователь сможет контролировать возникновение массивного объекта в кадре. Также можно предложить пользователю выбрать масштаб взаимодействия с объектами - уменьшенный или 1:1, как в AR Sports Basketball. Однако, возникают проблемы интеграции крупногабаритных объектов в реальном пространстве, из-за их размера они могут не поместиться в помещении, где находится пользователь. В таких случаях можно использовать порталы - это может быть как портал, в который можно войти, как в примере выше, так и различные массивные экраны на стенах, которые являются своеобразными окнами в другую реальность.
  • Вернемся к типам интерфейса и обсудим использование мета-элементов. В компьютерных играх эти элементы связаны с повествованием игрового мира, но пространственно они относятся не к нему, а к плоскости экрана. Однако, они могут усиливать эффект погружения в виртуальную среду и не ограничиваться только игровыми активностями. Например, затемнение и покраснение экрана при получении повреждения героя игры - таким образом отражается внутреннее состояние персонажа. Подобные приемы можно использовать для усиления связи между реальным и виртуальным миром.

  • В AR отличается от VR тем, что мы все еще смотрим на цифровой слой через рамку экрана телефона, но при этом учитывается наше пространственное положение и происходит интеграция виртуального окружения в реальную среду. Тема разрушения четвертой стены может и должна использоваться в AR. Прямые обращения виртуальных персонажей к пользователю, реакции ботов на его приближение, имитации глитчей телефона, нарративное обоснование цифрового слоя в реальном мире, учет реального времени - все это может создать более глубокий пользовательский опыт и еще сильнее размыть границу между реальным и виртуальным миром.
Понравилась статья?
Читайте также
Показать ещё