Между пользователем и интерфейсом: чем отличаются веб-, UX- и UI‑дизайн

Основная разница между веб, UX- и UI-дизайнерами — в зоне ответственности и специализации. UX-дизайнер отвечает за User Experience (с англ. «пользовательский опыт») и юзабилити, UI-дизайнер — за User Interface (с англ. «пользовательский интерфейс»), то есть визуальное представление. А веб-дизайнер создаёт веб-приложения, учитывая оба эти направления.

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

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

На популярном сайте поиска работы сейчас ищут 635 UX/UI-дизайнеров. Источник: hh

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

Научиться создавать макеты для сайтов и сервисов любой сложности можно на курсе «Веб-дизайнер». За девять месяцев обучения студенты осваивают нюансы работы с Figma, Adobe Photoshop, Tilda, учаться разбираться в вёрстке сайтов и веб-приложений.

Использование масок в полях ввода упрощает задачу пользователя. Источник: pochta

Принципы UI/UX-дизайна подробно разобрал Стив Круг в бестселлере «Не заставляйте меня думать. Веб-юзабилити и здравый смысл». Кратко сформулируем основные:

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

При передаче показаний система напоминает о важных данных: пользователю не нужно запоминать детали или искать прошлые записи для сверки. Источник: erc

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

Вот чем занимается веб-дизайнер:

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

Рекламный баннер на сайте outdoor-магазина визуализирует заманчивую картину похода. Источник: sport-marafon

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

Вот чем занимается UI-дизайнер:

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

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

Если в форме поиска поменять местами поля «когда» и «обратно», пользователям будет сложнее найти нужный билет. Источник: aviasales

Вот чем занимается UX-дизайнер:

● проводит UX-исследования и тестирования продукта;
● выясняет потребности целевой аудитории;
● составляет варфреймы и мокапы — макеты будущего продукта;
● составляет User Flow и User Journey Map (UJM) — карты пути пользователя внутри продукта;
● выявляет барьеры и драйверы при взаимодействии с продуктом;
● оценивает метрики и даёт рекомендации по улучшению пользовательского пути и минимизации барьеров;
● создает прототип сайта или приложения.

User Flow, или карты пользовательского пути, помогают понять, какие препятствия встретит клиент на сайте или в приложении, и устранить их до релиза продукта. Источник: figma