Работа художника интерфейсов в 13 вопросах

Как заставить пользователя нажать туда, куда тебе нужно.

Мы пообщались с художником интерфейсов Арвидасом Браздейкисом: раньше он принимал участие в работе над такими франшизами, как Mass Effect и Dragon Age, а сейчас занимает должность ведущего UI/UX-дизайнера в Game Insight. Узнали, как устроена работа UI-художника, и в чём секрет хорошего интерфейса.

Вопросы задал Артемий Леонов

Чем UI отличается от UX?

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

У меня есть любимый пример: вот микроволновка умеет нагревать еду. Но чтобы перевести наше желание подогреть пельмени в понятное для неё действие, нужно нажать несколько кнопок на её приборной панели. Собственно, вот эти кнопки — это и есть UI. А UX — это про то, где эта панель будет находиться, понятным ли языком написана инструкция, удобной ли формы эта микроволновка.

В разных командах всё по-разному. Иногда один человек отвечает и за UI, и за UX. Иногда это целые команды и разные подразделения. В зависимости от того, как сформирована команда, по-разному налажено сотрудничество.

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

А есть команды, в которых специалисты совмещают в себе обе эти функции — ты можешь отвечать и за UX, и за UI: и за удобство, и за читаемость, и за выдержанность арт-дирекшена.

Откуда приходят в UI?

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

Какие навыки необходимы UI-специалисту?

Из прикладных нужны навыки работы во всех программах, связанных с UI. Это Photoshop, Figma, Miro и другие программы — зависит от компании. Ещё нужны чёткое понимание композиции, теории цвета, типографики, а также понимание юзабилити, поведенческих паттернов, законов психологии.

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

Какие есть методы для того, чтобы убедиться в том, что пользователю будет удобно пользоваться твоим интерфейсом?

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

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

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

Иногда всё ограничивается просто видеозаписью. Иногда это видеозапись плюс опросник. Иногда рядом ещё сидит человек, который наблюдает, как пользователь играет.

Методы бывают очень разные. Например, для одного проекта, который сейчас находится в разработке, мы обкатывали билды на игровых конференциях. Организовывали стенды и даже проводили турниры в такой “дикой” среде. И по итогу получили очень много фидбека, который было бы невозможно получить в жёстко контролируемых условиях.

Насколько дизайн UI — творческая работа? Получается ли на ней самовыражаться?

Самовыражаться вполне можно. Я нахожу в этом такой же кайф, как от сборки конструктора или игры в тетрис. Есть простор для решения проблем, и одновременно возможность творчески себя выразить. Как UI-дизайнер я могу привнести собственную лепту в решение тех или иных проблем.

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

Чем UI для игр принципиально отличается от UI для сайтов или программ?

Так как в играх гораздо больше интерактивности, у продукта гораздо больше точек внимания. Интерфейс для онлайн-магазина Amazon и для Counter-Strike учитывают разный уровень стресса у пользователя, потому что продукт требует разного уровня концентрации.

Это значит, что мы по-разному дозируем информацию. В случае с Counter-Strike игрок смотрит в прицел посередине экрана, и нам нужно думать о том, как наиболее эффективно донести ему информацию о том, что находится на периферии. А в случае с Amazon гораздо более расслабленная ситуация — если, конечно, вы не состязаетесь в онлайн-шопинге, как в киберспорте.

Это главные различия — повышенная интерактивность и высокий уровень вовлечённости. Это создаёт совершенно другие условия, и, соответственно, новые задачи для специалиста по UI.

Какими способами можно объяснить пользователю какую-либо сложную концепцию при помощи интерфейса?

Нужно начинать с чего-то простого. Если есть сложная концепция, — например, нетривиальное управление или нетипичная игровая механика, — то её нужно расщепить на самые базовые элементы и понять, что из всего это массива ближе всего пользователю.

Информацию нужно выдавать порционно, — не портянкой текста, которая всё стопорит и заставляет пользователя много думать. Кроме того, нужно иллюстрировать те или иные моменты, — привлекать внимание к отдельным кнопкам и прочим элементам управления.

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

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

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

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

Важно понимать, что UI-дизайнер — не редактор текста. Если в проекте нужен определённый массив текста, если нам скажут его вставить — то мы его вставим. Мы просто стараемся следить за форматированием.

Как заставить пользователя нажать туда, куда нужно?

Это вечный вопрос. Чёткого ответа на него нет, есть только рекомендации.

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

Как заставить игрока почувствовать себя комфортно, когда он впервые включил незнакомую игру?

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

На это уже можно нанизывать более сложные концепции. Например, вы уже знаете что такое “тап”, “свайп” и “долгое нажатие”. Или же что такое “энтер” и “клик правой кнопкой мыши”. Значит, нужно оттолкнуться от этих простых концепций, и через них объяснять более сложные.

Можете рассказать про какие-нибудь оригинальные UI-решения, которые вы встречали в играх за последнее время?

Мне очень понравился радикальный стиль интерфейса в Persona 5. Они очень удачно совместили экстремальный арт-дирекшен с читабельностью. С одной стороны интерфейсы невероятно пёстрые, с другой — очень легко воспринимаемые с точки зрения читабельности информации.

Ещё мне очень нравится работа с UI в Alien Isolation. Там разработчики взяли финальную версию интерфейса, записали его на VHS-кассеты, потом проигрывали её на старых телевизорах, попутно всячески портя запись, а потом вот эту картинку уже вставили в игру. Вроде бы проделали кучу лишней работы — но меня впечатлила их самоотверженность.

Какие вещи точно недопустимы в дизайне UI — вне зависимости от проекта?

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

Второй момент — это уже художественная сторона. Попадает ли UI в арт-дирекшен? Придерживается ли он заданной темы и тона? Например, очень люблю интерфейс в Nier: Automata и в Diablo III, — при этом понятно, что интерфейс из Nier будет неуместно смотреться в Diablo, и наоборот.

По каким ошибкам можно вычислить новичка?

Самая частая ошибка — начинать сразу с чистовика. Не с простой схемы, не с блокаута — а прямо с “финального варианта”. Такой подход часто выдаёт новичков.

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

Бывают композиционные ошибки: например, предоставил слишком мало места под текст, не учёл локализацию, расположил смысловые блоки слишком далеко друг от друга и прервал логическую близость.

Материал подготовлен командой XYZ Media.

Наши каналы в Telegram и на YouTube.

#xyz #gamedev #3d #gamedesign #ui #ux