MiniCity Tycoon. Обновление интерфейса

Введение

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

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

MiniCity Tycoon. Обновление интерфейса

Эту игру я сделал около года назад как свой первый проект на движке Construct 3 (изначально это была даже не игра, а прототип для проверки концепции более крупного проекта) и, по сути, как первый относительно крупный проект, в котором я выступал в роли разработчика. В связи с этим я почти не уделил времени её интерфейсу, основное время было потрачено на освоение движка и борьбу с ним.

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

Затраченное время:
Игра:
Разработка - 2 недели
Внесение правок (доработка) - 2 недели
Обновленный интерфейс (прототип):
Основная работа - 2 дня
Правки - 3 дня

MiniCity Tycoon это web игра, доступная как на ПК, так и на сенсорных девайсах (телефоны и планшеты).
Изначальный вариант интерфейса был больше ориентирован на ПК версию и не был оптимизирован для мобильных устройств, это одна из его основных проблем.
Как известно, если игра имеет удобное управление на сенсорном устройстве, то она вполне играбельна и на ПК (и редко наоборот). В связи с этим и тем, что даже с текущим интерфейсом 25% игроков играют в игру на мобильных устройствах, при обновлении интерфейса я решил делать именно мобильную его версию.

<p>Оригинальный интерфейс</p>

Оригинальный интерфейс

Обновленный интерфейс
Обновленный интерфейс

Правила игры

Для лучшего понимания логики расположения элементов интерфейса необходимо ознакомиться с правилами игры:

- Покупайте земельные участки, здания, открывайте бизнесы — и зарабатывайте деньги.
- Цель состоит в том, чтобы получить указанную сумму быстрее соперника.
- Увеличивайте скорость получения дохода, открывая бизнесы в кварталах соответствующих цветов. Бизнес, открытый в квартале неподходящего цвета, приносит меньший доход или не приносит его вообще.
- Увеличьте доход от всех ваших бизнесов в квартале, купив не менее 5 участков в одном квартале.
- Любые бизнесы и здания можно продать в любой момент за 50% стоимости. (планируется в следующей версии игры)
- Ваш противник может приспособиться к вашей тактике, сделав ее менее эффективной.
- Когда половина участков выкуплена, цена всех товаров (участки, здания, апгрейды зданий, бизнесы) возрастает в 10 раз. Доход от всех бизнесов, находящихся в соответствующих кварталах, возрастает в 2 раза, а от всех остальных падает в 2 раза.

Анализ исходных данных

MiniCity Tycoon. Обновление интерфейса

1. Баланс игрока. Важно для планирования совершаемых игроком покупок.
2. Суммарный ожидаемый доход игрока со всех источников. Важно для понимания игроком скорости достижения цели.
3. Вся имеющаяся собственность игрока. Необязательная информация.
4. Опциональные действия и вспомогательная информация. Эти кнопки важны, но должны занимать меньше места.
5. Распределение участков квартала между игроком и противником. Необходимо для удобства понимания когда игрок или противник стал владельцем квартала (при покупке 5 участков).
6. Цель игры и прогресс игрока и противника. Необходимо для понимания какое количество денег необходимо игроку и его противнику достиг поставленной цели.
7. Таймер игрового времени. Необходим для понимания игроком скорости начисления дохода.
8. Баланс противника и его суммарный ожидаемый доход за месяц. Необходимы для понимания скорости достижения цели противником.
9. Вспомогательная информация о выделенном игроком объекте. Данную информацию можно один раз показать в туториале и больше не дублировать в интерфейсе.
10. Список возможных действий с выделенным игроком объектов, включая их цену и кнопки выполнения действий. Самые важные и часто используемые кнопки в игре, их необходимо отображать рядом с объектом локации, на который нажал игрок (чтобы уменьшить расстояние проходимое курсором/пальцем по экрану).

Задача

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

Структура обновленного интерфейса

MiniCity Tycoon. Обновление интерфейса

1. Блок с информацией о цели игры и балансе игрока и противника.
2. Блок с информацией о количестве ожидаемого дохода за месяц для игрока и противника.
3. Блок с описанием правил игры.
4. Блок с описанием экономической части игры (что сколько стоит и сколько приносит дохода, в какой срок и при каких условиях).
5. Опциональные действия не влияющие на геймплей.
6. Счётчик игровых дней (нужен на начальном этапе для ощущения игроком темпа игры).
7. Информация о владельцах участков и эффективности работы бизнесов каждого типа в конкретном квартале.
8. Список возможных действий с выделенным игроком объектов, включая их цену и кнопки выполнения действий.

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

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

Подробнее об этом далее.

Информация о цели, балансе игрока и противника

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

MiniCity Tycoon. Обновление интерфейса

