Уроки UX в дизайне игр

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

Около года назад, мы получили прекрасный материал для статьи по использованию иконок в UI. Основная мысль статьи была позаимствована у Дитера Рамса: “Как можно меньше иконок, но не менее”. и вот мы подумали: Давайте создадим  быструю, простую игру для выработки у дизайнеров инстинкта отказа от иконок. Статья с подвохом. Люди узнают об игре благодаря статье и узнают об этой статье, благодаря игре. Мы назвали ее “Yps-Approach.”

Многие наши друзья задавались вопросами: “Вы пишите игру для статьи? Не должно ли быть наоборот?” А мы думали: Это будет быстро. Это будет круто. Это будет просто. И мы многое узнаем. Что может пойти не так?. Ну, “быстро” превратилось в пол года отрисовки и пол года разработки. “Просто” превратилось в космическую науку. То, что должно было быть “круто”, круто повернулось к нам спиной: проект стоил нам массу времени и нервов. Но мы многое поняли.

История

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

Принцессу (известную как принцесса Гриб, а не Персик) похищает ящерица по имени Bowser… и, это все. Водопроводчик (это вы), должны спасти ее, снова и снова. Потому что принцессе, видимо, нравится, что ее постоянно похищают (У нее вообще есть инстинкт самосохранения?). Для такого странного мира, как Королевство Грибов, это нормально, подумаете вы. И этому найдется логическое объяснение, но не тут то было. Это классическая “история” в истории видео игры (девушка, которая попала в беду). Но самое интересное, что цель вашей игры вообще находится в другом замке.

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

Реальность: Вначале, мы просто переделали Space Invaders в более красивом дизайне. Стартовый экран был очень прост и предполагал только две функции: “Играть” и “Очки”. Скоро, к нам закралось ощущение, что игра требует вступления (intro). Но какого вступления? Для начала, мы добавили логотип iA. Мы его увеличивали и уменьшали, затемняли, в общем, делали довольно привычные вещи, которые должны помочь, но не помогают. После утверждения идеи “битвы слов и иконок”, которая позже превратилась в “битву между логикой и эмоцией”, начало вырисовываться первое очертание интро для нашей игры. Мы создали 8-битный логотип iA, который представлял собой маленького человечка (i) и космический корабль (A). Человечек должен запрыгнуть в корабль, затем корабль улетает. Это подготавливало игрока. Вот, примерно половина этой анимации:

iconic-animation-crisp

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

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

Логика и эмоции

Предпосылка: В нашем представлении было так: мы берем известную идею игры, создаем крутую графику с использованием разных цветов, сильным звуком, взрывами и игра создаст сама себя. Игры слабо поддаются аналитике, так что это будет несложно, не так ли? А еще, все мы – геймеры, так что мы знаем, что к чему. Ох, как же это глупо звучит сейчас. И как знакомо! Как часто мы слышим такие фразы от людей о своем роде деятельности? Знание того, как использовать вещи не означает, что вы знаете, как эти вещи устроены. Но для аудитории, то, что происходит на сцене – это все, что они видят. (цитата из “Компьютеры как театр” Бренды Лорел). Так же, как и любая другая форма дизайна, мы скоро выяснили, что “Дизайн игры – это абстрактный процесс” (Ян Богост “Лучшие видео игры – без героев”), который требует видение, концепцию, метод и много терпения. И опыт. Когда мы начинали, опыта у нас не было.

“Когда представленные миры являются интерактивными, будь то авангардные театральные постановки или виртуальные офисы, то, каким образом люди находят края вселенной расширяя границы возможного – является основным вопросом дизайна.” (цитата из “Компьютеры как театр” Бренды Лорел).

Реальность: На протяжении первых 95% проекта, игра не производила того впечатления, которого мы от нее ожидали. Смена эстетического восприятия, добавление множества цветов и крутого звука не повлияло на игру, насколько мы этого ожидали. Внезапно мы осознали, что игры требуют намного большего внимания к деталям, чем мы привыкли уделять (хотя мы уделяли действительно много!). Всякий раз, когда мы меняли что-то на уровне восприятия (игра бы не стоила и половины того, что есть, если бы не удивительная работа системы Kiwi, которая предоставила нам гипнотический саундтрек Goa Trance и отличные звуковые эффекты), нам приходилось адаптировать структуру. К нашему удивлению, мы не столкнулись с таким ощутимым разделением между формой и содержанием, HTML и CSS, фронт- и бекэндом, к которому мы привыкли в Web и App разработке.

Уроки: В работе над Web и App проектами, мы тратим большую часть времени на получение правильной структуры. Визуальный дизайн становится на свое место, как только модели обретают форму. Так как мы учились в процессе работы, мы начали понимать, что мы не можем отделить форму от содержания и четко определить структуру банально из-за недостатка опыта. Чем больше вы рисуете, тем больше возможность того, что вы сможете увидеть структуру там, где ранее замечали только форму. В процессе работы над стартовым экраном, вам потребуется внести более 100 правок. В тоже время, разработка игры позволила нам понять всю важность уровня восприятия в дизайне. UX дизайнеры часто забывают это.

