Для того, чтобы оживить наше огромное эссе об иконках, мы создали из иконки игру. То, что планировалось сделать за недельный хакатон, превратилось в большое приключение, длиною в год. Вот такие уроки вынесли для себя 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 создает интерактивные продукты и консультирует в сферах управления, дизайна и продвижения цифровых продуктов. Наши офисы находятся в Токио, Цюрихе и Берлине. Свяжитесь с нами (ia@ia.net).