Руководство по проектированию дополненной реальности на мобильных устройствах

Я провела последние несколько лет, изучая и анализируя будущее инструментов проектирования. Со временем поняв, как дизайнеры думают и создают продукты, я начала замечать определенную тенденцию. Я заметила, что дизайнеры с трудом формулируют свои намерения относительно того, что бы они хотели сделать для дополненной реальности (AR). Трудно было объяснить и еще труднее понять, каковы ее возможности. Я часто слышала, как дизайнеры говорят:

«Мой босс хочет, чтобы я сделал AR, что мне делать?»

Понятно, что за последние несколько лет вокруг AR / VR так много шума, что они повсюду. Однако, есть определенные проблемы с используемому к ним подходу. Отсутствует «AR мышление». Есть проблемы, требующие решения, и эти проблемы имеют ограничения, которые могут быть преодолены путем пространственного мышления. Первый шаг в определении того, является ли дополненная реальность подходящим средством — определение пользователей и их потребностей.

Эти проблемы включают в себя погружение пользователей в реальном времени, помощь им в пространстве или их физическое вовлечение? Существуют ли физические ограничения, которые в настоящее время не позволяют им быть успешными? Если это так, то высока вероятность, что дополненная реальность может повысить ценность решения.

Обмен знаниями

Одна из суперсил AR — обмен знаниями. Если вы сравните теорию гравитации с черными дырами, теоретически мы более осведомлены о гравитации, потому что мы можем испытать ее в отличие от черной дыры, которую мы можем только наблюдать.

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

AR также имеет большой потенциал для маркетинга, поскольку предполагает, что пользователь полностью погружен в опыт. Известно, что полное погружение / вовлечение приводит к более высокой степени конверсии. Пользователь, скорее всего, примет решение о покупке после того, как сам попробует продукт.

Возможности и ограничения

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

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

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

Хотя это даже не близко к точности датчика, это отличный пример того, как ценное мышление выходит за рамки современных технологических возможностей.

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

Типы контента

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

• Статический: контент, который остается без движения и взаимодействия
• Анимированный: контент, который перемещается по временной шкале или следует последовательности
• 3D: контент, обладающий шириной, высотой и глубиной или данными с координатами XYZ
• Динамический: адаптивный контент, который изменяется при взаимодействии или во времени
• Процедурный: контент, созданный автоматически или алгоритмически

Эти типы контента не являются эксклюзивными и могут по-разному комбинироваться. Однако важно понимать эти форматы, чтобы дизайнер мог правильно сформулировать то, что он пытается сделать. Например, для дизайна, который требует, чтобы ваза отображала цену при нажатии: Ваза представляет собой динамический 3D-объект, который предоставляет статический тег. Если опыт включает в себя клик по тегу и совершение покупки, тогда тег становится динамическим.

Определение взаимодействий

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

Хорошее эмпирическое правило — указывать местоположение (например, экран, пространство, объект …), тип контента (например, статический, 3D …) и состояние содержимого (например, фиксированное, заблокированное, гибкое …).

Статическое и фиксированное на экране

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

Статическое и заблокированное в пространстве

Хотя эти элементы заблокированы в пространстве, они могут иметь динамическую функцию, когда они сталкиваются с пользователем. Этот метод полезен для меток и материалов, которые должны сопровождать в пространстве объект или маркер.

Динамическое и гибкое на экране

В этом случае статический контент становится динамическим. Этот метод позволяет пользователям размещать активы в определенных областях. Это полезно для цели на основе перетаскивания элементов.

Динамическое 3D и гибкое в пространстве

Отличный способ для взаимодействия с 3D-моделями и понимания их компонентов. Чаще всего используется для образовательных целей и понимания разбивки объекта.

Динамическое 3D и пропорциональное в пространстве

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

Меня часто спрашивают о необходимых навыках и инструментах для разработки опыта дополненной реальности (AR). Правда в том, что эта технология все еще находится в зачаточном состоянии, поэтому нет однозначного ответа. Средства для дизайнеров постепенно развиваются, и подходящие навыки зависят от того, насколько мотивирован дизайнер. Эти навыки будут рассмотрены позднее.

Первый навык

Однако стоит упомянуть один навык, поскольку он является основой любого опыта:

Повествование (умение рассказывать): способность эффективно объяснять последовательность событий или действий с течением времени.

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

«Пользователь помещает объект в комнату».

vs

«Пользователь перетягивает 3D объект на предметнуюплоскость».

Основы

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

