UX анализ визуального интерфейса игры Cyberpunk 2077

Найдите баланс между визуальным чутьем и эффективной коммуникацией

Несмотря на споры вокруг Cyberpunk 2077, у меня тоже были проблемы с игрой. Диск для PS4 пришел с опозданием из-за влияния пандемии COVID-19 на работу почтовых служб. А еще я столкнулся со всеми описанными в сети проблемами. Несмотря на это я получил удовольствие от игры, и время пролетело незаметно. Мир Cyberpunk 2077 такой детализированный и приятный, что в него легко погрузиться с головой.

Несмотря на то, что я получил удовольствие, я заметил ряд проблем с UX. Можно улучшить навигацию по меню. Неидеальная организация информации влияет на некоторые задачи, которые игрокам необходимо выполнять внутри меню: нужно время, чтобы понять связи между элементами, и чтобы добраться до них и т. д. Ряд элементов превосходно реализован. Например, доступные предметы (бейдж «new» внутри карточки предмета). Количество карточек и информации настолько велико, что эти маленькие подсказки приносят пользу. Тем не менее, оно содержит ряд багов, и в настоящее время возникают проблемы с открытием меню.

Сначала я хотел сделать UX-обзор не только HUD, но и меню, и других элементов (например, карты), но из-за багов версии для PS4 нет смысла анализировать их. Поэтому я сосредоточусь на обзоре HUD, поскольку я не заметил серьезных ошибок, которые могли бы повлиять на UX-анализ его версии по умолчанию.

Вкратце о Cyberpunk 2077

Cyberpunk 2077 – это ролевая игра, разработанная и изданная компанией CD Projekt Red. Вы играете в роли наемника Ви, и можете исследовать Найт-Сити – открытый мир вселенной Cyberpunk.

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

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 1: Ви – главный игровой персонаж Cyberpunk 2077

Город с открытым миром разделен на шесть регионов, каждый со своим окружением и атмосферой. Объединяет их обилие насилия (например, со стороны банд или корпораций) и доминирование робототехники в повседневной жизни. Город полон разнообразных персонажей, рекламы, музыки, мини-игр и других удивительных деталей, которые оживляют его.

Условия игры

Я думаю, что важно понимать мой контекст. Обычно я играю, сидя в удобном кресле перед 37-дюймовым телевизором, на расстоянии двух метров или меньше. Я играю на PS4 в наушниках. Пока я наиграл всего 20 часов, и пишу этот обзор после выхода Hotfix 1.06.

HUD (heads-up display) Cyberpunk 2077

Heads-Up Display, аббр. HUD — часть визуального интерфейса[1]игрока, отображающаяся на фоне виртуального игрового пространства в видеоигре. Название происходит от аналогичного в английском языке обозначения ИЛС.

Когда вы не участвуете в бою, HUD в Cyberpunk 2077 разделен на 4 основные фиксированные области:

  1. Вверху справа: миникарта с центром на текущем местоположении персонажа (с активным маршрутом квеста и информацией о мире) и текущим временем в игре.
  2. В центре справа: активный квест, его цели и информация о состоянии.
  3. Внизу справа: инструкции для персонажей. Текущее оружие (доступные патроны и максимальный боезапас), положение тела персонажа (стоя или присев) и доступные действия.
  4. Внизу слева: Доступное оборудование (телефон и машина, с указанием, получили ли вы сообщения на телефон) и доступные предметы.

Не фиксируется на экране: плавающий значок навигации, который указывает направление текущей цели квеста.

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 2: объяснение HUD Cyberpunk 2077, когда игрок не находится в бою и оружие спрятано

Этот HUD имеет ту же первичную структуру, что и в игре Ведьмак 3. Основные изменения касаются визуального стиля, а значок навигации в Ведьмак 3 перемещается только по границам миникарты, а не по всему экрану.

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

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 3: объяснение HUD Cyberpunk 2077, когда он не находится в бою и оружие спрятано.

Если игрок участвует в бою (или другом действии, требующем дополнительных усилий, например, ныряет или несет груз), появляется полоса выносливости, зафиксированная в середине экрана, а границы миникарты становятся красными с надписью «Бой» (и когда игрок попадает во «Враждебную зону» или напротив зеленой в «Безопасной зоне»). У врагов также есть свои элементы UX: здоровье, информация о боевом статусе (бой, бдительность и т. д.), и, если вы их отметили.

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

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

Положительные моменты

