UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Геймдизайнер и UX-проектировщик в игровом направлении Mail.ru Group Ольга Шуберт написала колонку о том, что такое UX (опыт взаимодействия с пользователями): рассказала о правильном расположении подсказок на экране, раскрыла детали оформления умений героев и поделилась, как объяснить пользователю пользу уведомлений.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

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

Juggernaut Wars – это фэнтезийная RPG, которая посвящена коллекционированию и прокачке героев, а также борьбе за ресурсы, которые необходимы в ключевых игровых процессах и вышедшая на мобильных платформах iOS, Android. В качестве референсов были использованы игры типа Heroes Charge и Spirit Guardian.

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

Как водится, первое, за что мы взялись — это город: набор ключевых объектов, с которыми игрок взаимодействует постоянно. И тут же встал вопрос: «Куда деть ресурсы?». Нам казалось, что если они всегда находятся на одном и том же месте: например, справа в столбец – то игроку легче охватить взглядом всю нужную информацию, так сказать, весь свой кошелек. Кроме того, это позволяет высвободить большую часть экрана, но информация при этом всегда находится под рукой. Удобно? А вот к чему на самом деле привели первые же шаги в эту сторону.

Посмотрите на главный экран Summoners War: на первый взгляд здесь все хорошо
Посмотрите на главный экран Summoners War: на первый взгляд здесь все хорошо

Открываем следующее окно — и видим, что разработчики не сумели впихнуть свои ресурсы в изначально выбранное место и стали бороться с этим ситуативно.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Вообще-то, если оглядываться на опыт передовых разработчиков, то можно заметить похожие решения:

Clash of Clans, Supercell
Clash of Clans, Supercell

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

Первая наша наработка выглядела примерно так
Первая наша наработка выглядела примерно так

Понятно, что, наступив на эти грабли, мы получили багажом все возможные и невозможные последствия. Честно говоря, весь этот путь того стоил: однажды увлекшись, мы больше не возвращались к этому вопросу.

Текущая наша версия города выглядит вот так
Текущая наша версия города выглядит вот так

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

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Кнопку эту можно нажать, а можно не нажимать, сражаясь самому. Обычно ручное использование приёмов героев более эффективно.

Но существует особый PVP-режим на арене с асинхронным боем, который диктует обязательный авторежим без возможности отключения. Но игроки-то запомнили, что, войдя в бой, можно ткнуть в кнопку! Этим они и занимались, каждый раз осознавая нечто вроде «Зачем я опять сюда жму?!» и получая в довесок суровое «Автобой на арене обязателен!».

Убрать кнопку? Нельзя — как это, везде есть, а тут нет. Непонятно! Баг!

Впоследствии как мы ее только ни перекрашивали. То делали визуально заблокированной/неактивной (ну вроде как все, нажато и делать ничего не надо) — в результате игроки пытались ее «включить». То делали активно горящей (ну она уже включена, ну все же!) — игроки считали, что раз горит, то надо жать.

Единственным спасением стало решение, когда кнопка перестала быть кнопкой, а превратилась скорее в некое информативное табло, достаточно пассивное, чтобы вообще не привлекать к себе излишнего внимания.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

Следующей нашей головной болью стало обучение. Ну казалось бы, любой дурак ведь «сможет». Подсказки мы сделали красивыми, красочными, информативными, фокусирующими внимание на единственной ключевой задаче.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Надо сказать, что весь наш город — это набор ярких анимированных объектов. Нужно ли объяснять, что круги подсказок стали восприниматься частью художественного окружения? Игроки просто перестали понимать, куда нажимать, попадая в игру. А нажать можно только в одно место. Если вам эта история все еще кажется незначительной, то я вам скажу следующее: конверсии в проекте упали вдвое. Уже не так весело.

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

В результате единственная возможная область тапа вообще уезжала за пределы экрана
В результате единственная возможная область тапа вообще уезжала за пределы экрана

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

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

Итак, вернемся же к нашим исходным материалам.

Это скриншот из Heroes Charge, где суть игры также заключается в коллекционировании и прокачке героев.
Это скриншот из Heroes Charge, где суть игры также заключается в коллекционировании и прокачке героев.

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

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

Подумав об этом в первую очередь, мы сделали вот такой макет окна
Подумав об этом в первую очередь, мы сделали вот такой макет окна

Не будем отвлекаться на его художественную ценность (да-да, мы все понимаем) — обратите внимание на то, сколько мелкой, сложной, лишней информации здесь присутствует. Если вы играете в Juggernaut Wars, то знаете, что при выборе героя для прокачки в конкретный момент времени (по крайней мере, это актуально в первый месяц игры) вам нужно знать ответ на простой вопрос: «Я прямо сейчас могу сделать что-нибудь с этим героем?». Все остальное — лишние нюансы. Зачем вам нужно видеть все вещи всех героев единовременно, включая те, которые отсутствуют?

