UI/UX базовые принципы

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

"Просто берем ассет-пак и лепим как у конкурента, один в один и все. Готово. Чего мозг мучать? А может еще переплачивать специалисту?" — вот такое я слышу довольно часто, когда речь заходит о тех или иных неудачных решениях в проектировании интерфейса игры.

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

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

Если пользовательский опыт настроен правильно, а приложение полезно, то у вас есть большие шансы на успех. Все сводится к решению проблемы с помощью наименьшего количества действий. Например, таймер, которым я пользуюсь, предлагает мне 4 часто используемых таймера на первой странице приложения. Это очень удобно, потому что моя проблема решается всего за два клика (открыл приложение — запустил таймер). Мне не нужно каждый раз устанавливать нужный интервал, вводя цифры на клавиатуре или прокручивая барабаны с цифрами. Меньше кликов — лучший опыт. И еще лучше, если вы интегрируете команды для Siri или других голосовых помощников. Тогда самые часто используемые функции могут запускаться без кликов. Разве это не прекрасно?

Когда речь идет о физических продуктах, появляются дополнительные аспекты, такие как тактильность — удобство использования (геймпады от Xbox против сборного геймпада от Switch), качество материалов и даже упаковка. Да, пользовательский опыт начинается еще на этапе распаковки продукта. Именно поэтому в Apple есть целый отдел исследований и разработок, который занимается дизайном упаковки до мельчайших деталей. А вы думали, что эти наклейки на коробке важны только для защиты оригинальности устройства?

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

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

1. Предсказуемая навигация

"Блин, куда я жмакнул?!" — такое не должно возникать в вашем продукте ни в коем случае. Если такое происходит, то это полный провал! При этом учтите, что реальный пользователь не будет тратить ни капли дополнительных усилий, чтобы понять, куда приведет его нажатие на определенную кнопку, и что произойдет после этого.

Здесь хорошо подходит принцип "сделаем как у конкурента", потому что ваш пользователь, скорее всего, знаком с таким способом взаимодействия и расположением кнопок, но все равно стоит проанализировать конкурента на ошибки. Используется ли там понятная иконография? А в других проектах используется такой же навигационный шаблон, или есть отличия? Соответствует ли наш интерфейс общим правилам? Находятся ли крестики во всех всплывающих окнах в одном месте? Логичны ли переходы между различными окнами? Какова глубина переходов? И много других вопросов, которые вам следует задать себе при проектировании интерфейса и выборе иконок из ассет-пака.

А теперь давайте быстро ознакомимся с терминами, которые я использовал выше (если вы впервые их слышите):

2. Борьба с хаосом

За этим красивым высказыванием скрывается абсолютно простое правило: "на одном экране пользователь не должен совершать больше 2-3 действий". Есть исключения, например, главное окно мета-геймплея, откуда мы можем перейти к окнам с конкретным назначением, например, выбор героя. В этом окне у игрока не должно быть ничего лишнего.

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

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

3. Цветовая дифференциация кнопок

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

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

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

4. Удобство использования

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

Для каждого типа хвата и ввода меняются зоны удобного взаимодействия с устройством. Кроме того, эти зоны меняются в зависимости от размера устройства. Нельзя просто взять схему зон с iPhone 12 mini и применить ее, например, к iPad 12 Pro. Также следует учитывать челки и вырезы под камеру, которые будут занимать часть полезного пространства вашего приложения.

Подготовьте несколько базовых схем для разных устройств: маленькие смартфоны, такие как iPhone 12 mini, средние устройства и большие "лопатники". Также стоит учитывать растущую популярность складных смартфонов.

Это может быть большой проблемой — создавать удобный интерфейс для разных устройств, но это действительно важно. Создавайте адаптивные интерфейсы, которые могут автоматически перестраиваться, чтобы выглядеть одинаково хорошо на разных соотношениях сторон экрана, например 9:21 и 3:2. Как создать такой интерфейс в Unity мы обсудим в другой статье.

5. Тестируйте и итерируйте

Невозможно сразу создать интерфейс и пользовательский опыт идеального качества. Вам нужно тестировать получившийся дизайн на устройствах разных размеров и соотношений сторон. Делайте это на этапе первого прототипа, без финальной графики. Фигма — универсальный и популярный инструмент для создания таких прототипов и их тестирования. Есть и другие сервисы, но рекомендую работать именно в этой программе. Если она вам не подходит, можете использовать, например, Penpot.

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

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

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