Обновленный HUD – это, конечно, важный плюс. Наряду с этим положительным моментом хочу также отметить:

  • Область «Equipment+Items» имеет простой и понятный цветовой код: синий, если предмет доступен, красный, если нет.
    Цветовой код узнаваем и не требует изучения. Игра начинается, когда все красное, а когда вы получаете предметы – они становятся синими. Поэтому, даже если вы не знаете о культурном значении цветов, вас научат в начале игры.
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 4: Два скриншота области оборудования HUD. Красный недоступен / можно использовать, синий доступен / можно использовать
  • Информация об имеющемся количестве каждого предмета и максимально возможном, если есть лимит.
    Всегда важно держать игроков в курсе того, какая опция доступна в данный момент и сколько раз ее можно использовать. Эта информация (обновляется по мере использования игроком предметов, оружия, оборудования) важна, чтобы игрок мог принимать решения, не заходя в меню – она ускоряет темп игры. Поскольку информации может быть слишком много, и во время изучения города может случиться что угодно, нужно всегда быть готовым к бою.
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 5: Скриншот текущего оружия с доступным количеством патронов (синим) и максимально возможным количеством патронов (красным). Скриншот зоны оборудования с желтой цифрой 5 на карточке телефона, указывающей на 5 непрочитанных сообщений
  • Информация о кнопке контроллера, которую нужно нажать для выполнения действия.
    Как и в предыдущей теме, важно помнить, что персонаж может выполнять огромное количество действий. Возможно, игрок помнит все действия, но на экране всегда присутствует напоминание, которое ускорит время реакции, если игрок что-то забыл. Поиск инструкций в меню может раздражать, а в меню Cyberpunk 2077 очень много информации.
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 6: Кнопок для выполнения возможных действий персонажа с меткой для описания. Область оборудования с кнопкой, которую нужно нажать для выполнения действия с предметом / оборудованием под каждой карточкой
  • Есть возможность скрыть любую часть HUD.
    В меню можно скрыть любую область HUD. Эта опция позволяет игрокам выбирать свой подход к игре, и адаптировать HUD к своему стилю и потребностям.

Что бы я изменил в HUD и как?

1. Переосмысление цветового кода

Если вы посмотрите на HUD вначале, первый вывод очевиден: слишком много красного. Его чрезмерное использование вредит игровому процессу. В HUD возникает более серьезная проблема: нет цветового кода по типам информации или обратной связи. Цвет по умолчанию – красный, и он используется в качестве декоративного цвета, для описания, для обратной связи, и, когда что-то невозможно выполнить. То же правило применяется при изменении цвета HUD (или изменении игры), но я остановлюсь на красном – основном цвете HUD.

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 7: Пример использования красного цвета в HUD: состояние недоступности, метки, описания, заголовки, невыполненные квесты, информация об иконках

Синий используется, когда предмет или снаряжение доступны, для указания количества доступных боеприпасов и на миникарте, когда вы не в бою. Поэтому вы думаете, что синий используется, когда персонаж может что-то делать или имеет доступные предметы / боеприпасы. Но он также используется в текстах внутри всплывающих окон, даже в окнах, сообщающих об ошибке, и на иконке, описывающей немедленно доступное действие… Но красное описание действия сбивает с толку. Вы не знаете можете ли вы его выполнить? Может быть есть какое-то ограничение на выполнение этого действия?

UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 8: Все 5 различных компонентов можно найти для кнопки действия. Красная текстовая метка слева с синим значком. Значок без метки (синий, если действие доступно и красный, если не доступно). Синяя метка справа и синий значок. Синяя метка справа и красный значок. Красная метка справа и синий значок. Все эти действия можно выполнить… кроме значка R1 на втором скриншоте

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

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

Почему это нужно менять?

  • Отсутствие согласованности цветов внутри HUD снижает обучаемость игроков.
  • Цветовой код не требует запоминания различных значений для одного и того же цвета.
  • Это создает путаницу между мировым / культурным и игровым значениями цвета.
  • Это может вызвать разочарование, потому что игрок сразу же считывает цвет, уже знакомый ему из реального мира.

Что бы я сделал?

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

Синяя фраза «available» и, напротив, красная «not available» имеет смысл, но, чтобы переосмыслить цвета, я бы изменил этот код.

Красный и зеленый для обозначения положительного или отрицательного состояния:

Красный – Недоступно, ошибка, опасность для чисел, значков и карточек (для всплывающего текста) + для украшения.