Таким образом, я смог изменить форму локации с квадрата (3х3 квартала) на прямоугольник (4х2 квартала), что позволило увеличить размер клеток локации на 50%, сделав их более удобными для нажатия на экранах телефонов.

Оригинальный размер клеток игрового поля
Оригинальный размер клеток игрового поля
Обновленный размер клеток игрового поля
Обновленный размер клеток игрового поля

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

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса
3 возможных состояния блока
3 возможных состояния блока

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

MiniCity Tycoon. Обновление интерфейса

Информация об ожидаемом доходе игрока

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

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса
3 возможных состояния блока
3 возможных состояния блока

Блок с правилами игры

Изначальный вариант блока Правил игры.
Изначальный вариант блока Правил игры.

В отличие от предыдущей версии интерфейса, блок с правилами игры был разделен на 2 отдельных блока: правила и экономика, т.к. они занимают много места, и их трудно разместить на одном экране. Помимо этого, текстовая информация о правилах игры понадобится игрокам 1–2 раза, а блок с описанием экономики может потребоваться значительно чаще.
Т.к. при разворачивании блока с правилами он всё ещё занимает относительно много места (перекрывает половину экрана) и требует относительно много времени для прочтения, то в этот момент игровой процесс приостанавливается до сворачивания данного блока.

MiniCity Tycoon. Обновление интерфейса
MiniCity Tycoon. Обновление интерфейса

Блок с описанием экономики

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

MiniCity Tycoon. Обновление интерфейса
MiniCity Tycoon. Обновление интерфейса

Опциональные действия

Все дополнительные функции/действия, не влияющие на основной геймплей, убраны в блок опциональных действий. На момент завершения работы над прототипом в данном блоке осталось всего 3 кнопки действий (вкл./выкл. звук и музыку и выход в лобби).
Рядом, на свободном месте, отображается счётчик игровых дней (полезен игроку на начальном этапе для ощущения темпа игры). Место для данного объекта было определено в последнюю очередь, когда работа над расположением всех остальных элементов была завершена.

MiniCity Tycoon. Обновление интерфейса
MiniCity Tycoon. Обновление интерфейса

Кварталы

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

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса

В этом блоке использование мини-аватарок игроков смотрится наиболее органично и значительно преображает восприятие блока.
В игре 3 типа кварталов, каждому из которых соответствует один из типов бизнеса, т.е. чтобы бизнес был максимально эффективен (прибылен), его нужно открывать в соответствующем квартале:
Магазин - Жилой квартал
Бизнес-центр - Бизнес квартал
Завод - Промышленный квартал

MiniCity Tycoon. Обновление интерфейса

В обновленном интерфейсе появились смайлики, отображающие прибыльность бизнесов в конкретном квартале:

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса

В развернутом блоке помимо прочего рядом с именем владельца квартала появляется соответствующая текстовая пометка.

MiniCity Tycoon. Обновление интерфейса

Действия с объектами локации

Действия с объектами локации (участки, здания, бизнесы) изначально были реализованы наименее удобным для игрока образом, чем все остальные элементы и блоки. В связи с этим они претерпели наибольшие изменения в новом интерфейсе.
Ранее кнопки действий с выбранным объектом появлялись сбоку, что требовало от игрока отвлекаться от локации и переводить взгляд и курсор (если речь о ПК версии игры) в крайнюю правую часть экрана, это неудобно и занимает относительно много времени.

Оригинальный интерфейс
Оригинальный интерфейс

В новой версии интерфейса я отображаю кнопки действий с объектом вокруг самого объекта, что позволяет игроку видеть их мгновенно (не отводя взгляд в сторону).

Обновленный интерфейс
Обновленный интерфейс

Добавлены 2 новые кнопки, принцип работы которых в прототипе не раскрыт, так как одна из них минорная (имеет низкий приоритет для игрока), а другая может появиться только в следующей части игры.
Информация — открывает блок вспомогательной информации об объекте (содержит краткое описание объекта и указание его владельца). Отображается при нажатии на любой объект локации.
Продать — открывает окно подтверждения продажи объекта за 50% от его стоимости. Отображается только при нажатии на здания и бизнесы игрока.

MiniCity Tycoon. Обновление интерфейса

Далее посмотрим все основные комбинации кнопок действий с объектами локации.

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

MiniCity Tycoon. Обновление интерфейса

При нажатии на участок игрока появляется кнопка покупки здания.

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса
MiniCity Tycoon. Обновление интерфейса

Если в данном квартале здание можно апгрейдить до 2х этажей, то отображается кнопка апгрейда здания.

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса

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

MiniCity Tycoon. Обновление интерфейса

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

Сравнение

Было
Было
Стало
Стало

Чтобы наглядно оценить важность и эффективность внесённых изменений вы можете ознакомиться с самой игрой (в которой на данный момент изначальный вариант интерфейса) и с прототипом обновленного варианта интерфейса.

Ссылки

11