Дизайнер анализирует сценарии поведения, чтобы разработать понятный и полезный интерфейс. Он продумывает, как пользователь будет взаимодействовать с продуктом. Мы поговорили с менеджером программы «Дизайнер интерфейсов» в Яндекс.Практикуме Еленой Чуйко о том, что важно в этой профессии.

Какие задачи решает дизайнер интерфейсов

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

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

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

Этапы работы и инструменты

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

«На этом этапе важно понять, какую проблему мы решаем. Причем нужно погрузиться в бизнес-проблемы, а не ограничиваться поверхностным объяснением. Дальше необходимо убедиться, что эту проблему нужно решать именно средствами дизайна. Пример плохой постановки задачи для дизайнера: «Нужно покрасить кнопку в красный». Более удачный вариант: «Нужно сделать кнопку заметнее». Еще лучше: «Нужно повысить конверсию». Ответственность дизайнера в том, чтобы прояснить задачу и понять, какая проблема за ней стоит, а затем предложить решение», — говорит Елена Чуйко.

Вооруженный всей нужной информацией дизайнер разрабатывает структуру — что и как будет работать в новом сервисе. Это стадия проектирования. Первые грубые наброски устройства продукта создаются именно на этом этапе.

Следующий шаг — прототипирование. Дизайнер использует специальные инструменты, чтобы связать весь функционал единой логикой будущего интерфейса. Сначала он создает вайрфреймы — макеты экранов или страниц, где показаны все элементы интерфейса и основные блоки. Это помогает определиться со структурой.

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

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

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

Здесь происходит первое тестирование на реальных пользователях. Это помогает избежать лишних ошибок и вовремя поменять структуру, если понадобится. «Прототипы можно показать пользователям, это обязательно нужно делать, когда проектируешь какой-то новый или измененный сценарий. Тогда удастся заметить ошибки и не тащить их в разработку. Даже очень опытный дизайнер не всегда может предсказать, как поведут себя реальные пользователи. Поэтому уже после прототипирования надо показать им результат и спросить: "Что ты видишь? Как ты тут сделаешь заказ?" То есть нужно провести интервью или коридорное тестирование. Часто после этого этапа становится понятно, что надо переделать логику», — говорит Елена Чуйко.

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

Что нужно знать и уметь на старте

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

«Дизайнер не должен быть прослойкой между заказчиком и Figma (векторный редактор для дизайнеров интерфейса, работающий в браузере. — Прим. ред.). Задача дизайнера — помогать решать проблемы, а не просто рисовать красивые картинки. Поэтому важно уточнять задачу и докапываться до потребности», — говорит Елена Чуйко.

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

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

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

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

Верстка. Для того, чтобы заниматься версткой, нужно познакомиться с HTML и CSS. Эти знания помогут определить, какие решения можно реализовать, а какие нет. «Работодатели ждут, что дизайнер сможет объяснить решение разработчику, —говорит Елена Чуйко. — Большинство работодателей считают, что дизайнеру не обязательно уметь верстать самому. Но даже начинающий специалист должен понимать, как в целом устроен цикл работы над диджитал-продуктом: какие дизайн-решения реализуются в разработке быстро и дешево, а какие придется долго и дорого программировать. Дизайнер знает, что красивый и аккуратный макет — это не конец работы. Результат — это продукт, поэтому важно убедиться, что разработчики смогут реализовать ваш дизайн в коде».

Инструменты. Стартовать будет проще, если вы быстро и уверенно ориентируетесь в графических редакторах. Неважно, в чём вы привыкли работать. Главное — готовность самостоятельно разобраться в новых инструментах, если понадобится.

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

Освойте дизайн интерфейсов в Яндекс. Практикуме

Дизайн

Школы

Школа дизайна