Моделируем реальность: как технологии VR и AR влияют на веб-дизайн

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

В закладки

Отличия двух технологий

Виртуальная реальность (Virtual Reality или VR) моделирует отдельный мир. Для взаимодействия нужны специальные устройства, передающие движения человека и воздействующие на органы чувств, чаще всего это шлем или очки.

Больше всего VR-контента в игровой индустрии, но для широкого применения устройствам не хватает мощностей, контент сложно адаптировать, а из-за качества видео после погружения в «виртуальный мир» кружится голова.

С дополненной реальностью (Augmented reality или AR) работать проще. Это реальный мир, дополненный виртуальными элементами, которые его «расширяют» или «обогащают».

По данным Forbes почти 75% мировых брендов применяют VR-приложения в своей индустрии, чтобы повысить уровень сервиса.

Дополненная реальность уже помогает представить как мебель Ikea будет смотреться в вашем интерьере, используя только приложение для смартфона, а кроме того она дает возможности:

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

По данным исследования, проведенного Sketchfab — одной из крупнейших платформ, публикующих 3D-контент, большинство членов сообщества (49,1%) верят, что основная зоной применения VR останутся игры. На втором месте образование, а на третьем медицина.

Другое исследование, проведенное Statista, показывает, что рынок и виртуальной, и дополненной реальности вырастет до $ 29,5 млн в 2020 году по сравнению с $7.1 млн в 2017.

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

Технические гиганты, включая Facebook и Microsoft вкладывают миллионы долларов в эту область, что постепенно превращает VR веб-дизайн из научно-фантастического сна в реальность.

VR-технологии в рекламе

Компании из разных сегментов уже используют VR в рекламе. Volvo с помощью приложения старается передать ощущение от управления автомобилем, а Oreo показывает мир шоколада в своем видео 360.

Помимо игр, дополненная реальность становится мостиком между офлайн и онлайн-продажами.

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

VR-технологии в веб-дизайне

Попытки создания «объемного» пользовательского опыта начались еще в 1962 году с работы над масштабируемым интерфейсом пользователя (Zooming User Interface). В рабочей области располагались основные элементы, а дополнительные появлялись по мере приближения и увеличения содержимого. Предполагалось, что масштабируемость повысит уровень вовлечения и визуально обогатит, а также упростит пользовательский опыт. Эти идеи противоречили друг другу, и технология не прижилась.

Пока мы еще не ходим в VR-очках каждый день, технология уже повлияла на пользовательский опыт в интернете. В первую очередь, это появление 3D-карт и контента 360 — возможность увидеть товар в разных ракурсах, «погулять» по Google Earth или гостинице, в которой вы хотите забронировать номер.

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

Еще один фактор, способствующий развитию VR веб-дизайна — появление библиотеки WebVR Javascript. WebVR загружает 3D-контент прямо в браузер, поэтому скачивать отдельные приложения для просмотра не надо, что удобно и пользователям, и рекламодателям.

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital агентство Далее", "author_type": "self", "tags": [], "comments": 2, "likes": 4, "favorites": 9, "is_advertisement": false, "subsite_label": "design", "id": 67318, "is_wide": false, "is_ugc": true, "date": "Wed, 15 May 2019 12:09:42 +0300" }
SMS-чат для клиентов
{ "id": 67318, "author_id": 134321, "diff_limit": 1000, "urls": {"diff":"\/comments\/67318\/get","add":"\/comments\/67318\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/67318"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

2 комментария 2 комм.

Популярные

По порядку

1

Интересная статья, спасибо! А что делать с AR, VR после внедрения нейроинтерфейсов?

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }