Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

UX-дизайнер World of Tanks Алексей Астапов написал для DTF колонку, в которой подробно рассказал о разработке ежегодного ивента «Новогоднее наступление» в игре.

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

Задизайнить «Новогоднее наступление» 2020-го с учётом новых геймдизайнерских вводных:

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

Да, мы запускаем новогодний ивент уже четвёртый раз, и большая часть нашей аудитории давно знакома с основными механиками. В этом постоянстве есть своя прелесть: наряжать ёлку, расставлять пандовиков, развешивать гирлянды — вот это вот всё… Очень круто, когда игровое событие становится чем-то традиционным, вроде новогодней рекламы Coca Cola или просмотра «Иронии судьбы».

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

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

Чтобы понять, что улучшить в интерфейсах НГ 2020, можно проанализировать интерфейс «Новогоднего наступления 2019», результаты тестирования в UX-лаборатории, отзывы игроков.

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

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

Иногда поповер перекрывает часть слотов.

Когда объект кастомизации несимметричен, слоты хаотично разбегаются по экрану.

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

Если подойти к вопросу организации более системно: общий подход к НГ интерфейсу прошлых лет — это линейный доступ в интерфейсные узлы с общей разводной страницы.

Например, вы решили из альбома коллекций перейти в коллайдер:

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

Для себя в начале проекта я сформулировал несколько принципов.

Контент первичен и на нём должен быть основной акцент. Интерфейс вторичен.

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

UI должен обеспечивать нелинейный доступ к основным интерфейсным узлам.

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

Первый скетч — как пристрелочный выстрел. Это материал для начала конструктивной беседы с геймдизайнерами о том, как что может выглядеть и работать. Реакция на скетч была разной: «Где коллайдер?!», «Почему убрали красивенькие скеморфичные иконки и снежинку?».

В главном виджете одним мерещились сметанные логотипы, другие видели схожесть с оформлением названий старых фильмов. Третьи с ностальгией вспоминали WORD ART.

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

Занятно: в некоторых локализациях «Атмосфера праздника» — это одно слово. Для них дописал слово «уровень». А вот иероглифы не трогал, они сами по себе достаточно графичны.

Концепцию дизайна и виджет одобрили. Правда спустя пару, тройку, или четвёрку итераций.

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

Коллайдер претерпел значительный редизайн по следующим причинам:

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

Шёл июль, где-то по радио рекламировали горящие туры на Сицилию. В августе в офисе стали мелькать неприятно загорелые люди. А мы с Егором Блинцовым всё ещё искали правильное решение для коллайдера. В ходе сего занимательного процесса мы пришли к следующим мыслям:

Модульность коллайдера — здорово. Каждая новая механика становится отдельным модулем. Это хорошо и для расширяемости на 2021 год.

Кнопка перехода к осколкам как часть коллайдера не нужна. Баланс и переход к осколкам уже есть в главном меню.

Монитор подсказывает игрокам, что вообще происходит.

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

Псс... Не хотите немножко формул?

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

В 2017 году я был в Женеве, где расположен тот самый настоящий адронный коллайдер. Думалось, что в CERN должны доставлять как минимум на Тысячелетнем Соколе, но пришлось добираться на обычном трамвайчике под номером 18. Из удивительного в нём была только цена за проезд. А вот экскурсия по ЦЕРНу мало того что бесплатна, так ещё и весьма занимательна.

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

В начале разработки мы привыкли называть Снегурочек талисманами, потому что Снегурочка — персонаж, знакомый только для RU-региона. Но потом решили не гневить перед праздником Дедушку Мороза и вернули им честное имя. И даже локализировали. Пусть все знают, кто такая Снегурочка. Тем более, вышли они у нас замечательные.

Правда, в начале разработки снегурочки выглядели как-то так.

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

Обоснование флоу с выбором снегурок именно в 3D-сцене далось нелегко. Боялись, что на минимальных системных требованиях (МСТ) они будут выглядеть плохо.

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

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

Но мы всех победили благодаря нашей отличной команде 3D-аниматоров. Ребята поддержали флоу с выбором в 3D-сцене и самоотверженно бомбили анимации с фантастической скоростью. Круто же, когда рядом есть люди, горящие идеей.

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

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

Техника устанавливается в слот и в течение некоторого времени заменить эту технику нельзя.

Мы называем его похмельем и головной болью UX-дизайнера. Это дополнительные пару недель, в течение которых продолжают действовать кредитный бонус и бонус новогодней техники. Но! Весь остальной UI Нового года становится недоступным. Ивент типа прекратился, но не до конца.

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

За окном декабрь 2019 года. НГ ушел в релиз и продлится до 14 января — можно немного выдохнуть и сказать огромное спасибо нашей команде разработки за отличнейший ивент!

Всех с наступающим!

#опыт #ux #wargaming #worldoftanks