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

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

Чтобы понять проблемы пользователей, связанные с использованием дополненной реальности при совершении покупок, мы провели удаленное модерируемое исследование с 10 участниками. Для этого исследования мы специально проанализировали функции AR в электронной торговле, предназначенные для оказания влияния на решение о покупке. Исследование включало множество мобильных веб-сайтов и приложений, включая виртуальные инструменты дополненной реальности для примерки, которые увеличивают дополняют внешний вид пользователя (обычно с использованием отдельной фронтальной камеры или веб-камеры). А также инструменты AR, которые показывали обстановку в комнате пользователя, чтобы он мог поместить товары внутрь окружающего пространства. Хотя эти функции немного разные, большинство наших выводов применимы к обоим типам инструментов AR.

Легкость обнаружения инструмента AR

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


Где и как продвигать AR

При первом посещении главной страницы веб-сайта или приложения многие пользователи просматривали страницу, чтобы проверить наличие рекламных акций и новинок. Если они заходили на сайт впервые, то хотели лучше понять, что сайт может им предложить. Большинство веб-сайтов не показывали функции AR на главной странице. Веб-сайт Warby Parker был одним из исключений. В нижней части экрана показывался плавающий баннер. Он предлагал виртуально примерить оправы для очков с помощью своего приложения. Этот баннер появлялся на всех страницах, пока пользователь не закрывал его.
Мобильная версия сайта Warby Parker: внизу каждой страницы плавающий баннер показывал инструмент AR, который есть в соответствующем приложении .


Показ ссылки на инструмент AR с домашней страницы или с главного экрана приложения работает лучше всего, только если пользователи могут просматривать несколько товаров, не выходя из инструмента. Например, на главной странице мобильного приложения Ulta было несколько виртуальных инструментов для примерки. Все они позволяли пользователям просматривать и опробовать несколько продуктов, не выходя из режима дополненной реальности. Кроме того, призыв к запуску инструмента должен быть достаточно описательным, чтобы пользователи не были удивлены, когда их впоследствии попросят разрешить доступ к камере их устройства. Изображения лиц людей и слова "примерка" обычно достаточно. В противоположность этому, выше на странице приложения Ulta была ссылка на foundation shade matcher (сравнение оттенков тональной основы), которая была показана в виде графических образцов цветов на телефоне, и участники были удивлены, когда приложение запросило разрешение доступа к камере.
Мобильное приложение Ulta: на главном экране были доступны ссылки на различные инструменты дополненной реальности для просмотра продуктов. Изображение лиц людей помогло участникам понять, что для этой функции потребуется доступ к камере или фотографии.


Всего один веб-сайт в нашем исследовании, Kendra Scott, продвигал функцию AR для примерки ювелирных изделий на страницах с каталогом товаров. Так как она отображалась в виде баннера над каталогом товаров, я ожидал, что участники будут её игнорировать из-за баннерной слепоты. Однако я был приятно удивлен, обнаружив, что пользователи заметили и заинтересовались AR. Одна участница сразу же заметила баннер и заявила: «Новая виртуальная примерка, это действительно интересно. Я никогда не видела виртуальной примерки сережек». К сожалению, функция AR была недоступна для многих товаров, что быстро привело к разочарованию. «На этом веб-сайте написано «примерьте их», но я выбрала третьи по популярности серьги на странице [и функция не была доступна]. Я так понимаю, Да, я могу понять, что она может быть доступна не для каждого товара, но покупатель может подумать, что уж для 20 или 50 популярных товаров у вас будет такая возможность». Поэтому делайте так, чтобы ваш инструмент AR работал со многими единицами товара - или, по крайней мере, с самыми популярными.
Мобильное приложение Etsy: хотя дополненная реальность была доступна для многих предметов искусства на стенах, страницы с каталогом товаров не показывали эту информацию, вынуждая пользователей, заинтересованных в этой функции, переходить на страницу с описанием, чтобы узнать, могут ли они просмотреть ее в дополненной реальности.