Зеленый – доступно, успешно, можно использовать для чисел, значков и карточек (для всплывающего текста).

Желтый для навигации и дополнительной информации, связанной с состоянием:

Желтый – навигация + предупреждение для чисел, значков и текста.

Синий и серый для предоставления информации:

Синий – текст (названия) и значки текущего квеста + важная информация.

Серый – вторичные описания (текст) + вторичная информация. Также используется на миникарте и для времени, поскольку эти элементы могут менять цвет, чтобы передать состояние.

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 9: Скриншот из Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 10: Редизайн основного HUD Cyberpunk 2077

2. Дополнительные графические элементы HUD, которые представляют собой просто украшения с нечитаемыми символами.

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

UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 11: Меню с читабельными символами в качестве украшения. «Connection» – слово, которое выступает в качестве украшения

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

Почему это нужно менять?

  • Разочарование, когда игроки пытаются что-то прочесть и понять, а это оказывается просто украшение.
  • Следует сосредоточиться на основных элементах – не отвлекать игроков ненужной информацией. Та же самая логика, когда HUD адаптируется к ситуации.

Что бы я сделал?

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

3. Изменить границы значка навигации персонажа.

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

UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 12: Несколько скриншотов со значком навигации, потерявшемся на экране

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

Почему это нужно изменить?

  • Разочарование, когда значок теряется на экране, особенно когда уходит время или, когда вы выполняете другое отвлекающее действие
  • Оптимальный путь (на миникарте), идет вразрез с большой частью игры, заключающейся в исследовании Найт-Сити.
  • Путаница, когда значок перекрывает другие элементы HUD

Что бы я сделал?

  • Оставил значок плавающим на экране, чтобы он сообщал, в каком направлении двигаться, но не перекрывал область HUD;
  • По умолчанию оптимальный путь на миникарте отображается только в основных сюжетных миссиях или при вождении автомобиля. В настройках игроки могут выбрать:

– Всегда отображать

– Отображать при вождении автомобиля

– Отображать только в квестах основного сюжета

– Обе предыдущие опции

– Не отображать

4. Переосмысление функциональной области диалога

Цвета в диалогах очень яркие и контрастные (трудно читать – сложнее с таймером). 5 элементов диалога (имя, кнопка действия, текст, результат и таймер) визуально различимы и не сгруппированы как функция (трудно читаемый таймер).

UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 13: Диалог

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

Почему это нужно изменить?

  • Группируйте по цвету и формируйте цветной диалог, чтобы его было быстрее читать и удобнее выбирать ответы
  • Отсутствие группировки создает дополнительные умственные усилия для соединения частей диалога, когда в этом нет необходимости.
  • Эта функция важна для игры, и ее следует использовать более эффективно.

Что бы я сделал?

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

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

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 14: диалог в Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 15: Редизайн того же экрана для демонстрации нового диалогового компонента интерфейса
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 16: Новый компонент интерфейса диалога

5. Группировка всплывающей информации в центре экрана

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

UX анализ визуального интерфейса игры Cyberpunk 2077
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 17: Скриншоты всплывающих окон игры

Почему это нужно менять?

  • Группируйте информацию по цвету и форме, чтобы ее было легче читать и удобнее выбирать
  • Отсутствие группировки создает дополнительные умственные усилия для соединения частей, когда в этом нет необходимости.
  • Легче воспроизводить разную информацию и адаптироваться к ней

Что я бы сделал?

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

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

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 18: Редизайн всплывающего компонента интерфейса

6. Единый стандарт для информационных компонентов кнопок действий

Я уже говорил об этой проблеме в первом пункте, посвященном цвету, интерфейс должен быть более согласованным.

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

Почему это нужно менять?

  • Аналогично причинам из пунктов 4 и 5.

Что бы я сделал?

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

UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 19: Редизайн информации о кнопке действия.

Другие обнаруженные проблемы

  • Действия, выполняемые одной и той же кнопкой в некоторых точках игры.
UX анализ визуального интерфейса игры Cyberpunk 2077
Изображение 20: Я пытаюсь выключить радио, но эта же кнопка используется для прыжка. Поэтому Ви прыгает на радио
  • Субтитры слишком яркие и написаны разными цветами, поэтому не выглядят сгруппированными
  • Трудно выбрать предметы в игровой среде

Мысли в заключение

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

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

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

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

Проектируя для людей, используйте человеческий язык

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
19
Share