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

Эта статья не о том, как пользоваться шейпами или смарт-объектами, как рисовать красивые иконки или рамки окон. Об этом написаны тонны статей и снято столько же стримов и вебинаров.
Здесь мы на примере реального сложного события — Союзов — расскажем и покажем полный цикл работы над созданием финального интерфейса: от постановки задачи до реализации эффективных и рабочих решений.

Но сперва кратко — о самом процессе разработки решений, общем для всего: от отдельного окна до фичи и проекта в целом.

Процесс

1. Постановка задач

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

2. Анализ лидеров рынка

Игнорировать тренды и удачные рабочие решения конкурентов попросту глупо и неэффективно. Многие топовые компании знают об этом, и мы не исключение, но с одним важным «но» — мы принимаем во внимание решения только действительно топовых игр и максимально полно покрывающие наши задачи.

3. Проецирование успешных решений на собственные задачи

Логичное продолжение предыдущего пункта. Тут важно добавить, что далеко не всегда хорошее для остальных игр решение нам подходит. Поэтому в наших играх нельзя встретить полную копию чьего-то решения. Если сказать проще, мы всегда стараемся сделать лучше.

4. Поиск оптимального решения

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

5. Финальный дизайн

Заполучив скетч и утвердив его мини-командой, мы начинаем финализировать макет. После выполнения предыдущих пунктов это становится чисто техническим моментом. Далее: верстка, сборка — все как обычно.

6. Обработка «живого» фидбэка игроков

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

История одной фичи...

Итак, Союзы. Они стали настоящим вызовом для нашей команды. Впервые предстояло создать мидкорную по своей сути фичу, адаптировав ее сразу под все наши 3 казуальные проекта (Homescapes, Gardenscapes, Fishdom). Мы понимали, что просто не будет, потому как предстояло одновременно решить множество иногда противоречащих друг другу задач. С них мы и начали…

Задачи

1. Совместить чат и остальные экраны фичи в одно окно

Учитывая, что все 3 проекта довольно «взрослые», основной экран (Дом, Сад, Аквариум) каждого закономерно оброс своим устоявшимся интерфейсом, трогать который никак не хотелось. К тому же с недавних пор был взят курс на глобальное упрощение HUD. Таким образом, требовалось,, чтобы, нажимая всего одну кнопку, игроки попадали в одно-единственное место, где было бы «всё про Союзы»: чат, друзья, лидерборды. ...Такого не было ни у кого, и это стало еще одним стимулом реализовать это у нас в проектах.

2. Сделать уникальный, но преемственный нашему основному стилю интерфейс

Несмотря на противоречивость тезиса, мы все же хотели сделать что-то нативное нашей общей стилистике, чтобы игроки не «выпадали» из общей канвы, но в то же время явно осознавали и ощущали «клановость».

3. Сделать интуитивный, но эффективный UX

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

4. Сделать гибко и универсально

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

Исследование рынка

Объектами исследования стали такие проекты, как Toon Blast, Clash Royale, Golf Clash, Cats и некоторые другие. Тщательно проанализировав каждый, мы выделили проблемы, мешавшие нам применить опыт конкурентов.

Toon Blast подходил нам по многим пунктам, но смущала излишняя простота стиля и, главное, вертикальная ориентация. Игры линейки Supercell отталкивали излишней сложностью. Ну а смелые Cats лишь убедили нас, что нативное направление без ухода в художественную уникальность экранов — правильная идея.

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

Итак, поставив задачи и осознав проблемы, непосредственно влияющие на финальное решение, мы начали поиски…

Поиск

Начали с боковой панели и стандартных окон. Но это не решало проблемы объединения Союзов в один экран и создавало трудности при адаптации под разные устройства, в частности iPhoneX.

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

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

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

Решение

Как видим, результатом стало окно, занимающее почти всю площадь экрана: с панелью управления основным функционалом (тут пригодился опыт игрового планшета) и тематическим арт-элементом слева — и областью контента справа. Наряду с основными элементами, выполненными в стандартном стиле остального UI, появилась та самая «клановость» за счет темной коричневой подложки и уникальной формы окна.

Функционал жизней удалось не только перенести, но и значительно упростить до всего двух кнопок.

Заранее предусмотрев гибкость и универсальность внутреннего контента, мы сумели легко перенести его в отдельные окна, не растеряв дух фичи:

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

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

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

После всего пары месяцев только на Homescapes более 18 млн игроков из более чем 150 стран объединены в более чем 1 млн Союзов. И это только начало! :)

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

Принципы

1. Максимально полное решение именно гейм-дизайн-задач

Чем скрупулезнее вы отнесетесь к их постановке и выполнению, тем более эффективное решение в интерфейсе вы получите на выходе. Упустив что-то на данном этапе, вы рискуете открыть ящик Пандоры «правок».

2. Комплексный подход к проблеме

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

3. Глубокий анализ лидеров рынка

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

4. Баланс качества и ресурсов

Дизайн, как часть прекрасного, — понятие субъективное. Потому особенно важно не «закапываться» в излишнее качество, постоянное улучшение визуала, зачастую неоправданное. Главное — соблюдать баланс между достаточно высоким качеством и сроками разработки. И тут, опять же, крайне полезен подход, описанный в первых пунктах.

5. Должное внимание фидбэку игроков

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

6. Универсальность и кросс-проектность

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

7. Постоянная оптимизация процессов

Это положение также является неотъемлемой частью нашей культуры. Никогда не стоит останавливаться на достигнутом, несмотря на удачный опыт, оцененный миллионами. Улучшение процессов — ключ к эффективности и актуальности решений.

В заключении хотелось бы сказать спасибо всем, кто дочитал эту статью до конца. Я искренне надеюсь, что вы вынесете что-то полезное для вас лично как профессионала или для ваших проектов в целом, сделав их еще более привлекательными для игроков и успешными для команды!

Хороший продукт — это баланс между гейм-дизайном, UX и UI. Это больше, чем просто UI. Если соблюдать это простое правило, ваш проект обречен на успех!

2019-08-02

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

2019-08-05

очень круто