UX — это логика: как пользователь попадает на сайт, где нажимает, как доходит до заявки. UI — это визуальный слой: цвета, шрифты, отступы, компоненты. UX без UI — схема, которой неприятно пользоваться. UI без UX — красивая обёртка, под которой не работает сценарий. Для бизнеса важнее UX: неправильно собранный сценарий не спасёт никакой визуал.
Чем отличается UX от UI
Чаще всего путаница возникает из-за того, что обе роли называют «веб-дизайнер». Но задачи у них разные.
UX (User Experience) отвечает на вопрос «как пользователь решает свою задачу». Это:
- структура информации — что на каком экране, в каком порядке;
- сценарии — путь пользователя от входа до целевого действия;
- логика взаимодействия — что происходит после клика, какие состояния у формы;
- прототипы — грубые макеты без дизайна, на которых проверяют логику.
UI (User Interface) отвечает на вопрос «как интерфейс выглядит». Это:
- визуальная иерархия — что крупнее, что ярче, куда смотрит глаз;
- типографика и цвет — читаемость, акценты, контраст;
- компоненты — кнопки, поля, иконки, их состояния (hover, active, disabled);
- микроанимации и тактильная отдача.
| Критерий | UX | UI |
|---|---|---|
| Что делает | Строит сценарий | Оформляет сценарий |
| Инструменты | Интервью, карты путешествий, прототипы | Figma, дизайн-система, шрифты |
| Результат | Wireframe, user flow | Готовый макет экрана |
| Когда подключается | До UI | После UX |
| Метрика | Конверсия в сценарии, удержание | Время на задачу, ошибочные действия |
Где UX и UI пересекаются
Чистого разделения не бывает — граница размывается на трёх участках:
- Визуальная иерархия. Размер кнопки и её цвет — это UI. Но «какая кнопка главная на экране» — это UX-решение, которое UI оформляет.
- Состояния интерфейса. Что показывает пустой экран, ошибка, загрузка — это сценарий (UX). Как именно выглядит лоадер — визуальное решение (UI).
- Микроанимации. Длительность и характер анимации влияют на восприятие скорости работы — это UX. Реализация и эстетика — UI.
Поэтому в небольших командах роли часто совмещает один человек. На крупных продуктах их разделяют, чтобы каждый глубже копал в свою сторону.
Что важнее для бизнеса
Зависит от стадии продукта. Простое правило:
- Новый продукт без аудитории — важнее UX. Пока не решена задача пользователя, визуальный слой не имеет значения. «Кнопка заявки» в виде серого прямоугольника на белом фоне конвертирует, если за ней стоит правильный сценарий.
- Зрелый продукт с выстроенной логикой — важнее UI. Когда сценарий отлажен, прирост даёт полировка: более чёткая иерархия, более быстрые формы, более приятные состояния.
- Высококонкурентная ниша — важны оба. Если у конкурента такой же функционал, выбор пользователь делает по ощущению от интерфейса. UI становится конкурентным преимуществом.
Сколько времени занимает каждый этап
| Этап | Кто делает | Срок |
|---|---|---|
| UX-исследование (интервью, карты) | UX-дизайнер | 1–2 недели |
| Сценарии и user flow | UX-дизайнер | 3–5 дней |
| Wireframes и прототип | UX-дизайнер | 1 неделя |
| UI-дизайн макетов | UI-дизайнер | 1–2 недели |
| Дизайн-система и компоненты | UI-дизайнер | параллельно |
В сумме на дизайн продукта малого/среднего масштаба уходит 4–6 недель. Лендинг — 1–2 недели. Корпоративный портал или SaaS — от 2 месяцев.
Зачем нужны UX-исследования
Главная цель исследования — не «узнать, что хотят пользователи», а проверить гипотезы до разработки. Каждая неверная гипотеза, которая дойдёт до релиза, стоит в 10–100 раз дороже, чем исследование.
Минимальный набор методов для небольшого продукта:
- 5–7 глубинных интервью с целевой аудиторией — какие задачи решают, как сейчас, что бесит.
- Карта путешествия пользователя (customer journey map) — шаги от осознания потребности до покупки.
- Тестирование прототипа на 5 пользователях — выявляет 80% проблем юзабилити.
Этого достаточно, чтобы не угадывать. На продуктах со сложными сценариями (SaaS, финтех) подключают карточную сортировку, A/B-тесты, тепловые карты.
Признаки плохого UX
| Симптом | Что не так |
|---|---|
| Пользователь не доходит до заявки | Сценарий слишком длинный или запутанный |
| Высокий процент брошенных корзин | Один из шагов вызывает сомнение или страх |
| Много обращений в поддержку «как сделать X» | Функция спрятана или названа непонятно |
| Пользователь использует 2–3 функции из 20 | Интерфейс перегружен, остальное не нужно |
Каждый из этих симптомов — повод не «сделать красивее», а пересобрать сценарий. UI-редизайн тут не поможет.
Можно ли обойтись без UX-исследований
Можно, если у вас есть другие источники данных о пользователях:
- аналитика поведения (Яндекс.Метрика, heatmap, записи сессий);
- обращения в поддержку и отзывы;
- продажи — что продаётся, а что висит;
- опыт конкурентов, который уже проверен.
Если ничего этого нет — исследования обязательны. Иначе вы выпускаете продукт вслепую и платите за переделки после релиза.
UX и UI — это не две профессии, которые спорят, кто главнее. Это два слоя одной задачи: помочь пользователю решить свою задачу с минимальным трением. UX строит дорогу, UI делает её удобной для езды. Без дороги не доедешь, без покрытия — доедешь, но с раздражением.
Комментарии · 0