Что не так с часами, поясом и тарелкой в виртуальной реальности: проблемы в создании VR-интерфейса Facebook Spaces

Перевод материала ведущего дизайнера проекта соцсети в виртуальной реальности Facebook Spaces Кристофа Тозьета.

В закладки

Новый тип интерфейса

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

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

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

Для того чтобы пользователи могли отличать реальные объекты от объектов из пользовательского интерфейса, мы почти сразу начали использовать в своём UI голографический визуальный язык. Это позволило нам визуально отделить интерактивные элементы от остального окружения.

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

Создавая Facebook Spaces, мы встретились с небольшим количеством интерфейсов и взаимодействий, которые стоят упоминания. Некоторые из них не стали успешными, и от них пришлось отказаться, другие показали себя хорошо. Далее мы поделимся концептами, которые протестировали для решения некоторых задач, и выводами, к которым пришли.

Виртуальный стол

В самом начале мы строили прототипы, в которых люди могли свободно бродить по пространству. Мы попробовали различные решения проблемы передвижения в пространстве и несколько различных видов пространств. И быстро осознали: самая большая проблема такого подхода — в том, что поговорить с кем-то очень сложно. Когда люди получали возможность свободно двигаться в пространстве, они, как правило, терялись и даже не пытались взаимодействовать друг с другом.

В другом эксперименте мы создали инструмент, где пользователи смогли бы создавать вместе музыку на большой виртуальной клавиатуре. Хотя процесс был весёлым, люди всё равно не взаимодействовали друг с другом.

Мы наблюдали за общением людей в реальном мире и нашли новое решение — виртуальный стол, который мог бы стать опорой для разговора.

На конференции F8 в 2016 году мы первый раз попробовали создать виртуальный стол, вокруг которого люди могли собираться, ставить или брать с него предметы. Мы попробовали поиграть с размерами и формой (квадрат, прямоугольник, большой, маленький, прозрачный, непрозрачный и так далее). Больше всего нам понравился круглый голографический стол, за которым могут комфортно разместиться четыре человека.

Основная навигация

Часы виртуальной реальности

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

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

Виртуальный ремень с инструментами

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

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

Виртуальный друг

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

У такого подхода было множество плюсов.

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

Но и недостатков тоже немало.

  • Решение с радиальным меню означало, что вам придётся много раз поднимать руку, чтобы нажать на различные подпункты меню и получить то, что вам нужно. Рука быстро устаёт, и вообще это довольно неэффективно.
  • Открывался 2D-интерфейс, а значит, вам пришлось бы поворачиваться, чтобы увидеть его, или он мог открыться в такой позиции, что мы не могли гарантировать комфортное взаимодействие с ним.
  • Свободное перемещение интерфейса также означало, что пользователь может где-нибудь потерять инструмент.
  • Сложно выработать мышечную память при взаимодействии с трёхмерным UI, если вы постоянно меняете его положение и ориентацию.

Виртуальная платформа

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

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

Виртуальная тарелка

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

Так же, как и с первой виртуальной платформой, основным недостатком этого решения было количество пространства, которое тарелка занимала на столе. Мы хотели решить эту проблему, добавив кнопку «открыть-закрыть» рядом с краем стола. Ещё одна сложность состояла в том, чтобы передать связь с исходным пунктом меню любого интерфейса, который открывался после того, как пользователь сделает выбор. С таким концептом это было непросто.

Виртуальная платформа 2.0

Новое решение было своего рода союзом между первой платформой и тарелкой: трёхмерная платформа с 2D-интерфейсом на ней, которая может проецировать интерфейс или предмет прямо перед вами и может быть спрятана прямо в стол, если не нужна.

Есть несколько причин, по которым это решение сработало.

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

Центр трансляции (Display Center)

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

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

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

Наше решение — центр трансляции: круглая зона в центре стола, которая активируется, когда вы бросаете в неё контент, и начинает автоматически проигрывать его. Фото или видео-360 внезапно становится вашим окружением, а 2D-контент проецируется на большой экран.

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

Wrist UI

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

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

Виртуальные часы 2.0

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

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

Развивающаяся система

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

Дальняя дорога

Создание первой версии Facebook Spaces было очень сложным, весёлым и благодарным временем в моей карьере. У меня появился шанс взяться за что-то амбициозное и одновременно весёлое вместе с командой талантливых и увлечённых людей.

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

Но как и во всём, что касается Facebook Spaces и всей сферы виртуальной реальности в целом, это всего лишь первый шаг — начало длинного пути. И я рад быть частью этого.

#дизайн #VR #UI

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

Написать
{ "author_name": "Ольга Шишкова", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","vr","ui"], "comments": 0, "likes": 14, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 36376, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 36376, "author_id": 107557, "diff_limit": 1000, "urls": {"diff":"\/comments\/36376\/get","add":"\/comments\/36376\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/36376"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

Комментариев нет 0 комм.

Популярные

По порядку

Комментарий удален

0

Прямой эфир

[ { "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-уведомления