Утром UX — вечером UI!

Поддержите разработчиков — страница игры на UEDC 2020

Меня зовут Денис Костроман, я — арт-директор компании TallTroll Games. В мае 2019 мы представляли нашу игру Dark Chess на DevGAMM Moscow. Рядом с нашим стендом свою многообещающую RPG Shores Unknown (о которой мы уже рассказывали) показывала команда Ильи Руднева, на их стенде реял крик о помощи — "ищем ui/ux". Сама игра, за исключением интерфейса, нам сразу понравилась, а поскольку разработка интерфейса — моя непосредственная экспертиза, я предложил помощь.

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

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

Илья Руднев: "Интерфейс мы до этого переделывали своими силами три раза, попробовав и “деревянные” панельки, и “минимал”-стилистику. И каждый раз упирались в проблемы: то некрасиво, то не хватало каких-то важных с позиции геймплея элементов и непонятно было, как их нормально показать. И объявление “ищем UI/UX” — это был такой крик утопающего о помощи; честно говоря, мы не думали, что из этого что-то получится.
Однако Денис с самого начала внушил доверие: после того, как мы (в очень дружелюбной манере) утрясли все организационные вопросы типа бюджета и сроков, работу он начал с того, что собрал с меня максимум подробностей о референсах и просто любимых мной играх в жанре. В процессе, кстати, оказалось, что вкусы у нас весьма схожие, и при упоминаниях Baldur’s Gate, Ведьмака и первого Dragon Age сразу сложилось взаимопонимание.
Тем не менее, перед Денисом стояла очень сложная задача: ресурсов на полную переделку интерфейса у нас не было, а механики нашей игры изрядно отличаются от вышеупомянутых. И в эти рамки ему необходимо было ужать свою концепцию. Но он и его команда не подвели: первый же концепт почти идеально вписался в мое видение игры как визуально, так и в плане элементов, которые необходимо было показать, исходя из геймплейных соображений. Первой реакцией команды на эскиз было "вау, это наша игра так круто выглядит?" Ну и не совру, если скажу, что по сути у нас после этого в концепте не было каких-то больших изменений, правили мы далее только мелочи."

Начну с того, что все пишут UX и UI через слеш, но, на мой взгляд, это в корне не верно. User Experience (UX) — это как человек воспринимает информацию, какими действиями он реагирует и какие ощущения испытывает в процессе.
User Interface (UI) — это отрисовка непосредственно самого интерфейса: иконок, кнопок, разработка стилей и эффектов. Разработать и нарисовать красивый игровой интерфейс — одна задача, сделать так, чтобы он был интуитивно понятен игроку, не вызывал фрустрации и четко выполнял свои задачи — абсолютно другая. Поэтому, мне кажется, правильнее писать UX to UI или UI for UX.

Найти хорошего специалиста по UX достаточно сложно, тогда как специалистов по отрисовке интерфейса (UI) — много. И крайне редко один и тот же человек объединяет в себе оба эти навыка. Имея 10-летний опыт разработки UI, мне понадобилось около 2 лет дополнительно, чтобы поднять свои знания в сфере UX, разработать огромное количество сайтов, android/ios приложений и впоследствии игр, чтобы получить необходимый опыт. 

В нашей истории мы говорим об игровом UX, и в идеальном мире было бы хорошо собрать тестовую аудиторию, провести тест бета интерфейса на камеру, зафиксировать все нестыковки и реакции игроков, и итеративно двигаться в сторону улучшения. С микро бюджетом инди команд это маловероятно. Поэтому работали “по живому”, совместно с Ильей и командой. Я предлагал решение, тестировали вместе, совещались, и если не подходило, искали новое. 

Так через несколько месяцев у Shores Unknown появился новый интерфейс. Мы переработали интерфейс боя, инвентаря, партии, журнала и диалогов. На скринах ниже можно посмотреть, как было — и как стало.

