Дизайн прицела для софта дополненной реальности

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

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

Вооружился аргументами и постучался к разработчику. Иеремия Лазарус Александр оказался очень дружелюбным сингапурцем и продвинутым программистом, мы быстро нашли общий язык. Я попросил его не волноваться: скоро, мол, мы сделаем лучший прицел для его приложения. Иеремия несколько раз обратил моё внимание, что он не сможет оплатить мою работу, но если я смогу сделать её royalty free, то он с огромным удовольствием встроит прицел в приложение.

На том мы и сошлись. Я не знаю, зачем Иеремия вообще речь завёл про royalty, для меня, как и для любого дизайнера, решение такой задачи — это минивызов. Конечно же, я сразу взялся за работу.

Задача: сделать прицел для приложения дополненной реальности.
Проблема: есть некоторые рекомендации Google по прицелам для VR, материалов по AR практически не существует.

Для проведения анализа существующих решений подключил своего студента, которого обучаю дизайну: и мне поможет, и прокачается заодно в UX-кейсах в AR.

Первый подход к снаряду

Мы нашли немного трудностей, пару особенностей и много дурацких идей:

1. У прицела много состояний, целых 7: базовое, готовность к взаимодействию, вращение объекта, его перемещение, масштабирование, короткая (1 секунда) и долгая (3 секунды) фокусировки.
2. Прицел-кольцо отлично смотрится, чудесная идея, его можно при необходимости заполнять заливкой.
3. Большой прицел-кольцо будет хорошо заметен на объектах, не надо мельчить.
4. Надо вводить дополнительные элементы, стрелки и обводки, однозначно подсказывающие пользователю, что можно делать с объектом.
5. Нет, крупный прицел будет смотреться не очень, надо попробовать помельче.
6. Проблему контраста прицела на разных фонах буду решать его прозрачностью.
7. А может быть, добавить цветовое кодирование состояний прицела и сделать жизнь юзера поярче?
8. Как решать проблему перегруженности интерфейса при наведении на множество объектов с расстояния — к примеру, когда зашёл в комнату, где объектов десятки?

Первый подход оказался весьма плодотворным: мы разработали много вариантов дизайна и взаимодействия прицела с объектами.

Второй подход

Я посоветовался с Иеремией, мы протестировали на видео разные состояния прицелов — для разработчика, конечно, всё было «фантастиш», «авесом» и «эмейзинг». Кстати, поскольку с Иеремией у нас около 6 часов разницы во времени, нам редко удавалось пообщаться чаще раза за день. Обычно я просыпался, получал от него ответ, писал свой, и на следующее утро всё повторялось. Очень продуктивно :)

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

Очевидно, что второй подход оказался неудачным :)

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

Обсудил новые варианты с Иеремией, заодно спросил, можем ли мы как-то тречить форму и контуры реальных объектов (с объектами из AR проблем не было бы), ведь в мозгу дизайнера появляются даже самые бредовые мысли, на видео их хорошо заметно :)

Кстати, рекомендую плагин Sketch to VR, он позволяет очень быстро проверять все ваши идеи и гипотезы интерфейсных решений.

Третий подход, самый важный

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

Пользователи приложений с дополненной реальностью в 100% случаев пользуются смартфонами, уже привыкли к мультитач-экранам — масштабировать, вращать или перемещать объекты на экране для большинства уже привычный навык. Если, конечно, в качестве устройства у вас смартфон, а не очки с тач-контроллерами.

1. Проработал и принял за основной вариант новый дизайн базового состояния — прицел превращается в точку. Всегда контрастна, всегда видима.
2. Полупрозрачное кольцо вокруг прицела осталось — как маркер состояния готовности к взаимодействию.
3. Очень важное состояние — фокусировка в течение трёх секунд — реализовал как прогресс-бар по окружности, он подсказывает юзеру, что вот-вот произойдёт какое-либо взаимодействие.
4. Состояние фокусировки для разгрузки интерфейса предложил включать при подходе к объекту на расстояние один метр или ближе.
5. Протестировал плагином Sketch to VR разные размеры прицелов и элементов, определил оптимальные: точка — 8 px, кольцо — 24 px.

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

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

Этот проект позволил мне сделать два вывода:

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

Сейчас, завершив работу по дизайну прицела, я поставил себе следующую задачу — переделать дизайн интерфейса приложения wiARframe. Надеюсь, это будет не менее увлекательно.

Софт — wiARframe.
За помощь в анализе существующих решений спасибо Владимиру Овчинникову.
За мокап телефона спасибо monsterbox.
За фотографию спасибо Valdemaras.D.