Добавление контента

Как объект добавляется в пространство, может установить темп для остальной части опыта.

Автоматически VS вручную

Должен ли ваш контент автоматически размещаться в среде? Или пользователь должен размещать контент вручную?

1. A) Автоматически вставлять контент (например, при запуске приложения свеча появляется на столе).
2. B) Взаимодействие с целью / пространством определяет, где размещается контент (например, нажмите на стол, чтобы добавить свечу).
3. C) Пользователь определяет размещение содержимого, определяя, куда его поместить (например, перетащить свечу на стол).

Размещение индикаторов

Используйте индикаторы, чтобы выделить области, в которых пользователь может размещать контент.
То, как визуализируется индикатор, также может помочь решить сразу несколько задач.
Например, квадратный индикатор является сильным паттерном, поскольку он указывает на угол и перспективу предметной плоскости.
Он также может указывать на масштаб контента относительно пространства. Индикатор также может быть анимированным или иметь последовательность, которая делает взаимодействие более значимым (например, объект появляется vs. объект разворачивается из коробки).

Предупреждения и награды

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

Индикаторы за пределами экрана

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

Взаимодействие с контентом

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

Привязка

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

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

A) Привязка к объекту (например, диван равномерно расположен рядом с краем стола).
B) Привязать к окружающей среде (например, диван находится поверх ковра).
C) Привязка к направляющей (например, стол центрирован по середине ковра).

Направляющие

Рассмотрим визуализацию теней, клеток или направляющих, чтобы показать потенциал объекта.

• Клетка: 2D или 3D граница, которая ссылается на объем, масштаб и форму объекта.
• Тень: Представляет дистанцию и насколько далеко или близко расположен объект.
• Направляющая: Линии или сигналы, представляющие выравнивание и дистанцию.
• Гизмо: Визуальный индикатор движения, вращения или масштаба. Он полезен, когда пользователь может выполнить только одно действие.
• Параметр: Ссылка на градус и значение изменения.

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

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

Определение основного фокуса опыта

Фокус 1: Первый опыт в реальном времени

Пример: приложение Ikea Place

При первом опыте в реальном времени успех зависит от взаимодействия пользователя с 2D или 3D контентом.
Этот тип опыта наиболее распространен в коммерческих приложениях. Пользователям часто необходимо предварительно просмотреть продукт, чтобы лучше понять его. Они могут размещать, манипулировать или просматривать контент

Фокус 2: Первый опыт повествования

Пример: Pokemon Go

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

Фокус 3: Capture First

Пример: Instagram

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

Проектирование

Дизайнеры должны создавать элементы, которые не зависят от окружающей среды и работают со всеми оттенками и уровнями контраста.

В AR мы, по сути, располагаем данные в режиме съемки камеры. Мы не контролируем то, что показывает камера, и должны проектироваться соответственно.
Хорошей практикой является предварительный просмотр и тестирование интерфейса с различными фоновыми изображениям и видео по мере разработки дизайна.

Текущие наблюдения

Вот некоторые общие шаблоны проектирования в нынешних AR приложениях. Сейчас не так много доступных AR приложений, поэтому пул исследований по-прежнему относительно невелик.

Цвет

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

Положение

• Фиксированные элементы обычно располагаются сверху и / или снизу экрана. Это позволяет пользователю сфокусироваться на центре камеры и композиции.
• Дополнительные подсказки и элементы, которые не фокусируются на содержании, остаются ближе к низу. Например, карусели и дополнительные опции.

Текст

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

Иконки

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

Индикаторы

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

Режимы смешивания

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

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

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

AR может проявляться в разных интерфейсах. Ниже перечислены общие аббревиатуры для некоторых из них:

• GUI (графический интерфейс пользователя): взаимодействие с данными через графические и визуальные индикаторы.
  Например, нажатие Создать карусель Добавьте описание для отмены
• HUD (Heads Up Display): взаимодействие с данными, расположенными на фиксированном прозрачном дисплее.
  Например, направляющие на камере заднего вида.
• VUI (голосовой интерфейс пользователя): взаимодействие с данными посредством голоса или речи. Например, просьба Siri установить будильник
• FUI (интерфейс будущего): Будущее интерпретации взаимодействия с данными.
  Например, интерфейс костюма Железного человека
• TUI (Материальный интерфейс пользователя): Воздействие на данные посредством взаимодействия с физическим миром.
  Например, трекинг пройденного расстояния с помощью Fitbit

Источник: m.vk.com

Комментарии: