Принципы разработки игрового интерфейса

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

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

Итак, есть ~~два стула~~ две новости: хорошая, и плохая.

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

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

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

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

Психологические принципы построения интерфейса

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

1. Движение взгляда

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

В игре Dishonored 2 эта диагональ очень хорошо прослеживается. От Mission к Objectives, от портрета Антона Соколова к названию главы, Dreadful Wale.

Да, в этой статье будет много примеров из Dishonored 2, потому что я прямо забалдела от их интерфейсов. Стоит поиграть хотя бы ради того, чтобы посмотреть на чумовую анимацию UI…

2. Сначала картинка, потом текст

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

3. Группы объектов

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

На страничке героя в Doka2 можно заметить очень четкие группы элементов. Первая группа — теги героя, вторая — скиллы, далее отдельная группа — скины и новая группа — магазин скинов. Они не смешиваются и все стоят отдельно друг от друга, обособленные формой, размерами, расстоянием между ними. Кстати, здесь так же соблюдено правило «сначала картинка, а потом текст».

4. Привычные элементы

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

Для дополнительной информации можно погуглить Закон Якоба.

5. Количество информации, которую может усвоить человек

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

Для дополнительной информации можно погуглить Закон Хика

Интерфейс игры The Witcher 3. Слева — все квесты, затем кратко цели выбранного квеста, и только потом художественное описание. Представьте себе, если бы вся эта бодяга открывалась бы сразу под названием квеста? Ориентироваться в них было бы гораздо сложнее. И опять, сочетание с принципом «слева-направо».

Фундаментальные принципы построения интерфейса

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

1. Слишком большое количество элементов на одном игровом экране.

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

Представьте себе игровое окно как предложение:

Жуткий ливень начался только что, буквально в половину седьмого вечера, на улице дикий потоп!

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

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

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

2. Отсутствие единообразия элементов.

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

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

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

3. Отсутствие обратной связи.

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

4. Большое количество текста.

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

Везде, где это возможно, нужно избавиться от надписей на кнопках или под иконками GUI. Все что можно сделать иконками и пиктограммами - нужно делать иконками и пиктограммами. Любое чтение в момент быстрой навигации внутри окна затрудняет восприятие и делает общение между игроком и игрой мучительным. Если вы делаете кнопку, по нажатию на которую открывается карта мира - ну сделайте очень простую и понятную иконку в виде карты, и не нужно подписывать ее текстом. Всегда стоит помнить о такой вещи, как локализация, и то, что на английском будет выражено простыми тремя буквами “map”, на немецком может выглядеть как “flugergehaimer”.

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

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

Вы спросите: а как же тогда быть с дневниками героя или художественными текстами, сопровождающими историю? Я, наверное, вас разочарую, если скажу правду: такие тексты читает подавляющее меньшинство игроков. Тем не менее, именно эти игроки являются самыми лояльными, именно они выискивают пасхалки и секретные квесты. Но эту аудиторию можно расширить, если сделать подачу информации максимально привлекательной для игрока. Лучшее, что я пока видела на этот счет - это дневник Артура Моргана из Red Dead Redemption 2.

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

5. Красота важнее удобства

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

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

6. Отсутствие акцентов.

Эта проблема появляется тогда, когда на экране нет акцентов, или когда, наоборот, их настолько много, что ничто конкретное не выделяется для глаза. Акцент - это выделение элементов интерфейса цветом, анимациями, или размером. Помните школьные конспекты, где (ну, хотя бы в самом начале года) вы выделяли зеленой ручкой важное, подчеркивали определения и писали NB! на полях? Так вот, игровому интерфейсу также необходимы свои “нотабене”, чтобы сконцентрировать внимание игрока на том, что является важным в каждом отдельном интерфейсе. К тому же игра - это постоянно изменяющаяся и динамичная структура. Меняются ее правила, появляются новые возможности, исчезают старые. На все это нужно сразу обращать внимание игрока.

Выбранное меню Powers — акцент, выбранная способность — акцент, выученные способность — акцент, количество рун — акцент, описание способности — чуть более бледно, около пунктов Lore & Maps и Travel Log — пиктограммы «что-то новое». К вопросу о группировании: Обратите внимание, как разделены интерфейсы. Powers и Enhancements разделены расстоянием и цветом, ветка способности — полупрозрачной подложкой, описание — тоже. Тем не менее, описание и дерево, как более близкие друг к другу по смыслу элементы (один является продолжением другого) находятся ближе, чем дерево и сами скиллы.

В инвентаре появился новый предмет, которого у игрока не было раньше? Отметьте его специальной пиктограммой.
Закончился кулдаун и игроку снова доступен определенный тип боя? Заанимируйте кнопку.
Пришло новое письмо? Выделите его другим цветом в списке остальных сообщений.

#интерфейс #теория