Кто такой UX/UI-дизайнер, чем он занимается и почему его работа так важна08.06.2022 10:48

От удобства и простоты сервиса для доставки еды или сайта маркетплейса зависит, вернёмся ли мы снова за покупками или навсегда перестанем пользоваться этими продуктами. По данным совместного исследования Google и MTM, 74% пользователей удаляют приложения ритейлеров именно из-за недовольства интерфейсом.

За доступность, логику и красоту сайта или приложения отвечает UX/UI-дизайнер. Разбираемся, что такое UX и UI, какие задачи решает специалист в этих областях, сколько он зарабатывает и каким навыками обладает.

Что такое UX/UI-дизайн и чем занимается специалист в этой сфере

UX/UI-дизайн — это проектирование удобных, понятных и эстетичных пользовательских интерфейсов. Чтобы разобраться, какие задачи решает специалист в этой сфере, нужно понять, что такое UX и UI.

UX — user experience — переводится на русский язык как «пользовательский опыт». Это понятие включает в себя навигацию по сайту или приложению, состав функций внутри цифрового продукта, понятный текст.

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

UI — user interface — это пользовательский интерфейс: наполнение сайта, систематизация элементов, выбор цветов, построение визуальной композиции, оформление кнопок, колонок и других графических элементов. Всем этим занимается UI-дизайнер.

Так как работа над UX- и UI-дизайном тесно связана между собой, чаще всего ею занимается один и тот же человек. Во многих компаниях функции UX/UI-дизайнера берёт на себя один сотрудник.

Этапы работы UX/UI-дизайнера

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

1 этап. Анализ ЦА

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

Представим, что UX/UI-дизайнер работает над приложением для агрегатора билетов на самолёты и поезда по России и всему миру. Целевую аудиторию можно представить таким образом:

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

 Студенты в возрасте от 18 до 24 лет: с невысоким доходом, используют приложение нечасто — во время каникул, предпочитают бюджетные варианты.

Бизнесмены от 25 до 45 лет: с доходом выше среднего, путешествуют часто из-за командировок и деловых встреч, используют самолёты или поезда высокого класса.

 Семьи с детьми или без: доход средний–выше среднего, возраст супругов или родителей — 25–45 лет, используют приложение несколько раз в год — на длинных праздниках, во время отпусков и каникул.

2 этап. Анализ конкурентов

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

3 этап. Определение структуры

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

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

4 этап. Создание прототипа

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

Для начала дизайнер создаёт вайрфрейм (от англ. wireframe — «каркас») — схему, отражающую общую концепцию продукта и его основные разделы. Вайрфрейм отличает монохромность и низкий уровень визуализации. Можно сказать, что это упрощённый набросок сайта или приложения, который содержит все элементы продукта. Вайрфрейм показывает, как работает интерфейс и как с ним взаимодействует пользователь.

Это вайрфрейм мобильного приложения для волонтёров и тех, кто нуждается в помощи

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

Так будет выглядеть на часах Apple Watch другой сервис для неотложной помощи. Но пока это только макет

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

А это уже интерактивный прототип. Можно увидеть все экраны будущего приложения и даже попробовать его в действии

5 этап. Тестирование

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

Тестирование бывает двух видов: количественное и качественное. В первом случае исследование проводят на большой выборке пользователей, во втором — к делу привлекают фокус-группу из ЦА.

Обратная связь очень важна для UX/UI-дизайнера, поскольку даже опытный специалист может неправильно предугадать поведение клиента. Какие ошибки вы допустили при разработке, какие фичи лучше заменить, понятен ли пользователям интерфейс, насколько быстро они достигают своей цели, есть ли у них замечания к продукту — ответы на эти и другие вопросы даёт тестирование. Его можно провести с помощью Google Форм, Maze или Quant-UX.

После завершения тестирования UX/UI-специалисты занимаются доработкой сайта или приложения. До выпуска продукта на рынок может выйти несколько его прототипов.

6 этап. Поддержка и развитие продукта

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

Знания и навыки UX/UI-дизайнера

Чтобы хорошо справляться со своей работой, UX/UI-дизайнеру нужно обладать целым комплексом навыков. Если говорить о хард-скиллах, он должен:

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

Уметь работать с основными веб-программами и инструментами:

• Figma — сервис для разработки прототипов и тестирования.
• Sketch — инструмент для создания векторной графики и прототипирования для пользователей Mac.
• Adobe XD — программа для разработки интерфейсов.
• Tilda, Readymag и Webflow — инструменты для быстрого создания сайтов.
• Adobe After Effects ― редактор для визуализации анимации сайта.

Знать основы диджитал-маркетинга. Без исследования целевой аудитории создать эффективный и конкурентоспособный сайт или приложение не получится. Поэтому UX/UI-дизайнер должен понимать, как составлять портрет пользователя и как исследовать продукты конкурентов.

Владеть аналитическими навыками. Просто изучить ЦА и конкурентов недостаточно, важно также правильно обработать и проанализировать эту информацию. Кроме того, нужно владеть методиками анализа бизнес-задач: JTBD (Job«s to be done), методом персон и аудированием конкурентных продуктов.

