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

Задача

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

Моя роль

UX/UI дизайнер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение задачи

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

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

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