Разница между UX и UI проще, чем кажется по названиям: UX отвечает за то, как интерфейс работает, а UI — за то, как он выглядит. UX решает, какие блоки нужны на странице, в каком порядке, сколько шагов до заявки и что человек увидит при ошибке. UI превращает эту логику в цвета, шрифты, кнопки и анимации. Сайт может быть красивым и при этом не продавать — это и есть хороший UI без UX. Ниже разбираем обе части на понятных примерах и показываем, за что именно вы платите, когда заказываете дизайн.
UX-дизайн простыми словами
UX — user experience, опыт пользователя. Это не картинка, а набор решений о поведении человека на сайте или в приложении. Хороший UX незаметен: посетитель находит нужное, понимает цену, отправляет заявку и не задумывается, почему это было легко.
Чем занимается UX-дизайнер:
- Исследование. Кто клиенты, что им нужно, где они уходят с текущего сайта, что предлагают конкуренты. Источники — аналитика, интервью с продавцами и клиентами.
- Карта пути клиента (CJM). Путь от первого касания до покупки с точками сомнения на каждом шаге. Из неё становится видно, какой блок закрывает какое возражение.
- Информационная архитектура. Разделы, вложенность, меню, переходы между страницами.
- Прототип. Серые схемы экранов без цвета и графики, связанные переходами.
- UX-тест. Реальные люди проходят сценарий на прототипе, а дизайнер смотрит, где они теряются.
Результат работы UX-дизайнера выглядит скучно — серые прямоугольники и стрелки. Но именно на этом этапе решается, будет ли сайт приносить заявки.
UI-дизайн — это визуальный язык интерфейса
UI — user interface, пользовательский интерфейс. UI-дизайнер берёт утверждённую логику и делает её понятной и приятной глазу: подбирает типографику и цвета в айдентике компании, рисует кнопки, поля, карточки, иконки, задаёт отступы и сетку.
Хороший UI — это не только эстетика. Он отвечает за то, что важная кнопка заметна, текст читается на телефоне при солнечном свете, а состояние формы понятно без слов: поле с ошибкой выделено, кнопка после нажатия показывает загрузку. Сюда же относятся адаптивы для десктопа, планшета и мобильного, микровзаимодействия и доступность — контраст, размер области нажатия, читаемость шрифтов.
- UX — что и в каком порядке происходит. Результат: сценарии, схемы, прототип.
- UI — как это выглядит и ощущается. Результат: макеты, UI-кит, дизайн-система.
- UX без UI — работает, но выглядит сыро. UI без UX — красиво, но не продаёт.
Разница между UX и UI в одной таблице
| UX | UI | |
|---|---|---|
| Главный вопрос | Сможет ли человек сделать то, зачем пришёл? | Понятно ли и приятно ли это выглядит? |
| Что на выходе | Сценарии, карта экранов, кликабельный прототип, отчёт по тесту | Цветные макеты, адаптивы, состояния, UI-кит, дизайн-система |
| Когда делается | Сначала, до визуала | После утверждения логики |
| Чем проверяется | UX-тестом на людях, метриками конверсии | Контролем вёрстки, читаемостью, соответствием бренду |
| Цена ошибки | Сайт не приносит заявок | Сайт выглядит недорого и вызывает меньше доверия |
Одна форма заявки глазами UX и UI
Возьмём обычную форму «Оставить заявку» на сайте услуг. На ней хорошо видно, где проходит граница.
Что решает UX
Сколько полей нужно на самом деле — имя и телефон или ещё десять пунктов. Где стоит форма: в конце страницы или рядом с каждой ценой. Что происходит после отправки: экран «спасибо», звонок менеджера, сообщение в WhatsApp. Что увидит человек, если ввёл телефон без кода или пропал интернет. Можно ли отправить заявку одной рукой с телефона.
Что решает UI
Как выглядят поля и подписи, какого цвета кнопка и заметна ли она на фоне, как подсвечивается ошибка, как кнопка показывает отправку, как выглядит экран благодарности. Будет ли форма выглядеть частью бренда, а не стандартным шаблоном.
Если UX решён плохо, никакой UI форму не спасёт: десять обязательных полей останутся десятью полями, даже очень красивыми. Если плох UI, логика работает, но кнопка теряется на фоне, и часть людей её просто не замечает.
Почему «красиво» без UX не даёт заявок
Самая частая ситуация, с которой к нам приходят: сайт сделан недавно, нравится руководству, а заявок мало. Обычно причина в том, что дизайн рисовали от вкуса, а не от пути клиента. Блоки стоят в порядке «как у всех», цена спрятана, ответы на главные возражения отсутствуют, а мобильная версия — уменьшенная копия десктопа.
ПРАВИЛОКаждый блок на странице отвечает на конкретное сомнение клиента. Если не отвечает — его не должно быть.
В нашем подходе к UX/UI-дизайну сайтов визуал начинается только после того, как логика проверена на людях. На прототипе 5–8 человек из вашей аудитории выполняют задачи — найти услугу, понять цену, оставить заявку, — а мы смотрим, где они сбиваются. Правка серой схемы стоит час, правка готового макета с адаптивами — несколько дней.
Утверждать дизайн по одному экрану главной страницы на большом мониторе. Большинство клиентов увидят сайт на телефоне, и не на главной, а на странице услуги из рекламы или поиска. Смотрите макеты в мобильной версии и на тех страницах, куда реально приходит трафик.
Как измерить, сработали ли UX и UI
Спор «нравится — не нравится» заканчивается, когда у дизайна появляются метрики. До запуска нового интерфейса стоит зафиксировать базовые показатели текущего сайта, а после — сравнить их на тех же страницах и том же трафике.
- Конверсия в заявку — главный показатель для сайта услуг. Её двигает прежде всего UX: порядок блоков, ответы на возражения, удобство формы.
- Доля отказов и глубина просмотра — показывают, понимает ли человек с первого экрана, что он попал по адресу. Здесь работают и UX, и UI.
- Время до целевого действия — сколько секунд и шагов проходит от входа до заявки или покупки.
- Доля мобильных конверсий — если на телефоне заявок заметно меньше, чем на компьютере, проблема почти всегда в мобильной версии.
Где возможно, новую версию страницы лучше проверить A/B-тестом на части трафика: так вы сравниваете дизайн, а не сезонность и бюджет рекламы. Рост конверсии честный подрядчик не гарантирует — он зависит и от трафика, и от оффера, — но может гарантировать методику и измерение.
За что вы на самом деле платите дизайнеру
В смете дизайна UX и UI обычно не разделены строками, но по времени они делят проект примерно поровну. В формате корпоративного сайта на 3–5 недель первая неделя уходит на исследование, вторая — на прототип с UX-тестом, ещё две — на UI с адаптивами и состояниями, и около трёх дней — на дизайн-систему.
Если подрядчик предлагает дизайн дешевле и быстрее, проверьте, какая часть выпала. Чаще всего это UX: нет исследования, нет прототипа, нет теста, а сразу рисуются «красивые экраны». Отдельно этот этап можно заказать как кликабельный прототип за неделю — с ним любой подрядчик потом сделает UI и оценит разработку точнее. Цены по форматам мы подробно разобрали в статье «Сколько стоит UX/UI-дизайн сайта», а чем схема отличается от макета — в материале «Вайрфрейм, прототип и макет».
Один дизайнер или два: кто нужен вашему проекту
На рынке встречаются и «UX/UI-дизайнеры» в одном лице, и команды, где роли разделены. Для лендинга или небольшого сайта одного сильного специалиста обычно достаточно. Для магазина, личного кабинета или сервиса с ролями полезно, чтобы рядом с дизайнером работали аналитик и арт-директор, а на приёмке вёрстки — фронтенд-разработчик.
Важнее состава — порядок работы. Если специалист сразу открывает Figma и рисует цветной экран, не задав вопросов об аудитории и не показав схему, вы получите UI без UX, кто бы ни стоял за проектом.
Как проверить, что вам продают UX, а не только картинки
- С чего начинается работа: с интервью и аналитики или сразу с макетов?
- Будет ли прототип и проверят ли его на реальных пользователях?
- Какие метрики зафиксируют до запуска, чтобы потом сравнить результат?
- Входят ли в смету мобильная версия и все состояния экранов?
- Будет ли дизайн-система или только набор экранов?
- Кто проверяет, что вёрстка совпадает с макетом?
Если на большинство вопросов ответ «да», вы платите и за логику, и за визуал. Посмотреть, как устроен такой процесс у нас, и посчитать свой проект можно на странице проектирования интерфейсов под конверсию.
UX UI — что это, если совсем коротко?
UX — как работает интерфейс: логика, сценарии, порядок шагов. UI — как он выглядит: цвета, шрифты, кнопки, анимации. Вместе они дают интерфейс, которым удобно и приятно пользоваться.
UI-дизайн — это просто «нарисовать красиво»?
Нет. UI отвечает за заметность действий, читаемость, состояния элементов, адаптивы и доступность. Красота — часть работы, но не её цель.
Можно ли заказать только UX или только UI?
Да. UX можно заказать как прототип с UX-тестом, а UI — поверх готового прототипа. Но если UI рисует другая команда, важно передать ей описание логики и состояний.
Нужен ли UX для лендинга?
Да, но в сокращённом виде: исследование за два дня, структура блоков и прототип одной страницы. Даже на одной странице порядок блоков и форма заявки решают, сколько будет обращений.
