Что такое UX/UI-дизайн и как стать дизайнером интерфейсов

По данным исследования Business Research Insights (март 2024), рынок UX и UI демонстрирует рост и достигнет 7158.85 млн долларов к 2031 году.

Исследователи называют причины повышения спроса на представителей ИT-профессии: массовое внедрение компьютеров с 1980-х гг., веб-революция 1990–2000-х, широкое освещение проблем удобства программ и приложений в 2000-е. 

Профессия «дизайнер интерфейсов» востребована в сферах геймдева, FinTech, edTech и других. Все чаще владельцы программных продуктов задумываются о том, чтобы приложения были не только красивыми, но и удобными. Становится важным расположение кнопок, появление push-уведомлений, формы вызова консультанта или добавления товара в корзину.

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

Что такое UX/UI?

UX (расшифровка слов «user experience») — функциональная составляющая сервиса: то, как пользователь взаимодействует с интерфейсом продукта (веб-сайт, приложение, десктопная программа).

UI-часть (расшифровывается как «user interface») — визуальная составляющая сервиса: то, как продукт выглядит, какие фирменные цвета использует для брендинга, с чем ассоциируется у пользователя.

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

К примеру, есть задача — создать маркетинговое push-уведомление в банковском приложении с предложением оформить депозит. Значит, команда может разделить обязанности таким образом:

1. Дизайнеры юай и юикс работают со шрифтами для заголовка и текста пуша, брендированием (добавление логотипа банка, фирменных цветов), эмодзи. 
2. Редактору необходимо продумать текст о выгодах предложения, уместить его в небольшое количество символов, сделать оффер понятным. 
3. Frontend-разработчик добавляет логику: что происходит при нажатии на текст пуш-уведомления, каков срок жизни уведомления TTL (Time To Live), если у пользователя нет интернета, и т.д. 
4. Тестировщики проверяют корректность отображения push-уведомления на разных устройствах (планшеты, смартфоны). 

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

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

UX — это «пользовательский опыт» взаимодействия с сервисом. Юикс-дизайнер продумывает архитектуру сервиса и интерактивные элементы коммуникации: 

• кнопки оформления заказа;
• формы заполнения данных; 
• поля для ввода запросов;
• появление диалоговых окон.

UI — это пользовательский интерфейс и внешняя оболочка проекта.

Юикс часто важен для маркетинга: чем проще пользователю найти кнопку «Корзина» или «Подписаться», тем выше бизнес-метрики. Специалисты замеряют коэффициент вовлеченности, конверсию в подписку/продажу, время в приложении или на сайте и другие.

Юай-дизайн (фирменные цвета и шрифты, исполнение форм и кнопок) часто важен для брендинга и имиджа.

Начало и развитие UX/UI-дизайна

В период с 1950 по 1983 гг. в области юикс было занято до 1000 человек. Причина в том, что сервисы использовали преимущественно разработчики. Специалисты использовали интерфейс командной строки и сочетания клавиш. 

Первые компьютеры в 1970–1980-е были сложными и непонятными для массового пользователя. Взаимодействие с ПК, по словам исследователя Дона Нормана, было ужасным. Тяжелую технику (монитор, системный блок, клавиатура, мышка) перевозили из магазина на дом грузовыми машинами. Затем пользователю предстояло собрать систему, а когда она включилась — попробовать запустить программу. В 1981 г. Норман опубликовал в компьютерном журнале Datamation статью The truth about Unix: The user interface is horrid. В ней он критиковал подходы к дизайну и удобству ПК.

Чтобы оценить, как работали первые ПК и с какими сложностями сталкивались пользователи, стоит попробовать CLI (Command Line Interface). 

К примеру, в терминале на MacOS можно открыть сайт gitverse.ru. Для этого достаточно запустить его в Launchpad. 

В новом окне вводят команду GET-запроса:

~ % curl -X GET \

  'https://gitverse.ru' /

В терминале отображается код, из которого «строятся» визуал и функциональность gitverse.ru. Программисты увидят подключенные скрипты, подгрузку статики, html-элементы и css-стили, а для посетителя без навыков это просто набор символов. Гораздо удобнее, когда открывается страница в браузере:

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

В 1984 Стив Джобс презентовал первый Macintosh с элементами графического интерфейса.

Приблизительно в это же время вышла Windows 1.0. В ней нужно было не вводить команды MS‑DOS, а перемещать мышь и щелкать разные экраны («окна»).

Как UX/UI-дизайн переплетается с ИT-индустрией

Профессия появилась в результате стремительного развития ИT. Продуктовым компаниям нужна не только «техническая начинка», но и визуальная составляющая, которая влияет на конверсию, удовлетворение потребностей пользователя, длительное взаимодействие с продуктом. 

UX/UI-дизайн нужен при создании b2b, b2c, b2g и других сервисов:

