UI и UX дизайн: в чём разница
Основы3 минРедакция Innovialabs
Коротко
UX-дизайн определяет, что делает продукт и каким путём пользователь проходит к цели, а UI-дизайн — как выглядит и реагирует каждый экран на этом пути. UX без UI — рабочий скелет, UI без UX — красивый экран, который никому не помогает.
Коротко о главном
UX-дизайн (user experience) — это про путь: какая у пользователя задача, какие шаги он делает, где застревает и что продукт должен делать на каждом шаге. UI-дизайн (user interface) — это про поверхность: сетка, кнопки, шрифты, цвета, иконки, состояния и анимации на каждом экране этого пути.
Простое правило: UX отвечает на вопрос «это работает и понятно?», UI — «это выглядит ясно, единообразно и приятно?».
Конкретные примеры
Возьмём приложение доставки еды.
UX-решения:
- Разрешить смотреть меню без регистрации, а номер телефона спрашивать только при оформлении заказа.
- Показать стоимость доставки до корзины, а не сюрпризом на последнем экране.
- Запоминать последний адрес, чтобы повторный заказ занимал три нажатия.
- Продумать, что происходит, если ресторан закрылся во время оформления.
UI-решения:
- Кнопка «Заказать» — самый заметный элемент экрана и закреплена внизу.
- Карточки блюд используют одинаковые пропорции фото, стиль цены и отступы.
- Ошибки — красные с иконкой, успешные действия — зелёные.
- Шрифты, сетка и размер зон нажатия подходят для небольших телефонов.
Обратите внимание: ни одно UX-решение не говорит о цвете, и ни одно UI-решение не меняет порядок шагов.
Где они пересекаются
В реальном продукте граница размыта, и это нормально. Типичные зоны пересечения:
- Формы. Сколько полей спрашивать — UX; как они сгруппированы, подписаны и как визуально показывается валидация — UI. Плохо свёрстанная форма может испортить хорошо продуманный сценарий.
- Навигация. Структура разделов — UX (информационная архитектура); таб-бар, стиль меню и активные состояния — UI.
- Обратная связь. Решение, что после оплаты нужно подтверждение, — UX; как это подтверждение выглядит и анимируется — UI.
- Микротексты. Надписи на кнопках и тексты ошибок относятся к обоим: они ведут по сценарию и формируют визуальный блок.
Хороший UI может на время скрыть мелкие недочёты UX, но не исправит сценарий, который спрашивает не то и не в том порядке.
Кто чем занимается
| Задача | UX | UI |
|---|---|---|
| Интервью, опросы, анализ аналитики | да | |
| Пользовательские сценарии и информационная архитектура | да | |
| Вайрфреймы (схематичные экраны) | да | |
| Юзабилити-тестирование | да | помогает |
| Визуальный стиль, цвет, типографика | да | |
| Детальные макеты и все состояния экранов | да | |
| UI-кит и компоненты дизайн-системы | да | |
| Интерактивный прототип | да | да |
| Передача макетов разработчикам | помогает | да |
В небольших командах обе роли обычно совмещает один продуктовый дизайнер. В крупных компаниях роли разделяют: UX-исследователи, UX-дизайнеры, UI-дизайнеры, иногда отдельные моушн- и контент-дизайнеры.
Частые ошибки
- Начинать с визуала. Выбор цветов до того, как понятен сценарий, приводит к перерисовке экранов.
- Считать UX «украшательством». UX измеряется тем, решает ли пользователь задачу, а не тем, как выглядит экран.
- Забывать о состояниях. UI — это не только идеальный сценарий: пустые, загрузочные, ошибочные и неактивные состояния тоже часть работы.
- Не тестировать. И UX-, и UI-гипотезы стоит проверять на реальных людях, хотя бы на нескольких коротких сессиях.
Как понять, что вам нужно
- Пользователи не могут завершить задачу или уходят на определённом шаге — начинайте с UX.
- Задачи решаются, но продукт выглядит неоднородно или устаревше — начинайте с UI.
- Продукт создаётся с нуля — нужны оба: сначала UX, затем UI поверх проверенных сценариев.