UX

Предпосылка: Перед началом, мы думали, что разработка UX игры будет довольно простой потому, что мы были под впечатлением классическим юзабилити в разработке игр, который зачастую не впечатляет. Создается впечатление, что у каждой игры своя собственная логика меню. Настройки представляют собой перегруженную путаницу, а количество настроек кажется совершенно лишним (просто выставляйте значения по дефолту). В веб дизайне вам бы не простили такое количество кликов и заставок перед началом игры (только новички так делают). А самое ужасное – это интро “как играть”. Соответственно, насколько трудно будет нам (имея опыт в создании новостных сайтов, онлайн магазинов, ПО для банков и текстовых редакторов) создать крутой UX для простой игры, основанной на Space Invaders?

icons-pixelgrid-crisp

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

Уроки. Интерфейс игр не ограничен обычным пониманием того, “как пользователь решает свою задачу на продукте”, реальная трудность состоит в том, чтобы заставить пользователя активно идентифицировать себя с главным персонажем игры, а не представить себя таковым на доли секунды. В то время, как web и app дизайн могут жить с определенной долей пассивности, игры необходимо создавать так, чтобы они полностью отбирали наше внимание и мы уходили в этот мир с головой. Игрок должен играть наклонившись вперед к экрану. Работа с сайтами предполагает удобное физическое положение пользователя. Также, игра должна быть достаточно сложной для вовлечения игрока и чувства азарта, но не слишком. Нахождение такого баланса и есть высшая степень мастерства. Достижение нужной степени сложности игры и полного погружения игрока – вот то самое искусство, за которое мы получили столь высокую степень уважения.

Различия

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

iconic-evolution_crisp

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

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

Вступительная часть, главный экран, уровни, завершение игры и финальная заставка должны разрабатываться вместе. Хороша аркадная игра проигрывается как театральная пьеса, с поднятием занавеса, началом, серединой и аплодисментами в завершении. Сочетание частей игры должно происходить на очень высоком уровне, чтобы вам хотелось играть в нее снова и снова – вот настоящее искусство в сфере дизайна игр. Основная цель дизайнера – заставить вас полностью идентифицировать с героем. Это очень схоже с web и app дизайном, но в тоже время, сильно отличается. Связь между логикой и эмоциями в игре достаточно комплексная, и эти понятия более тесно переплетаются, чем в традиционном web или app проекте. Это завораживает. Это похоже, но отличается. Такие UX дизайнеры, как мы, много узнали в процессе работы.

Вывод

Наш план состоял в том, чтобы создать уловку для продвижения статьи. То, что мы могли “создать быструю и простую игру в качестве трюка для продвижения статьи” – мечта новичка. Это была трудная работа, которая довела нас до предела наших возможностей. Через несколько недель работы, мы поняли, что в дизайне игр (как и в любом другом дизайне) нет места дешевым трюкам и быстрым решениям. Или вы делаете это правильно, или как-нибудь.

Загрузки стартовали с 1000 копий в день, и сейчас выросли до 6000. Статья “Об иконках” стала самой успешной после поста “Веб дизайн состоит из 95% типографики”, что дало старт перекрестным продажам для iA на App Store. Так что мы счастливы. В этой статье мы опустили много моментов, таких как исследования финального экрана, все виды шрифтов для игры, сложности тестирования, новую философию пикселей и сложности разработки единого управления для разных разрешений экранов. Дайте нам знать, если вам интересны данные аспекты.

Естественно, у нас было много классных идей дизайна, которые мы вырезали из игры. Например, подобные варианты Game Over:

iconic-game_over

Прямо сейчас, многие геймеры с удовольствием играют в Iconic, и мы не можем не замечать этого, глядя на топ игры в списке Game Center. Мы не можем знать, как долго продержатся 6000 скачиваний в день. Отзывы бывают только двух видов: или нравится, или нет. В конце концов это аркадная игра и мы еще не закончили. Это приложение, поэтому, мы никогда не остановимся. На данный момент, мы не планируем создавать другие игры для себя. У нас еще много работы по улучшению существующей (улучшение контроля, больше настроек, больше оружия).

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

Мы можем еще долго говорить о ней, но вам стоит просто попробовать поиграть в нашу игру. Она бесплатна.

iconic-ultimate-teaser

iA создает интерактивные продукты и консультирует в сферах управления, дизайна и продвижения цифровых продуктов. Наши офисы находятся в Токио, Цюрихе и Берлине. Свяжитесь с нами ([email protected]).

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Редизайн Spokeo. Уменьшаем "визуальный шум" для лучшего UX
Подробнее

Редизайн Spokeo. Уменьшаем “визуальный шум” для лучшего UX

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

10 мобильных UX трендов на 2021 год

2020 год почти закончился (к счастью), а это значит настал идеальный момент, чтобы разобраться, что нас ждет в следующем году. Представляем вам список из 10 трендов мобильного UX дизайна, которые определят 2021 год

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share