Проработав этот вопрос, мы пришли вот к такому решению
Проработав этот вопрос, мы пришли вот к такому решению

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

О списках можно еще много чего рассказать.

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

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

Но в играх почему-то все еще делают так
Но в играх почему-то все еще делают так

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

Вот как мы поступили
Вот как мы поступили

Честно говоря, здесь длинный список PVE-точек не только функционально отработал на все 100%, но и продал сам себя: при первом входе в игру мы показываем красочный сюжетный путь, который в будущем предстоит игроку. Тестирование показало, что пользователей это решение очень впечатляет, они заранее готовятся к чему-то очень красочному и грандиозному.

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

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

На самом деле, это окно «тащит» только арт. Представьте себе, что его нет, выключите картинку, оставьте только интерфейс. Что вы видите?

Вся нижняя часть окна разъехалась и представляет собой набор бессвязных элементов, по которому нужно шариться глазами при каждом взаимодействии с прокачкой героя. Вы думаете, что прогресс-бар опыта связан с кнопкой «повысить»? Ничего подобного — он сам по себе, а кнопка «повысить» на самом деле связана со сбором вещей. Обе красные кнопки выглядят активными и доступными к нажатию, но на самом деле обе сейчас недоступны.

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

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

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

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

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Отправляйся-ка ты, душенька, на другой конец необъятных просторов своей игры

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Там тебе предстоит еще раз выбрать, кого ты хочешь прокачать

Затем нужно будет выбрать вещь

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

И вот тогда, наконец, покажут список доступных для использования ресурсов.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Разработчики uCool тоже поняли, что схема эта не оптимальна, и попытались решить ее вот таким способом:

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Но получилось еще хуже: окно стало представлять из себя бессвязный набор иконок, а область для прокрутки ресурсов сократилась еще в полтора раза.

Если поразмыслить, то список героев в окне и список в том первом, из которого мы изначально пришли — это две равные сущности. И то, и то — список героев. Так зачем же дублировать его таким извращенным способом?

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Благодаря этой манипуляции мы сэкономили время игрокам и значительно облегчили им повседневные процессы.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

Мы предпочли этот процесс упростить на каждом его этапе. Простая кнопка «+» отправляет игрока сразу в рюкзак, причем сразу же во вкладку с нужными эликсирами.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Все так — рутинные процессы не должны требовать усилий от пользователей.

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

Вот, например, окно результатов боя HC. Что-то игроку выпало — а нужны ли ему эти предметы?
Вот, например, окно результатов боя HC. Что-то игроку выпало — а нужны ли ему эти предметы?

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

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

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

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

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

Это подвело нас к мысли внедрить в игру виджет-напоминалку.
Это подвело нас к мысли внедрить в игру виджет-напоминалку.

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

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

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Открывая сундук, игрок просматривает красочную анимацию, а затем проваливается в такое окно:

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

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

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

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

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

Недавно на конференции White Nights мне был задан вопрос: «А как посчитать в цифрах пользу ваших усилий в работе над интерфейсами?» С удовольствием поясню. Например, вы все знаете, как выглядит стандартное окно подключения push-уведомлений.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars

Часто пользователь получает его при первом же знакомстве с продуктом, когда никакой лояльности к нему еще не испытывает. Более того, он даже не понимает, зачем это приложение будет спамить ему постоянно. То есть никакой мотивации к подключению уведомлений у него нет, поэтому он жмет «запретить» и закрывает для вас двери ко многим возможностям.

Что сделали мы? Мы не стали пугать игрока при первом входе в игру, а предпочли показать предложение ровно в тот момент, когда он получил бесплатные ресурсы через ежедневный квест. «А не хочешь ли ты получать бесплатные ресурсы постоянно? Просто заходи в игру в нужный момент, а мы подскажем, когда именно он наступит», —намекнули мы.

UX-проектирование в играх: от идеи до реализации на примере Juggernaut Wars
22
34 комментария

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

6
Ответить

Автору большое спасибо за статью. Имхо, суть UX и его важность донесены вполне доходчиво.

5
Ответить

У статьи проблема - картинки в ПНГ-формате, отсюда размер страницы в 45мб, Карл! И естественно все картинки не загружаются.
Автор, пережми картинки из .PNG в .JPG, сделай милость.

2
Ответить

Редакция все таки не смогла с чистой совестью уйти на выхи не поправив)

7
Ответить

наша вина, исправимся, но уже не в этот раз(

Ответить

Отличная статья, спасибо! Хотелось бы еще узнать про анимацию в UI. Это тоже занятная тема :)

4
Ответить

Спасибо! Я обязательно доберусь и до этой темы

Ответить