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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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