Мы не просто перерисовали интерфейс игры, а полностью переосмыслили UX. Стало проще, интуитивнее.
К сожалению, на картинке не передать динамику, а самое главное в User Experience — это Flow ("Динамика последовательности"). В старой версии UX он был очень сложный и неочевидный, люди путались, что идет за чем, на кого нацелен персонаж, даже чей сейчас ход было не сразу понятно. Визуально UI был тоже достаточно запутан — как видно на экране выше, не сразу понятно, куда смотреть, чей сейчас ход, какова последовательность ходов и кому противостоит твой герой. Решение с обрезанием аватаров по самые глаза, конечно, место экономило, но появляется сложность в сопереживании герою, да и с трудом можно было угадать, кто где. И это на большом-то экране PC. 

Сложность была еще и в том, что Shores Unknown выходит не только на PC, но и на Nintendo Switch, а это два абсолютно разных UX мира. Тут сыграло на руку, что я заядлый консольщик с огромным опытом прохождения игр на Xbox, Playstation и Nintendo. Посовещавшись, мы решили делать “Console First”, чтобы в первую очередь игра смотрелась и чувствовалась отлично на Switch, и уже потом адаптировать для PC. Такой вариант и разумнее, и проще. 

С первоначальной локальной картой было очень сложно ориентироваться. По картинке выше видно, что не сразу понятно, где цели текущего квеста, что обозначают иконки, да и где вообще мы сами — понятно далеко не сразу. А самое главное — где же так любимая всеми игроками Легенда? (Легенда карты — список или таблица условных обозначений на карте с разъяснением их значения.) К тому же, в старой вызов карты существовал отдельно, что нормально для PC, но у консолей другой UX Flow, с геймпада намного удобнее переключаться Табами (бампер-кнопками контроллера) между основными элементами, такими как Карта, Квесты, Инвентарь и т.д.

Самый сложный экран, не считая Экрана Боя — конечно, Экран Персонажа. На первый взгляд, игра, благодаря современной упрощенной 3д стилистике, кажется несложной, но "под капюшоном" это вполне серьезный зверь, с огромным количеством данных. Уместить все на одном экране, чтобы читалось (без очков) на экране Switch — было задачей не из простых. Но мы справились.

На первый взгляд, экраны выше похожи. Но с точки зрения UX мы поменяли достаточно много. Большая часть людей считывает экран слева направо (как читаем книги) и потом уже — буквой Z. На старом экране человек сначала видел, что одето на персонаже, потом — его Имя, потом — Абилки, и уже под конец — Статусы. Мы пересмотрели это и все стало логично — Имя, Статусы, Абилки, Обвес. Выбор оружия был над статусами, что для человеческого глаза не так удобно. Удобнее менять что-то под таблицей статистики и смотреть, как меняются значения выше, а не наоборот.

Также достаточно долго не могли выбрать вариант навигации в режиме от третьего лица.
Первоначально радар был плоский по верху экрана (как в Skyrim, Fortnite etc) — вначале улучшили его, но затем решили попробовать круговой радар (World of Warcraft, Witcher 3), поиграли, еще поиграли — и оставили его.

Экран Журнала тоже был непростой. Не было понятно, какой квест главный, где завершенные, почему они зеленые. Разделение экрана на три позиции Квесты / Задания / Описание хотя и казалось логичным, пожалуй, больше усложняло восприятие игрока, чем помогало. Мы поменяли цветовую дифференциацию, чтобы сразу было понятно — где Основные, Второстепенные, а где — Пройденные квесты. Также объединили Задание и описание в один раздел — и все стало сильно удобнее с точки зрения UX, а потом уже навели красоту в UI.

* * *

С Ильей за время работы мы сдружились. Несмотря на разные часовые пояса (Илья — в Японии, я — в Эстонии), часто пишем друг другу, поздравляем с успехами наших игр, наградами и номинациями. Помогаем и голосуем за проекты друг друга. В общем, отлично сработались! :)

Уверен, у ребят все получится, игра получается отличная! Ждем релиза — поддержим покупкой! А если будет вновь нужна моя помощь, я всегда готов им — да и вообще инди командам — помочь.

Полную переработку интерфейса можно посмотреть на Behance странице Дениса.

Поддержите разработчиков — страница игры на UEDC 2020