На самих страницах с описанием товара функции AR были лучше всего заметны, когда они появлялись рядом с изображением товара и имели четкие текстовые названия, такие как Просмотреть в AR, Предварительный просмотр в вашем пространстве, Просмотр в комнате или Примерка в реальном времени. В то время как иконка AR в форме куба была распознана некоторыми участниками, как связанная с использованием камеры для просмотра товаров в их обстановке, иконка камеры, похоже, работала также хорошо. Обратите внимание, что несколько участников вообще не узнали иконку куба AR, так что это определенно не универсальная иконка! На вопрос, что это была за иконка, один участник сказал: «Я предполагаю, что она выглядит как куб, как 3D куб... Но ... Если бы я её не использовал раньше, я бы её не узнал». Иконки всегда работали лучше всего в паре со значимым текстовым названием.
Мобильный веб-сайт Kendra Scott: на страницах со списком товаров отображался баннер, предлагающий возможность виртуально примерить украшения.


Как только участники поняли, что существует опция AR, первое, что они хотели видеть на страницах с каталогом товаров - это визуальный индикатор, который бы показывал, какие элементы можно просматривать в AR. Участники быстро заметили, что не все товары были доступны в AR, и все же у них не было возможности узнать об этом, пока они не посетили каждую страницу товара. Например, один участник мобильного приложения Etsy пожаловался: «Написано, что товары с иконкой можно посмотреть виртуально, но вам нужно щелкнуть на каждый товар, чтобы узнать, есть ли у него эта функция. Прокручивая каталог, вы об этом не узнаете. Это немного раздражает ".
Иконки AR рядом с главной фотографией товара были более заметны, чем реклама этой функции далеко внизу на странице товара. Все три иконки были замечены пользователями и включали значимое текстовое название, чтобы помочь пользователям понять их значение. (Для определения того, какая подача наиболее эффективна понадобятся количественные исследования.)


Расположение кнопки на видном месте и содержательное название важнее используемой иконки. Например, текстовая кнопка Try It On (Примерь) на страницах с описанием товаров мобильной версии веб-сайта Ray-Ban работала хорошо и была замечена и понятна пользователями. Не создавайте полностью оригинальную иконку, так как она может сбить с толку и ввести в заблуждение пользователей ( и не поможет созданию стандартной иконки AR). К сожалению, после использования функции AR веб-сайт Ray-Ban заменил простую текстовую кнопку нечетким переключателем. Участники исследования не были уверены, что именно означала эта иконка без подписи и им приходилось несколько раз менять состояние переключателя вправо и влево, чтобы понять ее функцию.
Мобильная версия веб-сайта Ray-Ban: текстовая кнопка Try It On (Примерь) проста и понятна пользователям. К сожалению, эта кнопка была заменена сбивающим с толку переключателем для взаимодействия с инструментом AR.


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

Однако имейте в виду, что пользователи могут быстро закрыть всплывающие окна, не прочитав текст внутри. Если они это сделают, у них не будет простого способа снова получить доступ к этой информации. Например, участница исследования мобильного приложения Etsy была разочарована тем, что подсказка появилась только один раз, а сам значок было легко не заметить, потому что он сливался с фоном. Она прокомментировала: «Они должны больше подсказывать вам, потому что люди вроде меня, которые думают, что уже всё знают, упускают возможность. … Я думаю, что это действительно крутая функция, я бы просто не узнала, где её искать и искать ли вообще». Альтернативой использованию всплывающих окон является выделение самой кнопки (как уже обсуждалось) или использование целенаправленной анимации, если эта функция заслуживает внимания. Например, мобильное приложение Warby Parker показало короткую анимацию, рекламирующую функцию Виртуальная примерка, когда пользователь впервые попал на страницу с описанием товара. Анимация показывала, что содержимое страницы можно закрыть, проведя пальцем вниз, чтобы получить доступ к инструменту AR.
Подсказки (например, Etsy, слева) и анимация (например, в приложении Warby Parker, справа), уведомляют пользователей о существовании инструмента AR. В целом их хорошо восприняли, потому что они были представлены в правильном контексте и давали пользователям полезную информацию, которую они не догадались бы искать.


Беспрепятственные переходы между каналами

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


