Когда люди спрашивают меня о секрете разработки мобильных игр, я всегда говорю одно – забудьте все, что вы знали до мобильных игр. Весь ваш старый опыт здесь неуместен.

Osobennosti-proektirovaniya-interfejsov-v-mobil-ny-h-igrah

Как только вы разместите в окне все, что теоретически может понадобиться игроку – основную информацию, дополнительную информацию, необычный заголовок, несколько монограмм и арт–объектов, — вы поймете, что экран вашего мобильного устройства закончился прямо на первом этапе. Итак, вот правило № 1:

1. Сохраняйте простоту

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

Снимок экрана-028

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

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

Но ни в коем случае! Если это произойдет, вы, скорее всего, далеки от понимания ключевой задачи пользователя, а затем неправомерно разделяете ее на подзадачи. И пользователь будет вынужден совершать все эти действия в уме во время работы с вашим интерфейсом, и, поверьте мне, он это сделает. Так работает мозг пользователя, и это было проверено и доказано много раз. Это подводит нас к правилу № 2:

2. Расставьте приоритеты в задачах

На слайде ниже вы можете увидеть скриншот из Heroes Charge. Предположительно, здесь игрок выбирает персонажа, чтобы ‘накачать’ его артефактами и ресурсами.

Снимок экрана-029

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

Снимок экрана-030

Еще один замечательный пример – Boom Beach. Хотя пользователь продолжает видеть свою базу во время покупки вещей в магазине, его внимание сосредоточено только на процессе покупки, а все остальное находится на заднем плане.

Снимок экрана-031

3. Систематизируйте информацию

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

Снимок экрана-032

Например, в Juggernaut Wars четко показано, что вы можете повысить уровень, нажав “+”. Также ясно, что сбор артефактов напрямую связан с “добавлением мощности”, а индикатор выполнения в самом низу оказывает некоторое очевидное влияние на эволюцию. Когда все это сделано, кажется, что все логично и очевидно. Но есть ряд примеров, когда связанные элементы интерфейса разбросаны по всему окну и размещены в совершенно неудобных местах.

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

Это именно те “мелочи”, которые определяют качество конечного продукта и ответ на вопрос, лоялен ли ваш пользователь или нет. Даже если пользователь не может ответить на этот вопрос напрямую.

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

Снимок экрана-033

4. Используйте простые формы для руководства игроком

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

Снимок экрана-035

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

В Star Wars: Galaxy of Heroes почти все элементы интерфейса одного цвета. Там все синее – от строк меню и шрифтов до значков предметов и способностей и ключевых кнопок. Это несколько затрудняет обработку информации.

5. Размер, цвет и анимация объектов также очень полезны

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

Снимок экрана-036

6. Вам не нужен весь экран

Широко распространенной ошибкой разработчиков игр является максимальное использование экрана устройства. С одной стороны, это хорошо. Но с другой стороны, когда мы говорим о множестве небольших объектов, которые накладываются друг на друга и заполняют всю площадь экрана, экран превращается в пеструю сетку, и ваши глаза начинают сканировать экран в поисках нужного объекта.

Кстати, посмотрите на скриншот ниже.

Снимок экрана-037

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

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

Снимок экрана-038

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

7. Уменьшите количество вариантов выбора

Следующее, что я хотел бы упомянуть, — это закон Фиттса (Пол Моррис Фиттс (1912-1965), американский психолог, работавший в Университете Рочестера над предметами, включая экспериментальную психологию).

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

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

Снимок экрана-040

8. Предоставьте пользователю обратную связь

Интерфейс всегда должен давать обратную связь пользователю. Если пользователь обращается к нему, это означает, что он ожидает ответа. Нажимая кнопку, игрок должен иметь четкое представление о том, что произошло в результате. Если событие не произошло, пользователь должен знать, почему и что делать дальше. Если кнопка заблокирована, а вы не говорите, почему, вы заставляете пользователя гадать об этом. Или вы просто заставляете его нажимать на эту кнопку в надежде получить подсказку. Хуже всего, когда ему вообще не предлагают. Кажется, что действие не может быть предпринято, и все.

Снимок экрана-041

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

9. Используйте контекстную справку

Последнее, о чем я хочу говорить, — это контекстные подсказки (pop-ups). Это то, что больше всего нравится ленивому пользователю, привыкшему к комфорту.

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

Например, вот принтскрины Juggernaut Wars.

Снимок экрана-042

Слева у нас есть до боли знакомая вещь – список функций artifact. Я наткнулся на дюжину версий такого списка со словами, которые чрезвычайно трудно запомнить, например, “Просветление”. Что это на самом деле означает и как это влияет на игру? Более того, когда у тебя есть пара десятков таких характеристик, любой начинающий игрок попадает в беду. Многие люди даже умудряются сокращать такие атрибуты, чтобы уместить их все в списке.

В данном случае мы написали короткую, но понятную для использования подсказку о статистике игры. Вы можете воспользоваться подсказкой, нажав “i” прямо в том месте, где упомянуты атрибуты.

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

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

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

Кстати, игроки действительно оценили внедрение такого элегантного решения.

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