Разработка интерфейса сравнения кораблей для игры «Мир кораблей»

Задача

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

Моя роль

UX/UI дизайнер

«Мир кораблей» — это массовая многопользовательская онлайн-игра, которая позволяет окунуться в мир масштабных морских баталий и опробовать в бою легендарные военные корабли первой половины ХХ века.

Процесс и решение

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

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

Интерфейс сравнения кораблей

Проработка интерфейса

Я разделила характеристики на логичные блоки: «Стоимость», «Опыт», «Бронирование» и т.д.

Для быстрой визуальной навигации я использовала уже привычные игрокам элементы интерфейса:
• фирменные иконки (дублоны, звёзды),
• цветовые индикаторы (преимущества — зелёный, недостатки — оранжевый),
• векторные элементы для оценки сложности освоения корабля,
• другие визуальные приёмы (цвета, шрифты, эффекты и т.д.)

При наведении на свёрнутые секции игрок видит подробную статистику (например, «Живучесть — 64%», «ПВО — 39%»). Внешний вид показателей также меняется в зависимости от количества процентов — низкие показатели корабля помечаются красным цветом, средние — оранжевым, а высокие — зелёным.

Что касается проработки UI, то мне было важно максимально точно придерживаться стилистики проекта. Я сознательно сохранила визуальный язык интерфейса «Мира кораблей». Благодаря этому мой интерфейс не выбивается из игры, а выглядит так, словно он всегда был её частью.

Подробные характеристики

Пользовательский путь

В своей работе я сконцентрировалась не только на отрисовке UI-компонентов, но и на проработке логичного пользовательского пути. Я подготовила несколько сценариев, как игрок может попасть на интерфейс Сравнения кораблей.

Я проработала несколько сценариев входа в режим сравнения:
• Добавление корабля в список сравнения прямо из вкладки «Порт»,
• Добавление корабля в список сравнения из вкладки «Развитие»,
• Переход в уже сохранённый список сравнения прямо из Профиля.

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

Юзер-флоу игрока

Проработка дополнительных сценариев

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

Ни одного корабля не добавлено

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

Детали реализации

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

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

Элементы интерфейса

Контакты

Давайте вместе делать крутые продукты, которые приносят пользу людям