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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиграть в MiniCity Tycoon
Прототип обновленного интерфейса
Обсуждение проекта на Gamedev.ru