Как создать AR-прототип с помощью Keynote

AR-проектирование является, пожалуй, одним из самых интересных олицетворений UX. Исходя из того, что эта невероятная технология используется в уникальных приложениях, UX-дизайнерам выпала возможность создавать пользовательские интерфейсы для расширенного опыта, который сегодня устанавливает руководящие принципы. Естественно, для того, что бы найти работающее решение, потребуется провести огромное количество итераций проектирования и прототипирования. Но как создать AR-прототип, который будет существовать в цифровом пространстве, и быть видимым только через экраны наших устройств? Вот эти всякие бумажные и цифровые прототипы абсолютно никак не помогут разработчикам с тестами взаимодействия в том контексте, в котором это приложение будет использоваться — в физическом. А этот самый контекст — ядро, необходимое для дополненной реальности.

Я и двое моих замечательных коллег недавно столкнулись с этой проблемой. В момент разработки приложения, в котором человек мог «примерить» на себе различные причёски с помощью AR. В этой статье я не хочу говорить о наших выводах или процессе проектирования. Давайте лучше сосредоточимся на том, как мы создавали AR-прототипы для проекта таким образом, чтобы мы могли их протестировать. Уверен, этот метод поможет многим разработчикам AR UX.

Когда пришло время создавать пользовательский поток и UI, в котором пользователь может менять свою прическу, мы зашли в тупик. Мы не смогли найти инструменты быстрого прототипирования для концепций дизайна, которые используют дополненную реальность. Использование низкокачественных вайрфреймов не обеспечивало достаточного физического контекста, при котором мы могли бы вертеть программу в руках и смотреть на наши волосы в цифровом формате. Такие инструменты, как ARKit или ARCore, требуют много времени и ресурсов для быстрого тестирования основных взаимодействий и концептуальных направлений. Вскоре мы стали использовать фронтальную камеру и начали представлять, каким бы могло быть взаимодействие с экраном.

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

1. Запись тематического видео

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

2. Экспорт вайрфрейма пользовательского интерфейса и компонентов

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

Компоненты с прозрачными областями, где будет находиться картинка с камеры

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

3. Добавление потокового видео в интерфейс

Теперь, когда у нас есть и видео и вайрфреймы, пришло время объединить их. Мы не использовали никаких подходящих для данного случая инструментов проектирования. Вместо этого мы создали прототип в Keynote. Да, Keynote, приложение на macOS! Создайте новый «keynote» в приложении и измените размер слайда в соответствии с вайрфреймом вашего приложения. Для этого нажмите «Документ» в правом верхнем углу экрана и измените размер слайда. Теперь вы можете создать слайды из всех вайрфреймов в необходимой последовательности. Кстати, здесь вы добавляете видео в качестве элемента фона и накладываете всё остальное поверх него.

Использование Keynote для добавления видео под всеми компонентами UI

Совет: если у вас есть переходы или анимация в макете, то в Keynote вам придётся создавать их снова. Это может быть сложно сделать, но в большинстве случаев хороший AR-прототип можно сделать и без использования всяческих анимаций.

4. Тестирование на мобильных экранах

Многие из вас могут этого не знать, но Keynote из MacOS может транслировать все ваши слайды на iPhone. Естественно, всё получится только в том случае, если размер слайда соответствует размеру экрана iPhone. А простым тапом можно переключить слайд. Итак, чтобы проверить все наши концепты, я делал всё так, как будто действительно взаимодействовал с экраном и пробовал новые прически на себе. Такой простейший AR-прототип позволил нам повторить различные концепции дизайна. Если у вас нет устройства с macOS или iPhone для использования KeyNote, вы можете использовать Google Slides для получения аналогичного эффекта.

Совет: Использование таких методов, как бодибординг или ролевые игры — хороший способ использовать прототипы на основе ваших проектов.

Плюсы

КПД

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

Контекстуальность

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

Минусы

Масштабируемость

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

Пользовательские тесты

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

Источник