И наоборот, некоторые мобильные веб-сайты давали только общую ссылку, предлагающую пользователям загрузить мобильное приложение, чтобы иметь возможность использовать функцию AR. После запуска приложение просто открывало главную страницу. Кроме того, общая реклама приложения вынудила нескольких пользователей вообще пропустить ссылку и сразу перейти в магазин приложений, чтобы найти приложение, тем самым исключив возможность беспрепятственного перехода к конкретному продукту. (Хотя, вероятно, такие общие ссылки не так дезориентировали пользователей, как те, что выглядели ведущими к конкретному товару, но на самом деле не вели.) Например, страницы товара в мобильной версии веб-сайта Interior Define показывали функцию визуализации товара у себя дома с помощью приложения AR. Некоторые участники полностью её пропустили, потому что она была расположена очень низко на странице. Ее показ вводил в заблуждение, потому что людям приходилось заново искать товар в приложении.
Мобильная версия веб-сайта Interior Define: на страницах товара в самом низу под описанием товара, была размещена реклама соответствующего приложения с дополненной реальностью. Эта ссылка не хранила текущую страницу продукта, вынуждая людей начинать поиск с нуля в приложении.


Хуже всего то, что несколько участников были раздражены, обнаружив, что диван, который они просматривали на веб-сайте, не доступен в приложении! Один участник сдался после того, как он просмотрел приложение, повторно посетил мобильную версию веб-сайта, чтобы найти название товара и вернулся в приложение для непосредственного поиска. Он сказал: «Очевидно, я не могу найти тот, который меня интересовал. Это немного разочаровывает». Эта проблема, к сожалению, была не только у Interior Define. По-видимому она распространена среди специализированных приложений AR. Их основная функция заключается в просмотре товаров в реальных условиях, - в отличие от приложений, которые включают функции AR в основное приложение для покупок.


Использование инструмента AR

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


Сложная и непривычная настройка

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

Пошаговые инструкции, ситуативно подходящие к обстановке пользователя, лучше всего помогали им с настройкой. Функция дополненной реальности мобильного приложения Etsy обеспечивает четкую справочную информацию при настройке, предлагая пользователю «сканировать всю стену, включая места, где она встречается с полом и потолком». Уточнение того, что включать в объектив камеры, было чрезвычайно полезным, поскольку в противном случае пользователи не знали бы, что показывать. После успешной настройки далее по инструкции пользователям предлагали коснуться экрана, чтобы товар появился.
Мобильное приложение Etsy: четкие пошаговые инструкции помогали пользователям взаимодействовать с этим незнакомым инструментом.


Общие справочные инструкции, которые не решают текущую проблему пользователя, бесполезны и могут ухудшить ситуацию. Несколько участников изо всех сил пытались настроить инструмент AR в приложении Best Buy и сдались, прежде чем им было предложено продолжить. Основная проблема заключалась в главной инструкции Move Closer (Подойди ближе), из-за которой некоторые в конечном итоге касались стены своим телефоном, пытаясь следовать в этом направлении.

«Это занимает гораздо [больше] времени, чем я ожидал. Итак, я не знаю, что мне нужно делать. Он говорит подойти ближе. Я делаю это, хорошо. На самом деле это немного сбивало с толку».

«Это был очень неудовлетворительный опыт. Я не знаю, что мне нужно было сделать. Он все время говорил: «Подойди ближе, подойди ближе, до точки, где я почти касаюсь стены». В этом случае вы не сможете увидеть, как это выглядит в пространстве, если подойдете так близко».

Инструкция Move Closer (Подойди ближе) также прямо противоречила более поздней подсказке, предлагающей найти точку фокусировки на стене в объективе камеры (что, вероятно, легче сделать издалека). Кроме того, некоторые участники истолковали этот совет как означающий, что им нужно держать что-то в поле зрения камеры. Это было трудно и неэффективно.
Мобильное приложение Best Buy: (Слева) Общая инструкция Move Closer (Подойди ближе) сбивала с толку и вводила в заблуждение, поскольку чаще всего затрудняла настройку. (Справа) Эти инструкции были немного более полезными и правильно представлены только после нескольких неудачных попыток настройки, но все же были слишком неконкретными, чтобы эффективно помогать пользователю в процессе.