• приложения банков — отрисовка интерфейсов новых продуктов (карты, депозиты, кредиты), доработка существующих, проведение UX/UI-исследований, пуш-уведомления;
• услуги, цифровые продукты — проектирование интерфейсов с кнопками заказа/подписки, тестирование дизайн-систем, разработка продающих страниц;
• разработка игр — оформление окон подсказок, иконок, декоративных элементов, образов героев и т.д. с учетом жанра (аркады, шутеры, хоррор).

Designer UX/UI обычно не работает над проектом один. Он взаимодействует с маркетологами, тестировщиками, frontend и backend-разработчиками, бизнес-аналитиками и другими сотрудниками. Также специалист работает с пользователями: проводит исследования в фокус-группах, устраивает опросы по качеству и удобству интерфейса.

Как изменялся подход к UX/UI-дизайну со временем

Индустрия ИT-продуктов для массового пользователя росла с 1970-х. Вместе с ней увеличивалось и количество запросов на специалистов, способных сделать программный продукт понятным и удобным.

В 1993 году Дон Норман присоединился к корпорации Apple Computer. Впервые в истории появилась должность, связанная с пользовательскими интерфейсами, — User Experience Architect. 

По мнению Нормана, изменился и подход к программным продуктам. В 1980–90-е работал принцип payment first, user-experience second: клиент сначала покупал компьютер, а затем приносил его домой и понимал, что им сложно пользоваться. 

С распространением  веб-сайтов после 2000-х гг. концепция design сместилась в сторону user-experience first, payment second: сначала заказчик оценивает сайт/сервис и его удобство, а затем принимает решение что-то оплатить или купить. Это превращает юикс-специалиста в «хранителя денег компании» и мотивирует руководство вкладывать средства в UX-команды.

Современный юикс- и юай-дизайн связан с новыми технологиями: VUI (voice-user interface, голосовые интерфейсы), Smart TV, гарнитуры смешанной (расширенной) реальности.

Основные принципы UX/UI-дизайна

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

Принципы UX-дизайна

В книге «Законы UX-дизайна» Джон Яблонски сформулировал и описал несколько основных принципов, среди которых упомянул законы:

• Якоба — interface должен быть привычным и работать так же, как другие знакомые пользователю;
• Фиттса — время достижения цели зависит от размера цели и расстояния до нее;
• Хика — чем больше выбор, тем сложнее пользователю определиться с ним и принять решение;
• Миллера — память пользователя кратковременна, запоминаются 7 +/– 2 элемента;
• Постеля — баланс нового и консервативного (interface должен быть понятен большинству пользователей, но открыт к новому и непривычному — к примеру, голосовому вводу);
• Теслера — степень сложности системы (любая система имеет определенную сложность, но это не должно быть преградой для ее использования).

Также Джон Яблонски указал на наличие эффекта фон Ресторфф (при наличии нескольких схожих объектов человек выберет самый запоминающийся). 

Принципы UI-дизайна

Эксперты Nielsen Norman Group указывают на пять принципов визуального дизайна (Visual design):

• масштаб — крупные элементы более важны, чем мелкие;
• иерархия элементов — взгляд пользователя необходимо направить в очередности от важного объекта к менее значимому;
• баланс — расположение и соотношение элементов по горизонтальной и вертикальной оси должно быть пропорциональным;
• контраст — противопоставление визуально непохожих элементов с целью показать, что они разные;
• гештальт — склонность человека воспринимать объекты как единое целое, а не части системы (авторы выделяют восемь принципов, среди которых симметрия, сходство, замкнутость, фон/фигура, продолжение, общая область, общее поведение, близость).

Существуют и другие принципы: KISS (максимальное упрощение), Z-паттерн или F-паттерн (группировка элементов в соответствии с восприятием человека), учет контекста, правильная расстановка акцентов.

Кто такой UX/UI-дизайнер и чем он занимается

Designer UX/UI — специалист, который отвечает за внешний вид продукта и удобство использования. В вакансиях наниматели часто пишут, что ищут специалиста UX/UI, хотя можно встретить и отдельные позиции «designer / проектировщик UX», «designer UA». 

Специалист может создавать интерфейсы для:

• веб-сайтов;
• приложений Android или iOS;
• CRM-систем; 
• игр. 

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

Например, GitVerse хочет рассказать, что пользователям доступен AI-ассистент разработчика GigaCode. В рамках маркетинговой кампании дизайнера могут привлечь, чтобы:

• создать отдельную страницу с описанием AI-ассистента;
• разработать push-уведомления для текущих пользователей;
• сделать онлайн-презентацию GigaCode для выступления спикера на конференции;
• создать баннеры и изображения для запуска контекстной рекламы и так далее.

