Манжеты ГД. Геймдизайн интерфейсов мобильных игр 

Начали с теории:

UX о том как работает продукт, UI то как он выглядит

Дж. Дж. Гарретт в своей книге “The Elements of User Experience” выделяет следующие части UX-дизайна: стратегия (что и как должен делать продукт), состав (необходимые функции и элементы продукта), структура (взаимодействие информации), скелет (интеграция элементов интерфейса и взаимодействий) и поверхность (внешний вид продукта).

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

У мобил приходится работать с небольшим экраном перекрытым пальцами, на десктопе есть большой монитор и мышь.

Роли в разработке UX/UI.

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

Если компания большая (как DatCroft Константина Сахнова) - отдельный UX-дизайнер и несколько UI-дизайнеров. А ведущий ГД выбирает из предложенных вариантов и объясняет почему.

Если компания маленькая (до 50 человек) - роль UX дизайнера выполняет GD, поскольку он лучше всех знает какие эмоции ожидаются от пользователя, какой экспириенс хочется ему дать.

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

Основную стилистику интерфейса прорабатывают художники.

Если ГД не разбирается в UI/UX опыт игрока будет неконсистентным

Флоу UX дизайна:

1. Изучение рефов конкурентов
2. Составление карты переходов (карта интерфейсов, screen map) - для понимания глубины вложенности, логической взаимосвязи\
3. 3.Мокапы экранов с указанием какая информация важная, объем текста и т.д.
4. В идеале описывать все состояния кнопок, анимации и даже звуки.

Основные ошибки:

1. Информационная перегруженность, как яркий пример китайские игры
2. Отсутствие разделения на блоки с родственными элементами
3. Бездумный подход к выбору портретной или ландшафтной ориентации. Недостаточное исследование конкурентов на рынке
4. Отсутствие фокуса на главных элементах
5. Нечитаемые шрифты, зачастую в угоду стилю. Лучше всего толстые и без засечек
6. Неунифицированные элементы с одинаковой ролью - кнопки назад и кресты например

Дополнительно:

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

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

Ребята огорчаются по поводу того, что playrix делает игры в landscape и играть на ходу и в метро неудобно. Также по поводу того, что игры требуют соединения с сервером, в оффлайне не погамать. А кинги молодцы и всё сделали правильно в своей friends saga.

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

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

Ребята a/b-шили в танках цветовую кодировку команды союзников и врагов, лучше всего зашло - союзники синие, враги красные. На трансляциях от спектатора одна команда красная, другая синяя. В матче каждый сам за себя - все зеленые.

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

Инструменты:

Draw IO - схемы

Photoshop как ни банально

Прототипирование и мокапы:

Adobe XD

Affinity designer

Flash как инструмент прототипирования

Real time board

Axure - самый мощный

Лучшие примеры интерфейсов:

Константин - сложно делать казуалки, поэтому candy crash friends, не идеально, но очень лаконично

Владимир - Altos adventure, из более сложных мобильный шутер warfriends (forfun)

Сергей - clash of clans, cats и king of thieves зепты

Политопия как пример мобильной цивилизации с отличным UI и плохой монетизацией.

Источник (рус., 1 час): https://www.youtube.com/watch?v=I7tx0rOB4JA