Исключением были виртуальные примерочные. У них не было проблем с настройкой. Контуры лица легче обнаружить, чем пустые стены и поэтому настройка была более точной. Также они знакомы пользователям благодаря различным маскам для селфи и фильтрам в социальных сетях, таких как Snapchat и Instagram. Одна участница была впечатлена скоростью настройки в приложении Warby Parker, заявив: «Ого, это было легко сделать. Он автоматически нашел мои глаза. Я ожидала, что мне нужно будет определить его положение, но он автоматически нашел, где были мои глаза и переносица, это, вау, очень легко и удобно».

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


Требует излишней концентрации внимания

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

Например, участница исследования мобильного приложения Warby Parker сделала снимок экрана, используя кнопки камеры, а не функцию фото в правом верхнем углу инструмента AR, когда ее спросили, как она могла бы получить сторонее мнение о паре очков, которая её заинтересовала. Позже она объяснила: «Я не знала, что она есть; у него уже есть функция скриншота. Я просто не обратила внимание. Она была в правом верхнем углу. … Думаю, я смотрю больше вниз, чем вверх, и эта функция была наверху, и, может быть, я просто не заметила её. … Потому что первое, что я делала, это одевала оправы, а потом смотрела вниз, я смотрю на описание».

Точно так же участница, использующая инструмент виртуальной примерки мобильного приложения Ulta, искала способ полностью удалить один тип макияжа, а не выбирать другой цвет. Она почти сдалась, когда наконец нашла функцию списка, представленную в верхней части экрана, которая позволяла ей просматривать все выбранные продукты, а также возможность удалять определенные элементы. Она сказала: «Знаешь, что? Я просто заметила наверху… все это время я даже не смотрела наверх. Итак, теперь я вижу, что наверху есть еще кое-что. Now Wearing (Сейчас Нанесено), хорошо. … Тот факт, что вы взаимодействуете с нижней частью экрана, так отвлекает, что я не так заметила иконки сверху».
Мобильное приложение Ulta: в нижней части экрана пользователи могут выбирать различные товары для примерки, поэтому эта область привлекает большую часть внимания пользователей. Это означало, что функции в верхней части экрана по большей части оставались незамеченными.


Иногда, такое внимание к нижней части инструмента AR приводило к тому, что участники также пропускали изменения на основном экране камеры. Например, несколько участников выбирали телевизор в мобильном приложении Best Buy. Они заметили значок линейки в инструменте AR и щелкнули по нему, ожидая показа измерений. Но они были разочарованы тем, что, казалось, на экране появилась только информация о ценах - они не смотрели наверх на основной экран AR, где были показаны измерения! Один участник заявил: «Это не то, чего я ожидал… Я ожидал, что появится линейка. … какие-то размеры, например, длина и ширина, а вместо этого под изображением появилась цена».
Мобильное приложение Best Buy: пользователи были настолько сосредоточены на взаимодействии с нижней частью инструмента AR и просмотре изменений информации, которые произошли там после выбора значка линейки, что они не заметили изменений, отображаемых на самом экране AR.


В этом случае лучшим решением, возможно, было бы добавить измерения только к основному экрану AR (вместе с визуальной обратной связью, показывающей, что кнопка была выбрана). Тогда пользователи продолжали бы смотреть на экран, чтобы найти, что изменилось. Добавление несвязанной информации о цене и кнопки Add to Cart (Добавить в корзину) отвлекало пользователей и заставляло их поверить, что это основная функция данной кнопки.


Заключение

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

Nielsen Norman Group“UX Guidelines for Augmented-Reality Shopping Tools”.
ПРОФЕССИЯ
UX/UI ДИЗАЙНЕР
3-х месячный практический курс
от ведущей дизайн студии

скидка — 35% в этом месяце
ПОДЕЛИТЬСЯ МАТЕРИАЛОМ
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ НОВОСТИ ПО ДИЗАЙНУ ЗА НЕДЕЛЮ?
ПЕРЕВОДЫ
Визуальная иерархия в UX дизайне
ПЕРЕВОДЫ
Как тестировать контент с пользователями
ПЕРЕВОДЫ
Межкультурный UX дизайн
© 2016 Your company
ПЕРЕВОДЫ
UX гайд для шоппинга с дополненной реальностью
Резюме: Инструменты дополненной реальности в электронной коммерции относительно новое явление, поэтому их должно быть легко обнаружить и понять как ими пользоваться. Проблемы с их настройкой достаточно распространены, и пользователям приходится уделять повышенное внимание тому, чтобы разобраться с этой незнакомой функцией.

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