Для каждой из задач требуются определенные навыки. К примеру, чтобы создать страницу под продукт (AI-ассистента), нужно проанализировать потребности целевой аудитории, продумать сценарии использования, заложить структуру страницы с учетом внедренных на проекте практик. Работа специалиста не заканчивается нарисованным макетом: в будущем проводят аудит, формируют UX-гипотезы, тестируют несколько вариантов страницы.

Что должен знать и уметь UX/UI-дизайнер

Специалисту важно владеть и технологиями, и soft skills. Наниматели могут предъявлять дополнительные требования к опыту. К примеру, при трудоустройстве в банк преимущество будет у соискателей, работавших с финансовыми системами или имеющих экономическое образование. В вакансиях могут просить показать портфолио с разноплановыми примерами: сложная инфографика, визуальный дизайн, реализация «длинной формы».

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

Технические навыки, которые нужны для работы UX/UI-дизайнера:

• составление Job Story (Jobs To Be Done) — ситуаций, когда клиенты будут использовать продукт;
• создание мокапов — макетов, на которые будут накладываться элементы дизайна;
• разработка UX-персон — описание целевой аудитории / типичного пользователя с указанием основных характеристик (возраст, пол, социальный статус, проблемы и интересы); 
• построение user flow — представление пути клиента в процессе взаимодействия с сервисом (первый контакт, оформление подписки, отказ от продления подписки и т.д.);
• создание UI Kit, гайдлайнов, брендбуков — наборов и инструкций для проектирования интерфейсов;
• работа с вайрфреймами (wireframe) — визуализация цифрового проекта.

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

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

• аргументировать точку зрения и презентовать концепцию;
• погружаться в проект и проявлять внимание к деталям;
• понимать эмоции и переживания другого человека и целевой аудитории;
• быть гибким и стремиться узнавать новое;
• общаться с другими членами команды и пользователями продукта;
• понимать задачи бизнеса (конверсия, удержание, возврат пользователей);
• вести переговоры с другими отделами.

Основные инструменты UX/UI-дизайнера

Список технологий, которыми должен владеть специалист, не ограничивается графическими редакторами. Стоит также отметить:

• инструменты командной работы. В крупных проектах используют системы контроля версий, трекеры, CRM-системы, сервисы для создания схем и mindmap. Для командной работы можно использовать российскую платформу GitVerse;
• frontend-разработку. HTML, CSS и Javascript, протокол HTTP, API необходимы для понимания, как строятся страницы, как происходит взаимодействие с API и базой данных. Часто нанимателям важно знание библиотек/фреймворков React, Vue, Angular;
• инструменты визуализации. Designer работает с графическими редакторами (Lunacy, Sketch, Siter, Penpot, Snappa, Pixlr X, RelayThat). Анимации реализуют при помощи ProtoPie и After Effects.

Как стать UX/UI-дизайнером

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

Чтобы получить позицию UI/UX-дизайнера, можно:

1. Освоить навыки для начала работы (обучение, менторинг).
2. Сделать несколько тестовых проектов, а затем реализовать реальные (к примеру, на фрилансе).
3. Составить резюме, добавить проекты в портфолио и начать откликаться на вакансии. 
4. Пройти собеседование, выполнить тестовое, получить оффер.
5. Устроиться на работу. 

Уход в найм — не единственная перспектива в профессии. Есть специалисты, которые сознательно продолжают работать на фрилансе и вести по 3–5 проектов параллельно. Возможно создание собственной студии (компании) с переходом из UI/UX в сферу управления проектами.

Можно ли стать UX/UI-дизайнером с нуля?

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

Но освоить профессию можно и с нуля, без опыта работы в ИT.

Как научиться UX/UI-дизайну?

Чтобы войти в ИT-сферу, можно использовать разные способы:

• пройти обучение в высшем или среднем специальном учебном заведении;
• записаться на курсы (онлайн или офлайн); 
• найти ментора с опытом для передачи знаний и навыков;
• использовать книги, видеоролики, гайды и бесплатные инструменты обучения.

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

Что почитать и посмотреть по UX/UI?

Технологии не стоят на месте, поэтому designer должен следить за трендами, но при этом не забывать традиционные принципы создания удобных продуктов.

Классикой деловой литературы на русском языке стали переводные издания:

• Нир Эяль, Райан Хувер. «Hooked. На крючке. Как создавать продукты, формирующие привычки»;
• Сьюзан Уэйншенк. «100 главных принципов дизайна. Как удержать внимание»;
• Дональд Норман. «Дизайн привычных вещей»;
• Расс Унгер, Кэролайн Чендлер. «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия»;
• Стив Круг и др. «Не заставляйте меня думать!». 

Можно посмотреть Гарвардский курс CS50 на русском, изучить видео Дональда Нормана и других зарубежных экспертов в области дизайна.

Где найти первый заказ?

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

Первыми заказчиками могут быть небольшие студии разработки, собственники бизнеса.

Заключение

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