Вы читаете перевод статьи “The Vital Guide To User Interface (UI) Design Interviewing”. Над переводом работали Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
В то время, как UX дизайнеры продумывают общую функциональность продукта, дизайнеры интерфейсов (UI дизайнеры) в основном отвечают за то, в каком виде продукт предстанет перед пользователями и какими будут его элементы визуальной коммуникации.
К примеру, UI дизайнер должен удостовериться, что каждая страница, экран или этап, с которыми сталкивается пользователь, спроектированы в соответствии общим курсом, который определил UX дизайнер. Кроме того, они отвечают за общую согласованность дизайна и применение гидов по стилю ко всей системе визуальной коммуникации продукта.
В чем разница между UI и UX дизайном? Зачастую люди просто не различают эти понятия.
Одна из ключевых особенностей в том, что, в отличие от UX дизайнеров, UI дизайнеры часто хорошо разбираются в фронт-енд разработке и имеют хорошие навыки написания кода. Все потому, что они отвечают не просто за дизайн интерфейса в соответствии с задумкой UX дизайнера, а непосредственно за создание интерактивного интерфейса.
В чем сложность?
Принимая во внимание тот факт, что многие не понимают разницы между UX и UI, нет ничего удивительного в том, что компании нанимают одного человека на обе роли. Эта статья поможет вам разобраться в различиях этих дизайнерских ролей и научит, как распознать вашего нового идеального UI дизайнера.
Обычно описания вакансии UI дизайнера можно разделить на две категории, в зависимости от представления работодателя об обязанностях UI дизайнера.
Первая категория вакансий рассматривает UI дизайнера как универсального графического дизайнера. Такому дизайнеру ставят задачи по брендингу, рисованию иллюстраций и даже по созданию с печатных материалов.
Вакансии второй категории приписывают UI дизайнеру обязанности UX дизайнера. Это яркий пример случая, когда работодатели не понимают разницы между этими ролями и пытаются нанять дизайнера “два-в-одном”. Иногда это также делается из соображений экономии.
Очевидно, что обе категории вакансий отражают неправильные представления об UI дизайне, и сейчас это — одна из основных проблем нашей индустрии.
Люк Вроблевски, продуктовый дизайнер в Google, объясняет это так:
“Информационная архитектура определяет структуру информации. Проектирование взаимодействия (interaction design) дает людям возможность управлять этой информацией. Визуальный дизайн объясняет, как воспользоваться этой возможностью. А пользовательский интерфейс включает в себя все вышеперечисленное.”
Надеюсь, теперь вы понимаете: UX дизайнер и UI дизайнер — это две совершенно разные роли, и один человек не должен исполнять их обе разом.
Интервью с UI дизайнером
Требования к UI дизайнеру и его обязанности постоянно изменяются и расширяются, что характерно для любой профессии, связанной с технологиями. Итак, перед вами список вопросов для интервью, на которые ваш потенциальный UI дизайнер должен быть в состоянии ответить без смущения и удивления.
В: Почему важны вайрфреймы? Вы пользуетесь вайрфреймами/создаете их сами?
В большинстве команд созданием вайрфреймов занимается UX дизайнер, поскольку он/она собирает необходимую информацию о пользователях. Однако, это не значит, что ваш UI дизайнер не должен ничего знать о вайрфреймах: существуют команды, в которых вайрфреймы создаются UI дизайнерм (или совместно с UX дизайнером). Кроме того, каждый UI дизайнер должен уметь “читать” и понимать выданные ему вайрфреймы.
Ваш потенциальный UI дизайнер должен ответить на ваш вопрос примерно так:
“Вайрфрейм — это, по сути, визуализация инструмента или чертеж существующих на данный момент этапов, шагов, функций, структуры и содержимого страницы (сайта/экрана). Вайрфреймы должны быть простыми, в них не должно быть элементов дизайна: шрифтов, цветов или графики, так как их основное назначение — отражать функциональность”.
В: Как вы применяете прототипирование в процессе работы?
По аналогии с вайрфреймами, прототипы, как правило, создаются UX дизайнером. Поэтому каждый UI дизайнер должен понимать, зачем нужны прототипы и как применять их в процессе работы.
Проще говоря, прототипирование — это объяснение дизайна, и оно нужно, чтобы сэкономить время. Чтобы UI дизайнеры не тратили свое время на проектирование или перепроектирование конкретных пользовательских взаимодействий, на основе прототипов создаются макеты, которые показывают, как будут использоваться элементы дизайна.
Прототипы позволяют UI дизайнерам определить потенциальные “проблемные” места, идущие вразрез с задумкой UX дизайнера.
В: Как вы взаимодействуете с UX дизайнером(ами) и разработчиком(ами)?
Вашему потенциальному UI дизайнеру должно быть комфортно обсуждать этот вопрос, поскольку и UX, и UI дизайнеры работают непосредственно с дизайном, а, значит, понимают друг друга без слов.
Когда UI дизайнерам нужно подправить, изменить, добавить или удалить что-то, что предоставил UX дизайнер, они должны совместно обсудить вайрфреймы, элементы интерфейса, персонажей и подумать, как внесенные изменений способны повлиять на опыт пользователя. UI и UX дизайнеры также должны совместно тестировать продукт на стадии разработки и передавать фидбэк разработчику.
В: Что такое эффект “Эстетики-юзабилити”?
Это особенность нашего восприятия: более привлекательный дизайн всегда воспринимается, как более удобный, даже если на самом деле это не так.
Этот феномен доказан двумя учеными из Токио: Каори Кашимуры и Масааки Куросу. Они попросили участников эксперимента оценить интерфейсы по красоте и удобству. Результаты исследования доказали, что, оценивая функциональность интерфейса, пользователь все равно сильно подвержен влиянию эстетических аспектов.
Хороший UI дизайнер должен иметь в виду, что этот эффект может влиять на пользователя сильнее, чем мы можем предположить. Это, в свою очередь, обуславливает поведение пользователя и его представление о простоте использования системы.
В: Что такое атомарный дизайн и каковы его 5 составляющих?
Это достаточно молодая, но уже очень распространенная методология, которую Бред Фрост представил миру в 2013 году. Суть атомарного дизайна заключается в дизайне отдельных элементов и их комбинаций, вместо проектирования веб-страниц целиком. Это базовое объяснение сути методологии. Если ваш потенциальный UI дизайнер назовет все 5 составляющих атомарного дизайна, это будет для него отличным бонусом:
- Атомы: Самые маленькие и базовые кирпичики. Применительно к интерфейсам, это поля, текстовые блоки, кнопки и т.д. В их состав также могут входить цвета, палитры, шрифты и т.д.
- Молекулы: Когда объединяются атомы, получаются молекулы — группы атомов, связанные воедино. Это самые мелкие и основополагающие части целого. У молекул могут быть свои особые свойства.
- Организмы: Организмы состоят из молекул. Когда молекулы объединяются в группу, мы получаем относительно сложный и обособленный раздел интерфейса — огранизм.
- Шаблоны: Эта стадия понятна даже клиентам. Шаблоны — это группы организмов, объединенные в страницы. Эта стадия позволяет нам наконец увидеть такие вещи, как, например, компоновка.
- Страницы: Это конкретные применения шаблонов, которые позволяют нам увидеть окончательную версию интерфейса. Страницы — самая проработанная версия этой системы, что позволяет UX и UI дизайнерам совместно протестировать эффективность дизайн-системы.
В: Как вы поддерживаете себя в форме, чтобы соответствовать стандартам отрасли?
Цифровой дизайн постоянно меняется, а его стандарты все время растут. Самая большая ошибка, какую может сделать ваш потенциальный дизайнер, это отставание от стандартов отрасти, в которой он/она работает.
Хорошим ответом на этот вопрос будет перечисление любимых/избранных книг, ресурсов, блогов, подкастов и YouTube-каналов кандидата, через которые он знакомится с новостями отрасли. Также будет здорово, если вы услышите от кандидата о дизайнерах, которые его вдохновляют. Хороший дизайнер знает, что не бывает слишком много вдохновения, полезных ресурсов и информации, поэтому, отвечая на этот вопрос, ваш потенциальный дизайнер должен действительно “загореться”.
В: Что такое призыв к действию (call to action, CTA)? Есть ли дизайнеру до него дело?
Призыв к действию — это один из самых важных элементов сайта, платформы, приложения или цифрового интерфейса (а может и самый важный). Вкратце, это элемент интерфейса, который подталкивает пользователя к желаемому действию: покупке продукта, загрузке отчета, репосту статьи, пожертвованию денег и т.п. В вайрфрейме и прототипе UX дизайнера должно быть отражено, какой призыв к действию в идеале увлечет пользователя.
Хороший UI дизайнер должен сразу подмечать обозначенный призыв к действию и уделять больше внимания этому элементу при проектировании. Акцентировать внимание на элементе можно при помощи цвета, размера, шрифта, расположения и выравнивания: все это находится во власти UI дизайнера.
В: Что вы знаете о теории и психологии цвета?
Этот вопрос не должен представлять особой сложности для хорошего UI дизайнера. Это самые азы. Теория цвета, по сути, является набором правил и законов, направленных на моделирование эмоций, создание настроения и привлечение внимания посредством цвета.
По сути, теория и психология цвета строится на двух группах цветов: теплые и холодные. Теплые цвета — например, оранжевый, желтый и красный — пробуждают энтузиазм, энергию, позитивное мышление и счастье. Холодные цвета — зеленый, фиолетовый и голубой — создают атмосферу доверия, спокойствия и умиротворения.
К каждого отдельного цвета также есть способность вызывать определенные эмоции. К примеру, красный ассоциируется со опасностью.
Хороший UI дизайнер всегда использует силу цвета, чтобы усилить передаваемое сообщение.
В: Что вы думаете о гайдах по стилю для интерфейсов?
Отвчая на этот вопрос, ваш кандидат должен затронуть следующие моменты: Что такое гид по стилю? Зачем он создается и для чего используется? Каков его (дизайнера) личный опыт работы с гидами по стилю?
По аналогии с атомарным дизайном, гиды по стилю создаются для обеспечения согласованности в дизайне продукта, сайта, приложения и других проектов с разными состояниями интерфейса.
В гиде по стилю отражено все: от брендинга, цветов, шрифтов и компоновок до набора стандартов, специально разработанных для конкретной компании. Гиды по стилю помогают повысить эффективность работы команд и упростить новым сотрудникам процесс погружения в работу.
В: Какую роль в своей работе вы уделяете отображению элементов (element mapping)?
Любой хороший UI дизайнер проектирует элементы с учетом их формы, размеры, цвета, расположения и выравнивания. Это означает, что ваш кандидат должен отводить важную роль отображению элементов (element mapping).
Проще говоря, отображение элемента — это предполагаемая связь между элементом и его эффектом. Если эффект от взаимодействия с элементом соответствует представлениям пользователя, то у элемента хорошее отображение (хороший мэппинг).
К примеру, представьте набор картинок, расположенных горизонтально, которые можно двигать вправо-влево. Рядом с ними должны быть элементы управления или кнопки, позволяющие двигать картинки из стороны в сторону. Чтобы передвинуть картинки влево, вы нажимаете кнопку, расположенную слева. Поскольку кнопка, расположенная слева, соответствует нашим представлениям о передвижении картинок влево, можно сказать, что у кнопки хорошее отображение.
В: Что такое минимально жизнеспособный продукт (MVP)?
Иногда дизайнеры создают совершенно эгоцентричные работы. Это происходит в случаях, когда уже соблюдены все требования, выставленные UX дизайнером, но UI дизайнер продолжает усложнять дизайн, чтобы дать волю своей креативности, или чтобы попробовать что-то новенькое, или чтобы добавить что-то на свой вкус.
MVP работает с точностью до наоборот; он подразумевает создание базовой версии продукта, которой уже могут пользоваться (и которую могут купить) ранние последователи. Основная цель в том, чтобы вывести продукт на рынок как можно быстрее, не нагружая функциями, которые не являются ключевыми.
Дополнительные функции и элементы дизайна добавляются позже, на основе фидбэка настоящих пользователей, а не предположений и идей дизайнера. Многие всемирно известные продукты создавались на основании MVP, к примеру, X/Twitter.
В: Считаете ли вы “mobile-first” подход к дизайну эффективным и почему?
В идеале, ваш кандидат должен объяснить, что подход mobile-first появился как следствие адаптивного веб-дизайна, чтобы сделать работу дизайнера более эффективной и результативной.
Этот подход предполагает создание первой версии дизайна под самый маленький экран. Лишь после этого дизайн “расширяется” под более крупные экраны. Этот подход экономит время и позволяет повысить эффективность дизайнера. Когда дизайн изначально рисуется под большой экран, впоследствии дизайнеру бывает очень сложно уместить все элементы на более мелком экране.
В: Как вы применяете принцип Бритвы Оккама в вашей дизайнерской работе?
Это принцип так же прост, как принцип Парето (также известный как правило 80/20). Принцип гласит, что, выбирая между двумя вариантами, нужно отдавать предпочтение самому простому.
UI дизайнеры используют принцип Бритвы Оккама, когда выбирают между двумя разными дизайнами или между двумя дизайнерскими элементами в рамках одной функции. Предпочтение всегда отдается простоте. Другими словами, нужно выбирать тот вариант, который порождает меньше предположений.
В: Приходилось ли вам сталкиваться с партиципативным дизайном/ “дизайном соучастия”/ participatory design?
Даже если у вашего кандидата нет личного опыта участия в подобном проекте, он должен как минимум рассказать вам своими словами, что такое “дизайн соучастия” и для чего он используется.
По сути, этот термин подразумевает вовлечение всех (работников, партнеров, клиентов, пользователей, любых заинтересованных лиц) в процесс дизайна, чтобы убедиться, что конечный продукт отвечает их нуждам и ожиданиям, и что они могут свободно им пользоваться.
В: Когда вы пользуетесь тайлами стиля (style tiles)?
Тайлы стиля имеют много общего с методологией атомарного дизайна, прототипами, вайрфреймами и гидами по стилю. Тайлы стиля нужны, чтобы понятнее показать клиенту (конечному пользователю), как будет выглядеть сайт, продукт или приложение. Тайлы стиля — это нечто среднее между доской настроения (mood board) и макетом (mockup).
На самом деле тайлы стиля зачастую используются вместо традиционных макетов. В большинстве случаев они создаются на самых ранних стадиях процесса дизайна, гораздо раньше макетов. Благодаря тайлам стиля можно раньше получить более осмысленный фидбэк.
В: Как эффективно использовать визуальный вес?
По аналогии с призывом к действию и теорией цвета, визуальный вес относится к базовому набору знаний UI дизайнера. Визуальный вес — это наделение элемента “силой” выделяться из окружающего дизайна и привлекать внимание пользователя.
Не все элементы должны быть одинаково “тяжелыми”. К примеру, элементы призыва к действию (CTA) более важны, чем простые подписи или абстрактные картинки. Обычно дизайнер делает такие важные элементы “тяжелее” за счет контраста.
И это не обязательно подразумевает контрастные цвета. Контраст может выражаться, к примеру, в расположении или размере элемента. Кнопка призыва к действию может выглядеть больше (или тяжелее) просто потому, что ей в дизайне выделено больше места, чем окружающим ее элементам. Это означает, что у этой кнопки большой визуальный вес (то есть более высокая важность).
В: Можете ли вы обосновать свои дизайнерские решения?
И, наконец, главный вопрос, который определит способность вашего нового дизайнера принимать хорошие дизайнерские решения. Попросите кандидата взять любой пример/проект/сайт/приложение из портфолио и рассказать вам о различных аспектах дизайна отдельных элементов и проекта в целом.
В идеале вы должны услышать от дизайнера причины, по которым он выбрал такие цвета, размеры, формы элементов, так расположил и выровнял блоки. Ответ на этот вопрос отлично отражает дизайнерское мышение кандидата. Вы увидите, являются ли решения вашего потенциального UI дизайнера осознанными, или они, по большей, части случайны или носят экспериментальный характер.