UX-анализ HUD-а в Cyberpunk 2077


24.02.2021 Время чтения - 11 минут 702

Сегодня мы поговорим о некоторые проблемах с UX в Cyberpunk 2077. Навигация по меню может быть улучшена. Информации не сгруппирована и т.д.

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


Читайте нас в Telegram


В этом обзоре мы рассмотрим HUD в Cyberpunk и поговорим о том, как его можно было-бы преобразить.

Коротко о Cyberpunk 2077

Cyberpunk 2077 – это ролевая игра, разработанная и изданная CD Projekt Red. Играя от первого лица в роли наемника по имени V, игроки могут исследовать невероятный Найт-Сити.
Ваш персонаж полностью поддается кастомизации, вплоть до «мелочей». На протяжении всей игры можно развивать различные навыки (от удаленного взлома различных систем и до мастерского владения катаной). Вы сможете сражаться как на близком расстоянии, так и вести дальний бой, используя огромное количество разнообразного оружия или же использовать свои нетраннерские способности, чтобы получить всевозможное преимущество в бою. Помимо этого в игре вас ждет обширное количество всевозможной одежды которые не только помогут вам потрясающе выглядеть, а и помогут вам выжить в опасном и захватывающим дух Найт-Сити.

Image result for Cyberpunk 2077

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

HUD Cyberpunk 2077

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

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

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

Этот HUD имеет ту же структуру, что и в The Witcher 3, изменен лишь визуальный стиль. Помимо этого значок навигации в The Witcher 3 перемещался только в рамках миникарты, а не по всему экрану, как это решили сделать в Cyberpunk 2077.

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

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

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

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

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

Положительные примечания

Прежде чем двигаться дальше, хочется отметить плюсы уже существующего интерфейса:

  • Область «Расходников» имеет простой и понятный цветовой код: синий, если предмет доступен для использования и красный, если нет. Цветовой код узнаваем и не требует изучения. Также в самом начале игры, нас знакомят с этим цветовым кодом, так что никаких проблем с этим пунктом не возникает.
  • Информация о количестве каждого предмета
    Всегда важно держать игроков в курсе о доступных в настоящее время вариантах и ​​о том, сколько раз их можно использовать. Эта информация (которая обновляется по мере того, как игрок использует предметы, оружие, снаряжение) важна для того, чтобы игрок мог принимать решения, не заходя в меню — она ​​ускоряет темп игры.
  • Информация о том, на что нужно нажать, чтобы было выполнено определенное действие.
    Важно помнить, что персонаж может выполнять огромное количество действий. И весьма вероятно, что игрок может попросту забыть о том как выполнять некоторые действия. Для этого и нужны такого рода подсказки, с помощью них вы никогда не запутаетесь в управлении. Ввиду того, что в Cyberunk 2077 очень много информации, копаться в настройках, чтобы попросту вспомнить управление будет утомлять.
  • Можно скрыть любую область HUD.
    В настройках можно скрыть любую область HUD. Эта опция дает игрокам больше свободы, а сам HUD становится более гибким.

Что и как можно изменить в HUD?

1. Переосмыслить цветовой код

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

Image for post

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

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

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

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

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

Что можно сделать?

Полностью переосмыслить цветовой код и ввести новые цвета в HUD. Таким образом, мы можем попытаться найти баланс между удобством использования, взаимодействием и цветным повествованием.

Синий цвет будет отвечать за доступность и, напротив, красный за недоступность.

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

Красный – действие недоступно, ошибка.

Зеленый – действие доступно, успешно, можно использовать в числах, значках и карточках.

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

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

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

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

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

Изображение для публикации
Изображение для публикации

2. Перегрузка орнаментами с нечитаемыми символами.

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

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

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

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

Что можно сделать?

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

3. Маркер.

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

Изображение для публикации
Изображение для публикации

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

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

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

Что можно сделать?

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

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

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

Изображение для публикации
Изображение для публикации
Изображение для публикации

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

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

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

Что можно сделать?

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

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

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

5. Всплывающие окна в центре экрана.

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

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

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

Что можно сделать?

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

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

Изображение для публикации

6. Единый стандарт для кнопок.

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

Что можно сделать?

Сократите количество различных вариантов до двух: один без метки, а другой с меткой. Метка должна быть справа, а значок слева — это необходимо для более простых принятий решений. 
Если информация связана с компонентом, у которого есть состояние (и присущий ему цветовой код), то она следует за цветовым кодом, если это просто информация на экране, то она отображается серым.

Существуют и другие проблемы

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

Заключение

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

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

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

Оригинал статьи.

Читайте также: Топ восстребованных скилов дизайнера в 2021 году

UX/UI Designer

Читайте нас в Telegram