Чтобы понять проблемы пользователей, связанные с использованием дополненной реальности при совершении покупок, мы провели удаленное модерируемое исследование с 10 участниками. Для этого исследования мы специально проанализировали функции AR в электронной торговле, предназначенные для оказания влияния на решение о покупке. Исследование включало множество мобильных веб-сайтов и приложений, включая виртуальные инструменты дополненной реальности для примерки, которые увеличивают дополняют внешний вид пользователя (обычно с использованием отдельной фронтальной камеры или веб-камеры). А также инструменты AR, которые показывали обстановку в комнате пользователя, чтобы он мог поместить товары внутрь окружающего пространства. Хотя эти функции немного разные, большинство наших выводов применимы к обоим типам инструментов AR.

Легкость обнаружения инструмента AR

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


Где и как продвигать AR

При первом посещении главной страницы веб-сайта или приложения многие пользователи просматривали страницу, чтобы проверить наличие рекламных акций и новинок. Если они заходили на сайт впервые, то хотели лучше понять, что сайт может им предложить. Большинство веб-сайтов не показывали функции AR на главной странице. Веб-сайт Warby Parker был одним из исключений. В нижней части экрана показывался плавающий баннер. Он предлагал виртуально примерить оправы для очков с помощью своего приложения. Этот баннер появлялся на всех страницах, пока пользователь не закрывал его.
Мобильная версия сайта Warby Parker: внизу каждой страницы плавающий баннер показывал инструмент AR, который есть в соответствующем приложении .


Показ ссылки на инструмент AR с домашней страницы или с главного экрана приложения работает лучше всего, только если пользователи могут просматривать несколько товаров, не выходя из инструмента. Например, на главной странице мобильного приложения Ulta было несколько виртуальных инструментов для примерки. Все они позволяли пользователям просматривать и опробовать несколько продуктов, не выходя из режима дополненной реальности. Кроме того, призыв к запуску инструмента должен быть достаточно описательным, чтобы пользователи не были удивлены, когда их впоследствии попросят разрешить доступ к камере их устройства. Изображения лиц людей и слова "примерка" обычно достаточно. В противоположность этому, выше на странице приложения Ulta была ссылка на foundation shade matcher (сравнение оттенков тональной основы), которая была показана в виде графических образцов цветов на телефоне, и участники были удивлены, когда приложение запросило разрешение доступа к камере.
Мобильное приложение Ulta: на главном экране были доступны ссылки на различные инструменты дополненной реальности для просмотра продуктов. Изображение лиц людей помогло участникам понять, что для этой функции потребуется доступ к камере или фотографии.


Всего один веб-сайт в нашем исследовании, Kendra Scott, продвигал функцию AR для примерки ювелирных изделий на страницах с каталогом товаров. Так как она отображалась в виде баннера над каталогом товаров, я ожидал, что участники будут её игнорировать из-за баннерной слепоты. Однако я был приятно удивлен, обнаружив, что пользователи заметили и заинтересовались AR. Одна участница сразу же заметила баннер и заявила: «Новая виртуальная примерка, это действительно интересно. Я никогда не видела виртуальной примерки сережек». К сожалению, функция AR была недоступна для многих товаров, что быстро привело к разочарованию. «На этом веб-сайте написано «примерьте их», но я выбрала третьи по популярности серьги на странице [и функция не была доступна]. Я так понимаю, Да, я могу понять, что она может быть доступна не для каждого товара, но покупатель может подумать, что уж для 20 или 50 популярных товаров у вас будет такая возможность». Поэтому делайте так, чтобы ваш инструмент AR работал со многими единицами товара - или, по крайней мере, с самыми популярными.
Мобильное приложение Etsy: хотя дополненная реальность была доступна для многих предметов искусства на стенах, страницы с каталогом товаров не показывали эту информацию, вынуждая пользователей, заинтересованных в этой функции, переходить на страницу с описанием, чтобы узнать, могут ли они просмотреть ее в дополненной реальности.


