Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

Материал, который лучше поиска в «Гугле» объяснит, как устроена работа такого специалиста.

Материал подготовлен при поддержке онлайн-школы дизайна Contented

Если спросить у поисковика, кто такой UX/UI-дизайнер, можно получить много абстрактных ответов: «очень востребованный специалист», «тот, кто создаёт интерфейсы» или «дизайнер приложений, удобных пользователю и выгодных бизнесу».

Конкретики в этих ответах нет. Поэтому вместе со школой Contented мы решили показать, из чего на самом деле состоит рабочая рутина специалиста. Для этого выбрали героиню — эксперта курса «UX/UI-дизайнер с нуля до ПРО», сотрудницу Tele2 Полину Семенченко — и провели с ней один рабочий день.

UX — user experience, логика дизайна. То, как пользователь взаимодействует с интерфейсом: удобно ли ему, получается ли быстро решить свою задачу.

UI — user interface, визуальная составляющая дизайна. То, как выглядит интерфейс для пользователя: какого цвета кнопки, хорошо ли читаются шрифты.

UX/UI-дизайнер — специалист, который выстраивает логику интерфейса и сам его «рисует». В разных компаниях должности таких дизайнеров называются по-разному: я, например, «продуктовый дизайнер». Можно сказать, что я более глубоко погружаюсь в продукт.

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

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

В Tele2 гибкое начало рабочего дня. Я живу далеко от работы, поэтому из-за пробок добираюсь примерно к 9:30. Сначала иду за кофе, а работать начинаю примерно в 9:45. Мне нравится подход компании: здесь главное не то, сколько часов сотрудник просидел на рабочем месте, а объём выполненных задач.

9:45 — проверяю почту, Slack и календарь. Когда непрочитанных писем не осталось, готовлюсь к рабочим совещаниям. Сегодня вторник — день, когда все коллеги работают из офиса, так что обычно на него выпадает много очных встреч.

Большую часть времени я провожу в офисе: удалёнка — круто, но иногда принять какое-то решение легче, перекинувшись парой слов с коллегой в офисе.

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

Я пришла в компанию через год после учёбы: окончила РЭУ им. Плеханова по специальности «Бизнес-информатика». Пыталась совместить технологии и дизайн, не хотелось жить без творчества. Поэтому, как только появилась возможность, записалась на годовую программу UX/UI и успешно её завершила.

11:00 — первая встреча: планируем задачи на следующие две недели с командой дизайна.

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

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

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

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

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

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

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

12:00 — возвращаюсь к работе после встречи с коллегами.

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

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

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

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

В моей работе исследования занимают 20–40% времени, в остальные часы я рисую макеты. Но у UX-дизайнеров, которые специализируются исключительно на аналитике и логике, исследования могут занять и все 100%.

Чтобы понять, откуда пользователи переходят в личный кабинет, куда идут дальше и какие элементы на странице самые кликабельные, — мониторила «Яндекс.Метрику» и «Гугл-аналитику». Такую аналитику я могу выгрузить сама, но если бы мне понадобились более сложные данные, например воронка продаж за большой период, я бы обратилась к коллегам из веб-аналитики.

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

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

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

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

• Продакт, который ставит задачу: он получил её от бизнеса.
• Дизайнер, который над задачей работает и рисует макеты.
• Фронтенд-разработчик, который встраивает интерфейс в сайт.
• Бэкенд-разработчик, который реализует всю логику в коде, на бэке.
• Аналитик, который пишет техническое задание для фронта и для бэка.

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

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

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

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

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

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

14:00 — встреча с руководителем.

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

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

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

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

В этой профессии важно постоянно учиться. Потому что дизайн — это не догмы (конечно, есть правила, паттерны, закономерности). Он очень быстро меняется: появляются не только новые визуальные тренды, но и программы. К тому же у каждого дизайнера свой взгляд, и преподаёт он дизайн по-разному.

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

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

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

15:30 — работа с копирайтером.

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

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

Мы никогда не присылаем ей пустые макеты и не используем «рыбные» тексты а-ля Lorem ipsum. К тому же, если у дизайна или продукта есть важные нюансы, я дополнительно подсвечиваю их в ТЗ, пишу комментарии. Дизайнеры всегда стараются написать хороший текст сами, но профессиональный копирайтер может сделать их лучше, а ещё отследить ошибки.

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

16:30 — «приёмка» изображений.

Приходит новое уведомление — графический дизайнер (мы их называем коммуникационными) прислала картинку для одной из моих задач.

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

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

В уведомлении сказано, что картинка готова: я скачиваю её и вставляю в макеты в Figma. Отправляю заказчику на финальное утверждение. Чаще всего отрисовка картинок и копирайт текста идут параллельно.

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

17:30 — ревью.

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

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

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

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

Самое любимое чувство в моей работе — видеть свой дизайн на сайте. Когда он выпустился и с ним работают реальные пользователи, я чувствую себя как в меме с Леонардо Ди Каприо. Мне хочется ткнуть пальцем в монитор и сказать: «Смотрите, это же мой дизайн!»

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

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

За 15 месяцев студенты успеют оформить 15 работ вместе с наставниками, пройти стажировку в ИТ-компании или студии, а также посетить практикумы с опытными экспертами. Они, кстати, работают в VK Group, Ozon или digital-агентстве Сuberto, основатель которого курирует курс.

Ждут дизайнеров-самоучек, которым не хватает базовых знаний или бизнес-контекста, фрилансеров или стажёров с небольшим опытом, а также всех, кто хочет сменить профессию или найти работу в ИТ-сфере.

Для читателей vc.ru Contented подготовили промокод «В дизайн» — он даст скидку 45% на все курсы школы. Использовать его можно до 16 июля включительно.