Знать визуальный язык дизайна. Работа UX/UI-дизайнера — это не только про функциональность и удобство использования продукта, но и про его эстетику. Эргономичность дизайна, цветовое решение сайта, его красота — всё это создаёт настроение и влияет на решение клиента о покупке. Поэтому специалисту в этой сфере важно развивать насмотренность и вкус, а также расширять знания о художественных приёмах. В этом помогут курсы по UX/UI-дизайну, профильное образование и постоянная практика.

Разработка прототипа, анализ ЦА и другие технические навыки действительно важны, но не менее важно подкрепить их развитыми софт-скиллами. UX/UI-дизайнеру нужно:

Быть эмпатичным. Чтобы решить проблему пользователя, нужно понимать, что он чувствует.

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

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

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

Быть креативным. UX/UI-дизайнер — представитель творческой части IT. Умение визуализировать желания клиента, способность искать новые пути решения проблем и творческий подход помогут достичь успеха на выбранном поприще и сделать карьеру в дизайне продукта.

Востребованность профессии

В 2022 году практически ни один бизнес — будь это небольшой маникюрный салон или крупная корпорация — не обходится без сайта или мобильного приложения. По данным международного сервиса по поиску работы и найму Glassdoor, профессия UX-дизайнера находится на 24 месте в списке 50 лучших работ в США.

Пандемия ускорила диджитализацию нашего мира, поэтому с каждым годом ценность UX/UI-специалистов будет возрастать, а перспективы карьерного роста позволят развиваться в выбранной сфере. Варианты трудоустройства у дизайнеров тоже разные: фриланс, работа в штате IT-компаний, сотрудничество с рекламными агентствами и веб-студиями.

Сколько зарабатывает UX/UI-дизайнер

Согласно информации на сайте Работа.ру, средняя зарплата UX/UI-дизайнера по России составляет 106 000 рублей. По Москве и Санкт-Петербургу цифра немного выше — 130 и 115 тысяч рублей соответственно.

Источник: Работа.ру

Однако новичкам в UX/UI-дизайне придётся начинать карьеру с меньшей зарплатой. На сайте hh.ru, специалистам без опыта предлагают работу за 70+ тысяч рублей:

При наличии опыта в 1–3 года можно рассчитывать на зарплатную вилку от 60 до 100 тысяч рублей:

Если вы работаете в UX/UI более трёх лет и имеете в своём портфолио кейсы со сложными продуктами, то можно найти работу с ежемесячным доходом до 210 тысяч рублей:

На зарубежном рынке труда зарплаты специалистов в UX/UI ещё выше. В США, например, согласно данным Glassdoor, UX-дизайнер зарабатывает в среднем почти 110 тысяч долларов в год.

При этом зарплаты UI-дизайнеров в США ниже, чем у их коллег по UX:

В Германии разница в средних зарплатах между UX- и UI-дизайнерами и вовсе достигает почти 12 тысяч евро в год. Примерно 60 тысяч евро у UX-специалиста против чуть более 48 тысяч евро у его коллеги по UI:

 Профессия

UX/UI-дизайнер

Узнать больше

• Освоите одну из самых высокооплачиваемых IT-профессий в дизайне
• Научитесь проектировать интерфейсы на основе исследований
• Сможете проходить собеседования уже с середины обучения

Полезные ресурсы

UX/UI-дизайн — это сфера, которая постоянно развивается и меняется. Познакомиться с ней и следить за трендами помогут YouTube-каналы, сайты и книги по дизайну.

Профессиональные сайты

Новости, кейсы дизайнеров, актуальные исследования со всего мира можно найти на англоязычных ресурсах: UX Planet, UX Collective, Design + Sketch. Из русскоязычных сайтов рекомендуем заглянуть на UXJournal и в «Дизайн Кабак».

Книги

Эмоциональный веб-дизайн

Аарон Уолтер

Как создать сайт, на который пользователям захочется возвращаться снова и снова? Какой продукт вызовет у клиента радость и удивление? Какие способы для привлечения внимания используют дизайнеры со всего мира? Ответы на эти и другие вопросы даёт в своей книге Аарон Уолтер — ведущий дизайнер в области пользовательского опыта компании MailChimp.

Дизайн привычных вещей

Дональд Норман

Дональд Норман — основатель одной из ведущих компаний в области дизайна Nielsen Norman Group. В своей книге он описывает типичные ошибки пользователей и дизайнеров и предлагает последним методы их предотвращения. Особое внимание автор уделяет человеко-ориентированному дизайну, не забывая о роли эмоций.

Youtube-каналы

• Design Lead — русскоязычный канал ведущего продуктового дизайнера из Сан-Франциско с 11-летним опытом работы в Казахстане, Беларуси, Германии и США.
• «Веб-Дизайн. Станислав Карпинский» — ещё один канал на русском языке от дизайнера, который специализируется на работе с интернет-магазинами.
• The Futur Academy — англоязычный канал, посвящённый типографии, созданию макетов, цвету и UX/UI-дизайну.
• Material Design — туториалы и стримы для дизайнеров от разработчиков Material Design.

Резюмируем

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.