На самих страницах с описанием товара функции AR были лучше всего заметны, когда они появлялись рядом с изображением товара и имели четкие текстовые названия, такие как Просмотреть в AR, Предварительный просмотр в вашем пространстве, Просмотр в комнате или Примерка в реальном времени. В то время как иконка AR в форме куба была распознана некоторыми участниками, как связанная с использованием камеры для просмотра товаров в их обстановке, иконка камеры, похоже, работала также хорошо. Обратите внимание, что несколько участников вообще не узнали иконку куба AR, так что это определенно не универсальная иконка! На вопрос, что это была за иконка, один участник сказал: «Я предполагаю, что она выглядит как куб, как 3D куб... Но ... Если бы я её не использовал раньше, я бы её не узнал». Иконки всегда работали лучше всего в паре со значимым текстовым названием.
Мобильный веб-сайт Kendra Scott: на страницах со списком товаров отображался баннер, предлагающий возможность виртуально примерить украшения.


Как только участники поняли, что существует опция AR, первое, что они хотели видеть на страницах с каталогом товаров - это визуальный индикатор, который бы показывал, какие элементы можно просматривать в AR. Участники быстро заметили, что не все товары были доступны в AR, и все же у них не было возможности узнать об этом, пока они не посетили каждую страницу товара. Например, один участник мобильного приложения Etsy пожаловался: «Написано, что товары с иконкой можно посмотреть виртуально, но вам нужно щелкнуть на каждый товар, чтобы узнать, есть ли у него эта функция. Прокручивая каталог, вы об этом не узнаете. Это немного раздражает ".
Иконки AR рядом с главной фотографией товара были более заметны, чем реклама этой функции далеко внизу на странице товара. Все три иконки были замечены пользователями и включали значимое текстовое название, чтобы помочь пользователям понять их значение. (Для определения того, какая подача наиболее эффективна понадобятся количественные исследования.)


Расположение кнопки на видном месте и содержательное название важнее используемой иконки. Например, текстовая кнопка Try It On (Примерь) на страницах с описанием товаров мобильной версии веб-сайта Ray-Ban работала хорошо и была замечена и понятна пользователями. Не создавайте полностью оригинальную иконку, так как она может сбить с толку и ввести в заблуждение пользователей ( и не поможет созданию стандартной иконки AR). К сожалению, после использования функции AR веб-сайт Ray-Ban заменил простую текстовую кнопку нечетким переключателем. Участники исследования не были уверены, что именно означала эта иконка без подписи и им приходилось несколько раз менять состояние переключателя вправо и влево, чтобы понять ее функцию.
Мобильная версия веб-сайта Ray-Ban: текстовая кнопка Try It On (Примерь) проста и понятна пользователям. К сожалению, эта кнопка была заменена сбивающим с толку переключателем для взаимодействия с инструментом AR.


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

Однако имейте в виду, что пользователи могут быстро закрыть всплывающие окна, не прочитав текст внутри. Если они это сделают, у них не будет простого способа снова получить доступ к этой информации. Например, участница исследования мобильного приложения Etsy была разочарована тем, что подсказка появилась только один раз, а сам значок было легко не заметить, потому что он сливался с фоном. Она прокомментировала: «Они должны больше подсказывать вам, потому что люди вроде меня, которые думают, что уже всё знают, упускают возможность. … Я думаю, что это действительно крутая функция, я бы просто не узнала, где её искать и искать ли вообще». Альтернативой использованию всплывающих окон является выделение самой кнопки (как уже обсуждалось) или использование целенаправленной анимации, если эта функция заслуживает внимания. Например, мобильное приложение Warby Parker показало короткую анимацию, рекламирующую функцию Виртуальная примерка, когда пользователь впервые попал на страницу с описанием товара. Анимация показывала, что содержимое страницы можно закрыть, проведя пальцем вниз, чтобы получить доступ к инструменту AR.
Подсказки (например, Etsy, слева) и анимация (например, в приложении Warby Parker, справа), уведомляют пользователей о существовании инструмента AR. В целом их хорошо восприняли, потому что они были представлены в правильном контексте и давали пользователям полезную информацию, которую они не догадались бы искать.


