Принципы UI на примере системы ролей в Overwatch

Гештальт-принципы, влияние цвета, символов и многое другое.

В последнее время сообщество Overwatch обсуждает, что игре нужно измениться, чтобы оставаться захватывающей и становиться менее токсичной. Часть решения — новая система матчмейкинга Role Queue (RQ), которая контролирует подбор класса для пользователей.

UX-дизайнер Нина Ахмад в своём блоге на Gamasutra опубликовала текст, в котором проанализировала меню новой системы матчмейкинга в Overwatch. Теперь перед началом матча игроки выбирают себе роль («Танк», «Урон» или «Поддержка»). У каждой из них есть отдельная очередь с собственным временем ожидания. Система будет работать так, чтобы в команде всегда было по два представителя каждой роли.

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

Принципы UI на примере системы ролей в Overwatch

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

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

Принципы UI на примере системы ролей в Overwatch

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

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

Иерархия «A»: демонстрация основной информации
Иерархия «A»: демонстрация основной информации
Иерархия «B»: более подробная информация (сверху-вниз: награда, иконка роли, название роли, скилл-рейтинг, чекбокс для подтверждения выбора, время очереди)
Иерархия «B»: более подробная информация (сверху-вниз: награда, иконка роли, название роли, скилл-рейтинг, чекбокс для подтверждения выбора, время очереди)

По сути, иерархия «A» отражает самую главную информацию, которая важна для игры: «Какую роль я могу выбрать? Сколько времени мне понадобится, чтобы присоединиться к матчу?». Иерархия «B» касается дополнительной информации о второстепенных задачах для каждой роли (рост SR и другое).

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

Всё это связано с двумя типами систем принятия решений, которые есть у людей: система №1 — быстрая, подсознательная, автоматическая; система №2 — медленная, требующая усилий, расчётливая. Игроки, которые плохо знакомы с очередями (Role Queue, RQ), вероятно, будут читать всю информацию на экране, а это потребует применения системы №2. Если же использовать цвета и символы, игрокам будет достаточно «включить» систему №1, чтобы понять главную информацию.

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

Без текста игроки всё ещё могут понять свою задачу
Без текста игроки всё ещё могут понять свою задачу

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

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

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

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

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

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

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

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

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

Принципы UI на примере системы ролей в Overwatch

Обычно поощрение используется для ролей «Танка» и «Поддержки», из-за чего они начинают всё сильнее ассоциироваться с чем-то приятным и полезным. Это повышает ценность ролей, а сами случайные стимулы оправдывают затраченное время и придают смысл игре.

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

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

Во-вторых, игроки часто выбирают похожие роли, из-за чего команда терпит поражение от более сбалансированных команд. Соответственно, система ролей исправляет эти проблемы, так как даёт чёткое понимание своей задачи.

Принципы UI на примере системы ролей в Overwatch

UX тесно связан с геймдизайном, а также с UX и комьюнити-менеджментом. Отзывы игроков влияют на все изменения и определяют то, каким в дальнейшем будет развитие игры. RQ не будет волшебным решением всех проблем в Overwatch, однако это большой шаг в этом направлении.

6969
87 комментариев

Что это у нас тут? Длинный разбор интерфейсов в игре с тремя квадратными кнопками плюс ещё одной отдельной кнопкой для лутбоксов. Хорошо, ждем дальше анализа интерфейсов в Флаппи Берде.

64
Ответить

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

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

- - -

P.S. Сам я Overwatch давно забросил и редко в него захожу, так что не фанат игры, но грамотных решений в ней завались (хоть и есть, буквально, парочка серьёзных про*бов, но у кого их нет), на её примере можно очень многому научиться любому разработчику.

29
Ответить

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

11
Ответить

В том и успех того же флэппи берд, ибо казуальному юзеру вообще не нужно ничего знать или читать - все предельно интуитивно просто

2
Ответить

Всегда интересовало как это так красиво менюшка выезжает снизу..

Ответить

Завуалированно напоминают нам, что в OW появился подбор по ролям.

Ответить

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

Ответить