Показываю, как делаю интерфейсы

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

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

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

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

Игрок быстрее справится с несколькими маленькими окошками и небольшим описанием, чем с огромной конструкцией с кучей кнопок и текста. Он совершит больше кликов, но справится быстрее. Я покажу это на практике.

Чтобы сделать эффективный интерфейс, нужно проделать много работы по двум направлениям:

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

Этот пост не про практики UX-дизайна. Мне важно показать анализ сценариев использования, и как это отражается в интерфейсе. Я покажу вам эффективный интерфейс.

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

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

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

Внизу экрана подсказки по возможным действиям:

Пока что я работал только над инвентарём - там много задач.

Инвентарь, экипировка. Самая частая задача - это посмотреть "что у меня есть". Игроку интересно сколько каких предметов есть, как можно использовать каждый из них.

В моей игре инвентарь состоит ровно из 8 ячеек. В каждой лежит только один предмет. Никаких пачек. Справа я показываю информацию о предмете и предлагаю возможное действие. Если действие займёт ход игры - показываю это.

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

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

Оружие можно взять в руки. А можно убрать. У оружия важно каким уроном оно атакует и на сколько. У противников могут быть уязвимости к конкретному типу атаки- тогда оружие наносит им х2 урона. Оружие имеет прочность. Она тратится не только при атаках, но и при создании предметов. Например, для создания копья нужны палка и нож. При этом нож потратит часть своей прочности.

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

О материалах игроку нужно знать немного. Только количество и название.

Внизу экрана вы могли заметить набор иконок. Это режимы инвентаря, выполненные в виде страниц/вкладок. Каждый режим отвечает за отдельный сценарий взаимодействия с инвентарём. Переключается кнопками Q и W.

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

Пока что я описал только сценарий экипировки. Как игрок напрямую взаимодействует с предметами в инвентаре.

Инвентарь и земля. Предметы можно сбрасывать и подбирать. Для этого я сделал отдельный режим инвентаря.

Игрок видит, что находится на земле. Может посмотреть эти предметы как и свои в инвентаре. Но он не может в этом режиме эти предметы использовать. Только поднять. Инвентаря это тоже касается. В этом режиме предметы из инвентаря можно только сбросить.

Я вынес это взаимодействие в отдельный функционал по двум причинам:

Инвентарь, создание предметов. Пока что я остановился здесь. Решение сырое и требует тщательного продумывания. Но общую суть вы сможете уловить.

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

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

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

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

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

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

Я рассмотрел большинство сценариев использования инвентаря в своей игре. За кадром остались граничные и вырожденные случаи.

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

Несколько ссылок для тех, кого зацепил проект:

Спасибо за внимание!