Беспрепятственные переходы между каналами

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


И наоборот, некоторые мобильные веб-сайты давали только общую ссылку, предлагающую пользователям загрузить мобильное приложение, чтобы иметь возможность использовать функцию AR. После запуска приложение просто открывало главную страницу. Кроме того, общая реклама приложения вынудила нескольких пользователей вообще пропустить ссылку и сразу перейти в магазин приложений, чтобы найти приложение, тем самым исключив возможность беспрепятственного перехода к конкретному продукту. (Хотя, вероятно, такие общие ссылки не так дезориентировали пользователей, как те, что выглядели ведущими к конкретному товару, но на самом деле не вели.) Например, страницы товара в мобильной версии веб-сайта Interior Define показывали функцию визуализации товара у себя дома с помощью приложения AR. Некоторые участники полностью её пропустили, потому что она была расположена очень низко на странице. Ее показ вводил в заблуждение, потому что людям приходилось заново искать товар в приложении.
Мобильная версия веб-сайта Interior Define: на страницах товара в самом низу под описанием товара, была размещена реклама соответствующего приложения с дополненной реальностью. Эта ссылка не хранила текущую страницу продукта, вынуждая людей начинать поиск с нуля в приложении.


Хуже всего то, что несколько участников были раздражены, обнаружив, что диван, который они просматривали на веб-сайте, не доступен в приложении! Один участник сдался после того, как он просмотрел приложение, повторно посетил мобильную версию веб-сайта, чтобы найти название товара и вернулся в приложение для непосредственного поиска. Он сказал: «Очевидно, я не могу найти тот, который меня интересовал. Это немного разочаровывает». Эта проблема, к сожалению, была не только у Interior Define. По-видимому она распространена среди специализированных приложений AR. Их основная функция заключается в просмотре товаров в реальных условиях, - в отличие от приложений, которые включают функции AR в основное приложение для покупок.


Использование инструмента AR

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


Сложная и непривычная настройка

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

Пошаговые инструкции, ситуативно подходящие к обстановке пользователя, лучше всего помогали им с настройкой. Функция дополненной реальности мобильного приложения Etsy обеспечивает четкую справочную информацию при настройке, предлагая пользователю «сканировать всю стену, включая места, где она встречается с полом и потолком». Уточнение того, что включать в объектив камеры, было чрезвычайно полезным, поскольку в противном случае пользователи не знали бы, что показывать. После успешной настройки далее по инструкции пользователям предлагали коснуться экрана, чтобы товар появился.
Мобильное приложение Etsy: четкие пошаговые инструкции помогали пользователям взаимодействовать с этим незнакомым инструментом.


Общие справочные инструкции, которые не решают текущую проблему пользователя, бесполезны и могут ухудшить ситуацию. Несколько участников изо всех сил пытались настроить инструмент AR в приложении Best Buy и сдались, прежде чем им было предложено продолжить. Основная проблема заключалась в главной инструкции Move Closer (Подойди ближе), из-за которой некоторые в конечном итоге касались стены своим телефоном, пытаясь следовать в этом направлении.

«Это занимает гораздо [больше] времени, чем я ожидал. Итак, я не знаю, что мне нужно делать. Он говорит подойти ближе. Я делаю это, хорошо. На самом деле это немного сбивало с толку».

«Это был очень неудовлетворительный опыт. Я не знаю, что мне нужно было сделать. Он все время говорил: «Подойди ближе, подойди ближе, до точки, где я почти касаюсь стены». В этом случае вы не сможете увидеть, как это выглядит в пространстве, если подойдете так близко».

Инструкция Move Closer (Подойди ближе) также прямо противоречила более поздней подсказке, предлагающей найти точку фокусировки на стене в объективе камеры (что, вероятно, легче сделать издалека). Кроме того, некоторые участники истолковали этот совет как означающий, что им нужно держать что-то в поле зрения камеры. Это было трудно и неэффективно.
Мобильное приложение Best Buy: (Слева) Общая инструкция Move Closer (Подойди ближе) сбивала с толку и вводила в заблуждение, поскольку чаще всего затрудняла настройку. (Справа) Эти инструкции были немного более полезными и правильно представлены только после нескольких неудачных попыток настройки, но все же были слишком неконкретными, чтобы эффективно помогать пользователю в процессе.


