Ошибки при проектировании интерфейса VR, VR для дизайнеров интерфейсов

Ошибка #1. Маленькие или далеко расположенные элементы


В то время как луч от джойстика в VR такой же тонкий как и кончик курсора мышки, может показаться, что взаимодействие в VR может быть “точечным”, вплоть до наведения на букву текста (как наведение на ссылку в вебе, например). В случае VR — это не так.

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

То есть в VR, как и в разработке мобильных интерфейсов, необходимо сделать большую прозрачную обертку маленького интерактивного объекта интерактивной, а не сам объект. В дизайне мобильных приложений это так называемый bounding box. Тапаю по которому эмулируется нажатие на “иконку” или ссылку. Они часто значительно превышают настоящие размеры иконок или текста. Дизайнеры или фронтенд разработчики это продумывают, чтобы пользователю было комфортно по ним нажимать и при этом сохранить визуальную эстетику самого интерфейса.


Рис. 1. Пример интерфейса с “тонкими” элементами


Рис. 2. Зона взаимодействия у интерактивного “тонкого” элемента выделена кубом с серыми гранями

Ошибка #2. Горизонтальная прокрутка


Не избегать, как и в вебе. Почему горизонтальная прокрутка не работает?
Среднестатистический европейский человек, как известно, читает слева направо сверху вниз. А значит, последовательность передвижения глаза примерно как у буквы Z, при беглом просмотре оно похоже на F. А при большом количестве элементов просмотр скорее всего будет беглым. И ожидаемое окончание движения глаза соответственно внизу. А начало нового элемента в начале строки.


Рис. 3. Вертикальная прокрутка. Просто понять откуда начинать просмотр


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

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

При вертикальной же прокрутке мы просто возвращаемся к началу строки и просматриваем порцию новых элементов.

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

Ошибка #3.Элементы интерфейса за зоной видимости


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

Ошибка #4. Необходимость вертеть головой


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

Ошибка #5. Нет отклика у интерактивных элементов


Почему в случае с интерактивным откликом идет сравнение с вебом? Потому что в VR также есть “курсор”, которым ты наводишь на предметы. Чтобы понять, можно с объектом взаимодействовать или нет, должен быть некоторый отклик. Например, в вебе, если просто навести на обычный текст, на экране ничего не изменится, в то время как, если навести на ссылку или какую-нибудь кнопку, то произойдет либо смена цвета, либо еще какой-то визуальный отклик, который нам подскажет, что на этот элемент можно нажать. Тоже самое должно быть и в интерфейса дополненной и виртуальной реальности. Есть объекты, с которыми мы можем взаимодействовать, и есть объекты, с которыми не можем взаимодействовать. И одни должны быть отличимы от других. В случаях дополненной и виртуальной реальности возможностей сделать это значительно больше чем в вебе. И стоит использовать имеющиеся возможности.

Также в случае с VR и AR отклик, при наведении на объект, поможет лучше идентифицировать то, с каким объектом мы сейчас будем взаимодейсвовать, если видимая мушка по какой-либо причине отсутствует.

Ошибка #6. Блыманье на экране интерактивных элементов


Задержался на элементе и только тогда он должен быть анимирован. В вебе периодически от клиентов поступал запрос на решение проблемы связанной с тем что элементы, с которыми можно взаимодействовать, при быстром перемещении мыши (а курсор у пользователей часто передвигается вслед за взглядом для удобства) и непосредственным их расположением рядом друг с другом, создает какофонию анимации. Даже если эти анимации приятны глазу в единичном случае, в таких больших количествах, они начинают раздражать. В случае с вебом этот момент решался тем, что добавлялась небольшая “задержка” после которой считалось что на интерактивный объект был наведен курсор. Эта задержка добавлялась только в случае, когда есть несколько последовательно расположенных интерактивных объектов. Например, просмотр карточек товаров на сайте. На одиночную ссылку никто такой задержки никогда не добавлял. В любом случае, большое количество движущихся объектов активизирует нервную систему человека и создает небольшое ощущение стресса, это нужно использовать, когда вам нужна такая реакция, а не когда пользователь выбирает настройки яркости для комфортной игры.


Рис. 5. Отсутствие анимации и задержки перед анимацией


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

Ошибка #7. Нет звуков


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

Звук очень важный способ погрузить пользователя в приложение или игру. Грамотно воспользоваться этим способом — важно.

К сожалению, долго экспериментировать с VR мне не довелось. Надеюсь, описанное выше будет полезно.

Полезная статья про VR, многое из которой все еще актуально:
Практическое руководство по VR дизайну

Комментарии 0

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

Самое читаемое