Калибровка дополненной реальности в мобильных приложениях: 10 рекомендаций
Ключевые выводы: Сделайте инструкции по калибровке чёткими, контрастными, описательными и дополните их понятными визуальными примерами. Предоставьте пользователям однозначную обратную связь о результатах их действий и о ходе калибровки.Зачастую, прежде чем начать работу, пользователям придётся выполнить несколько шагов, чтобы откалибровать функцию дополненной реальности в мобильном приложении. Исключение составляют некоторые функции дополненной реальности, такие как примерка очков или тестирование косметики.Что такое калибровка AR (здесь и далее — AR (Augmented Reality)) и зачем она нужна? Помните, что AR объединяет входные данные реального мира с виртуальными объектами для создания новой содержательной сцены. Программное обеспечение AR должно учитывать относительные размеры, цвета и другие характеристики виртуальных и реальных объектов, чтобы правильно их сопоставлять. Эту функцию выполняет калибровка.Определение: процесс калибровки в AR позволяет точно выровнять виртуальные элементы AR и включить их в реальную среду.Калибровка — одна из важнейших составляющих работы с AR. Она влияет на успех и положительное впечатление от взаимодействия с AR со стороны пользователей. В отличие от онбординга, с которым, как правило, необходимо ознакомиться только один раз, калибровку придётся производить каждый раз, когда пользователь будет взаимодействовать с AR-функцией.В этой статье представлены 10 рекомендаций о том, как калибровать AR и предоставлять обратную связь пользователям мобильных приложениях с AR-функцией. Они основаны на исследовании юзабилити, в котором 11 участников тестировали различные мобильные приложения с AR-функцией.Типы калибровкиВ зависимости от целей и функций приложения, калибровка AR может включать одно или несколько действий, которые должен выполнить пользователь:→ Сканирование: Человек должен сканировать шероховатую или текстурированную поверхность, например, пол или стену (или определенный индикатор в окружающей его обстановке, например, стык между стеной и потолком).→ Абсолютное позиционирование: Пользователь должен расположить устройство в определенном месте, например, прислонить его к стене или подойти к конкретному ориентиру в городе.→ Относительное позиционирование: Человек должен зафиксировать устройство на земле или на уровне пояса, затем отойти на определенное расстояние от камеры/устройства так, чтобы он полностью или частично попадал в объектив камеры. Это типичное действие для калибровки AR-функции в фитнес-приложениях или играх.→ Отсутствие калибровки: Человек может сразу пользоваться AR-функцией и ему останется только настроить освещение. Это характерно для приложений с интерактивной примеркой (например, Ulta, Warby Parker) или AR-фильтров (например, Instagram, TikTok).Из-за сложности и вариативности этих типов многие участники нашего исследования сталкивались с трудностями в процессе калибровки. Как правило, эксперты рекомендуют минимизировать количество инструкций или руководств в мобильных приложениях. Но эффективные инструкции и подсказки вместе с соответствующей обратной связью помогут успешно откалибровать AR-функцию.
Приложение Houzz: Один из участников пытался рассмотреть картину в режиме AR. Несмотря на то, что он не понял, почему ему нужно сканировать пол (слева) или прислонить устройство к стене (справа), он смог сделать то, что хотел, благодаря чётким и подробным инструкциям.
Процесс калибровки состоит из двух важных компонентов: инструкций, которые объясняют пользователям, что им следует сделать, чтобы откалибровать AR-функцию, и обратной связи, которая поможет им понять, правильно ли они действуют. Далее мы рассмотрим оба этих компонента.
1. Предоставляйте краткие инструкции, по одной за раз.
Разбейте инструкции на небольшие шаги и давайте их по одному. Одна из участниц исследования пыталась понять, какую из трёх разных инструкций, представленных на экране, ей выбрать. Она сказала: «О, Боже. Здесь три инструкции: "Нажать", "Вернуться к предыдущей области, чтобы продолжить", "Начать сначала". Я просто нажму "Начать сначала", потому что я не понимаю, что происходит. [...] Я не знала, [...] что оно хочет, чтобы я сделала».
Приложение ARvid: Участница исследования не знала, какую из трёх инструкций, отображаемых на этом экране, ей выполнить: «Нажать» — инструкцию с низким контрастом, расположенную в верхней части экрана, «Вернуться к предыдущей области, чтобы продолжить», или «Начать сначала».
2. Сделайте инструкции описательными и однозначными.
Будьте предельно конкретны, чтобы исключить двусмысленность и помочь пользователям достичь цели. Например, они могут перемещать телефон из стороны в сторону с разной скоростью и по разным траекториям.
В приложении Civilization AR участница видела инструкцию, согласно которой ей нужно было сканировать текстурную поверхность, чтобы начать процесс калибровки. Она начала сканировать текстуру стула, приблизив камеру к его задней части. Но для запуска калибровки приложению требовалась шероховатая поверхность, например, ковер. Она сказала: «Хорошо. Ему нужна текстура. Вот текстура. И что теперь? Я не знаю, что это за маленькие точки. Много маленьких точек. Вот тебе текстура. Я не знаю, что ты хочешь, чтобы я сейчас сделала [...] Хорошо. Ему нравится стул. Оно думает. Я не знаю. Я не понимаю, что происходит. Я не понимаю». В данном случае не только инструкций было недостаточно, но участница даже не поняла суть обратной связи — значение белых точек на экране (обсуждение этого обозначения будет дальше в этой статье).
Приложение Civilization AR: Участница следовала инструкции и направила камеру на спинку своего стула. К сожалению, нужна была более грубая текстура. Участница не поняла суть обратной связи от приложения (малое количество точек на изображении означает плохое сканирование), и она не была уверена в том, что сканирование прошло успешно.
При необходимости давайте пояснения к текстовым инструкциям. Для этого приведите конкретные примеры или предоставьте наглядные изображения.
Приложение Mission to Mars: Пользователи видят хорошие и плохие примеры освещения (слева) и поверхностей (справа), чтобы опираться на них и успешно выполнить калибровку.
3. Дайте пользователям достаточно времени, чтобы они успели прочитать инструкции и выполнить их.
Предоставьте человеку достаточное количество времени, чтобы он успел переварить информацию и отреагировать на нее. Участникам исследования часто не хватало времени, чтобы прочитать инструкции, потому что они исчезали слишком быстро.
Приложение ARVid: Инструкция в верхней части экрана написана малоконтрастным текстом. К тому же она исчезла с экрана слишком быстро, и участник исследования не успел дочитать её до конца.
4. Сделайте инструкции заметными. Расположите их близко к центру экрана, используйте контрастный цвет и разместите их на более тёмном фоне.
Некоторые участники игнорировали инструкции, поскольку концентрировались на задании. Кроме того, им было трудно увидеть или прочитать некоторые инструкции, потому что они сливались со сценой. В отличие от других приложений, где фон не меняется, в AR фон меняется в зависимости от обстановки, в которой находится пользователь. Некоторые фоны могут сделать инструкции или другие элементы интерфейса плохо читаемыми. Разработчикам AR-функций следует помнить об этих ограничениях и тестировать опыт взаимодействия с AR в различных условиях обстановки и освещения.
Расположите инструкции на однотонной подложке и напишите их таким цветом, который контрастирует с фоном подложки. Тогда они будут выделяться на любом фоне, и пользователи легко их заметят.
В приложении MauAR Berlin Wall текст повествования находился на чёрном контрастном фоне (справа). Однако им стоило использовать такой же чёрный контрастный фон для других элементов интерфейса, таких как надпись Story и годы (1961, 1971, 1981) (слева).
За счёт применения относительно заметных/ярких цветов элементы в приложении Kinfolk хорошо видны. Тем не менее, текст всё ещё нуждается в подложке с контрастным фоном, чтобы обеспечить его читабельность в любых условиях.
5. Дополняйте текстовые инструкции визуальными подсказками. Они не должны противоречить друг другу.
Визуальные средства помогут устранить неоднозначность текстовых инструкций. Они эффективны для демонстрации примеров жестов, текстур или других вещей, которые могут потребоваться для калибровки. Однако визуальные подсказки, которые побуждают пользователя к определенным действиям, должны быть ясными и чёткими, поскольку зачастую люди воспринимают визуальные инструкции буквально. Например, когда в процессе калибровки человеку предлагают сканировать поверхность с помощью камеры телефона, он часто повторяет движение, которое видит на экране.
Кроме того, несоответствие между визуальным и реальным опытом может привести к путанице. Один из участников, который использовал приложение Active Arcade, получил визуальную инструкцию. Она показывала человека, который ставит устройство на тумбу. Однако согласно письменным инструкциям участник должен был поставить устройство на пол. На самом деле, анимированная визуальная инструкция показывала, как пользователь берёт устройство с тумбы и кладёт его на пол. Но во время сессии анимация зависла, и человек увидел только её первую часть. Можно было бы предотвратить эту проблему, если бы текст инструкции синхронизировали с нужным кадром анимации.
Приложение Active Arcade: Визуальное изображение показывало устройство, установленное на тумбе на уровне пояса. Одновременно с этим на экране была письменная инструкция — «Поставьте устройство на пол». Текстовая инструкция должна была появляться в тот момент, когда пользователь на экране ставил устройство на пол. Подобные несоответствия путали участников исследования.
6. Рассмотрите возможность применения звуковых инструкций или подсказок, если устройство должно находиться далеко от пользователя.
Люди предпочитают краткий визуальный формат дополнительных инструкций вместо длинного текста.
Однако в некоторых приложениях пользователи могут быть не в состоянии одновременно выполнять действия и читать инструкции. В таких случаях предоставьте им звуковые подсказки (конечно, при условии, что человек разрешает их использовать — вы же не хотите неприятно его удивить!)
Обратная связь необходима для хорошего взаимодействия пользователя с приложением. Первая из десяти эвристик юзабилити — видимость состояния системы. Убедитесь, что человек всегда знает, в каком состоянии находится система.
Во время калибровки необходимо информировать людей о состоянии системы и давать им обратную связь о действиях, которые они выполняют в процессе калибровки.
7. Постоянно информируйте пользователей о состоянии системы.
Во многих случаях, когда участники пытались откалибровать AR, они не понимали, правильно ли они это делают. Им было непонятно, система выполняет какие-то сложные вычисления или она зависла, потому что они предоставили неправильные входные данные.
Например, в приложении Civilization AR один из участников пытался понять, что делает система. Он сказал: «[Здесь говорится] медленно перемещайте устройство, чтобы обнаружить поверхность. Хорошо. Ему нравится стул. Оно думает. Я не понимаю, что сейчас происходит. Я понятия не имею. Было бы полезно, если бы приложение сказало мне, что происходит».
8. Используйте чёткие, стандартные обозначения для указания состояния системы.
Процесс калибровки может быть сложным, поэтому сделайте элементы интерфейса и обозначения чёткими и ясными. Непонятные элементы, которые не дают никаких указаний, только запутают пользователей.
Во многих приложениях были плавающие или разбросанные по экрану точки, которые показывали, что приложение сканирует окружающую обстановку. Тем не менее, большинство участников были озадачены и не знали, как их интерпретировать. Участница, которая использовала приложение Target, сказала: «Там на полу повсюду были точки, и я просто нажала туда, где было написано “Нажмите, чтобы поставить диван” [...] Точки сбивали меня с толку. Думаю, мне помогла надпись "Нажмите", потому что я поняла, что делать. Она задала мне какое-то направление, но эти точки... [...] Я думала, что приложение сканирует мою комнату и [...] фотографирует её или что-то в этом роде. Но они мне никак не помогли».
У другой участницы был похожий опыт с приложением Etsy. Она пыталась посмотреть, как будет выглядеть картина на стене, но в процессе калибровки появились точки. Она сказала: «Я навожу камеру на стену. [...] Когда я направила ее на диван, [появились] жёлтые точки. Я не понимаю/, почему они там. Но там, где бы я поместила её [картину], она была бы на стене прямо здесь. Но ничего не происходит и это меня расстраивает. Наверное, сейчас я бы уже просто сказала: "Забудь об этом. Я не буду, я не буду пытаться использовать эту AR-функцию. Так что, я не знаю. Она сканирует всё в моей комнате».
Жёлтые точки в приложениях Target (слева) и Etsy (справа) сбивали с толку участников исследования.
Хотя эти подсказки указывают на то, что приложение не зависло, они не добавляют ему никакой дополнительной ценности. Они не помогают пользователю понять, что делать дальше, и не сигнализируют о потенциальной проблеме.
9. Загрузите AR-объект в поле зрения пользователя. Если по какой-то причине объект перемещается во время взаимодействия, дайте человеку инструкцию, чтобы помочь ему найти объект.
Часто один из этапов процесса калибровки — добавление виртуального объекта в реальную сцену. Однако многие участники пытались найти AR-объект в окружающей обстановке. Например, одна участница, которая использовала приложение ARLOOPA, попыталась поместить анимированного персонажа в комнату. Она подумала, что персонаж исчез, хотя он двигался позади нее!
Изначально AR-объект должен быть загружен так, чтобы всегда оставаться в поле зрения пользователя. Если по какой-то причине объект должен переместиться, дайте человеку чёткую обратную связь о местоположении виртуального объекта или инструкцию о том, чего ожидать. Только три приложения (Civilization AR, Augmented Berlin, MauAR — Berlin Wall) использовали визуальные подсказки, чтобы помочь пользователю найти AR-объект. Например, приложение Augmented Berlin с помощью стрелки подсказывало пользователю, что ему нужно обернуться. Участник сказал: «Я вижу стрелку, которая, кажется, указывает на место позади меня. Я оборачиваюсь, чтобы посмотреть, что она пытается мне показать».
В зависимости от цели приложения, можно использовать различные стратегии, чтобы направить пользователя к AR-объекту. Например, если приложение использует AR для рассказа истории, более тонкая подсказка (например, анимация), которая не прерывает поток впечатлений, может оказаться предпочтительнее текста или визуальных элементов вроде стрелки. Один из участников поделился впечатлением об опыте взаимодействия с AR в приложении Augmented Berlin: «Думаю, если бы здесь было какое-то движение, я бы последовал за ним. Вместо того, чтобы говорить мне, “эй, это картинка”. Потому что при таком [подходе] кажется, что я просто смотрю на картинку ..... Теперь, со стрелкой, я нахожусь не столько в этом месте, сколько на картинке этого места. Так что, если бы там что-то происходило, я [мог бы] почувствовать, что взаимодействую с приложением, а не когда мне говорят "посмотри назад"».
В приложениях MauAR - Berlin Wall (слева) и Augmented Berlin (справа) стрелки направляли пользователя к AR-объекту.
В приложении Civilization AR пунктирная линия направляла пользователя к виртуальному объекту. Хорошо, что пользователю указали путь к интересующему его объекту, но пунктирная линия — плохая подсказка. Потому что во многих AR-приложениях точки означают совсем другое — указывают на то, что происходит процесс сканирования.
10. Предоставьте пользователям обратную связь об их действиях, чтобы они могли исправить ошибки.
Давайте людям чёткие инструкции о том, как исправить ошибку и продолжать двигаться к достижению цели. Если в течение определенного количества времени пользователь не предпринимает никаких действий, уведомите его о потенциальной проблеме и предоставьте руководство по её решению.
Одна из участниц исследования, которая использовала приложение Etsy, изо всех сил пыталась понять, что происходит. Она сказала: «Да. Направления. Например, если я сканирую глухую стену, а оно не работает, мне нужно понимать, почему. Она недостаточно яркая? Может быть, нужно больше света — объясните мне, что не так. В противном случае меня это расстраивает. Потому что там сказано: "Направьте камеру в любое место, чтобы он появился", а это пустое место на моей стене. Так что да. [...] Я не хочу стоять там и сканировать одно и то же место в течение пяти минут или даже одной минуты. Я просто хочу, чтобы объект появился на моей стене».
В приложении Target пользователи получали размытые инструкции по калибровке, без каких-либо инструкций относительно того, что делать дальше.
Калибровка — сложный и критически важный аспект мобильной AR, который часто вызывает проблемы с удобством при взаимодействии пользователей с приложением. Хотя некоторые проблемы связаны с техническими трудностями и ограничениями, процесс калибровки можно улучшить за счет чётких, описательных, своевременных и однозначных инструкций, которые учитывают то, что люди плохо знакомы с технологией AR. Кроме того, быстрая, чёткая обратная связь и подсказки помогут пользователям успешно и беспрепятственно взаимодействовать с AR.
Перевод статьи Augmented-Reality Calibration in Mobile Apps: 10 Guidelines из блога nngroup
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!