Исключением были виртуальные примерочные. У них не было проблем с настройкой. Контуры лица легче обнаружить, чем пустые стены и поэтому настройка была более точной. Также они знакомы пользователям благодаря различным маскам для селфи и фильтрам в социальных сетях, таких как Snapchat и Instagram. Одна участница была впечатлена скоростью настройки в приложении Warby Parker, заявив: «Ого, это было легко сделать. Он автоматически нашел мои глаза. Я ожидала, что мне нужно будет определить его положение, но он автоматически нашел, где были мои глаза и переносица, это, вау, очень легко и удобно».

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


Требует излишней концентрации внимания

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

Например, участница исследования мобильного приложения Warby Parker сделала снимок экрана, используя кнопки камеры, а не функцию фото в правом верхнем углу инструмента AR, когда ее спросили, как она могла бы получить сторонее мнение о паре очков, которая её заинтересовала. Позже она объяснила: «Я не знала, что она есть; у него уже есть функция скриншота. Я просто не обратила внимание. Она была в правом верхнем углу. … Думаю, я смотрю больше вниз, чем вверх, и эта функция была наверху, и, может быть, я просто не заметила её. … Потому что первое, что я делала, это одевала оправы, а потом смотрела вниз, я смотрю на описание».

Точно так же участница, использующая инструмент виртуальной примерки мобильного приложения Ulta, искала способ полностью удалить один тип макияжа, а не выбирать другой цвет. Она почти сдалась, когда наконец нашла функцию списка, представленную в верхней части экрана, которая позволяла ей просматривать все выбранные продукты, а также возможность удалять определенные элементы. Она сказала: «Знаешь, что? Я просто заметила наверху… все это время я даже не смотрела наверх. Итак, теперь я вижу, что наверху есть еще кое-что. Now Wearing (Сейчас Нанесено), хорошо. … Тот факт, что вы взаимодействуете с нижней частью экрана, так отвлекает, что я не так заметила иконки сверху».
Мобильное приложение Ulta: в нижней части экрана пользователи могут выбирать различные товары для примерки, поэтому эта область привлекает большую часть внимания пользователей. Это означало, что функции в верхней части экрана по большей части оставались незамеченными.


Иногда, такое внимание к нижней части инструмента AR приводило к тому, что участники также пропускали изменения на основном экране камеры. Например, несколько участников выбирали телевизор в мобильном приложении Best Buy. Они заметили значок линейки в инструменте AR и щелкнули по нему, ожидая показа измерений. Но они были разочарованы тем, что, казалось, на экране появилась только информация о ценах - они не смотрели наверх на основной экран AR, где были показаны измерения! Один участник заявил: «Это не то, чего я ожидал… Я ожидал, что появится линейка. … какие-то размеры, например, длина и ширина, а вместо этого под изображением появилась цена».
Мобильное приложение Best Buy: пользователи были настолько сосредоточены на взаимодействии с нижней частью инструмента AR и просмотре изменений информации, которые произошли там после выбора значка линейки, что они не заметили изменений, отображаемых на самом экране AR.


В этом случае лучшим решением, возможно, было бы добавить измерения только к основному экрану AR (вместе с визуальной обратной связью, показывающей, что кнопка была выбрана). Тогда пользователи продолжали бы смотреть на экран, чтобы найти, что изменилось. Добавление несвязанной информации о цене и кнопки Add to Cart (Добавить в корзину) отвлекало пользователей и заставляло их поверить, что это основная функция данной кнопки.


Заключение

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

Nielsen Norman Group “UX Guidelines for Augmented-Reality Shopping Tools”.
ПРОФЕССИЯ
UX/UI ДИЗАЙНЕР
3-х месячный практический курс
от ведущей дизайн студии

скидка — 35% в этом месяце
ПОДЕЛИТЬСЯ МАТЕРИАЛОМ
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ НОВОСТИ ЗА НЕДЕЛЮ?