Коротко. UX (user experience) — это логика: путь пользователя по сайту, порядок блоков, где стоит кнопка и когда она появляется. UI (user interface) — это то, как эта логика выглядит: цвет кнопки, шрифт, отступы, иконки. Пример: решение «кнопка заказа должна быть видна без скролла на любом экране» — это UX; решение «кнопка будет оранжевой, 48 px высотой, с закруглением 8 px» — это UI. Хороший UI поверх плохого UX не спасает конверсию, а плохой UI поверх хорошего UX теряет только эстетику, но не заявки.
Разница в одном примере
Возьмём форму заказа в интернет-магазине. UX-дизайнер решает: сколько полей в форме (3 или 12), в каком порядке их показывать, нужен ли отдельный шаг подтверждения, что произойдёт, если пользователь ошибся в номере телефона. UI-дизайнер решает: какого цвета будет рамка поля, какой шрифт у подписи, как выглядит анимация при клике на кнопку «Оформить».
Если перепутать эти роли местами, получается типичная ошибка: форму делают красивой (хороший UI), но просят 12 полей вместо 3, и пользователь уходит на середине заполнения — потому что путь (UX) продуман не был. Обратная ситуация тоже встречается: форма логичная и короткая, но кнопка серая на сером фоне — заявка технически возможна, но не всегда заметна.
Что делает UX-дизайнер: результат работы, а не картинки
UX-дизайн — это исследование и структура, и на выходе почти никогда нет цвета. Типичные артефакты:
- Карта пути пользователя (user flow) — схема: откуда человек пришёл, что видит первым, куда кликает, что происходит дальше;
- Прототип (wireframe) — чёрно-белая схема расположения блоков без картинок и цвета, отвечает на вопрос «что где стоит»;
- Информационная архитектура — структура разделов и меню сайта, логика, по которой пользователь ищет нужное;
- Тестирование гипотез — например, A/B-тест: форма в один шаг против формы в три шага, что даёт больше завершённых заявок.
Хороший UX незаметен пользователю — он просто не задумывается, куда нажать дальше. Заметным UX становится, когда он плохой: человек не может найти кнопку, путается в разделах, закрывает вкладку.
Что делает UI-дизайнер: визуальный слой поверх готовой логики
UI-дизайнер работает уже с готовым прототипом и превращает его в то, что видно глазом:
- Цветовая палитра и типографика — какие цвета читаются как «надёжно», какой шрифт удобен для длинных текстов, а какой — для заголовков;
- UI-кит — набор готовых элементов: кнопки, поля ввода, карточки товаров, чтобы все страницы сайта выглядели единообразно;
- Микроанимации и состояния — как элемент выглядит при наведении, нажатии, ошибке ввода;
- Финальный макет — то, что верстальщик получает как техническое задание на пиксель.
Без готового прототипа UI-дизайнер вынужден одновременно придумывать и структуру, и картинку — риск в том, что визуально привлекательное решение может быть логически неудобным, а переделка макета на этом этапе дороже, чем переделка прототипа.
Почему плохой UX не спасти хорошим UI
Частая ошибка заказчика — судить о сайте по первому впечатлению: «красиво — значит, хорошо». Но конверсия зависит от логики сильнее, чем от эстетики. Практический пример: у двух лендингов с одинаковым визуальным стилем и одинаковым трафиком конверсия может отличаться в 2-3 раза, если в одном форма заявки на первом экране, а в другом — только в футере после длинного текста. Это разница чисто в UX, при равном UI.
Обратный случай встречается реже, но тоже бывает: устаревший визуально сайт (UI 2015 года) с логичной структурой конвертит стабильно, хотя выглядит не современно — заявки идут, но часть аудитории отсеивается по критерию «доверия с первого взгляда», которое формируется именно визуально.
Один специалист или два разных
В небольших проектах — сайтах, лендингах, интернет-магазинах среднего размера — UX и UI чаще закрывает один человек, UI/UX-дизайнер. Это нормально и даже эффективнее: не нужно передавать прототип между двумя людьми и тратить время на согласование на стыке. Разделение на двух отдельных специалистов оправдано в сложных продуктах — веб-приложениях, личных кабинетах, сервисах с десятками экранов, где объём чистой логики (UX) — уже работа на несколько недель до появления первого цвета.
При выборе подрядчика на разработку сайта стоит уточнять явно: в смете дизайна отдельной строкой должен быть прототип, а не только «дизайн» одним пунктом — иначе есть риск получить красивый макет без проработанной логики.
Как проверить на своём сайте, где именно проблема
Если сайт не приносит заявок, полезно разделить диагностику на два вопроса, а не искать проблему в целом «дизайне»:
- Отказы выше 55-60 % и короткое время на странице — чаще признак проблемы с UX: человек не понимает, что делать, и уходит;
- Долгое время на странице, но низкая конверсия в клик по кнопке — часто UI-проблема: кнопка есть, но незаметна, либо визуально не читается как кликабельный элемент.
Точную причину показывает вебвизор и карта скроллинга в Яндекс.Метрике — без этих данных разговор про UX и UI превращается в спор вкусов. Это же можно проверить через аудит сайта, который до заказа редизайна показывает, на каком именно шаге теряются пользователи.
Частые вопросы
Можно ли заказать только UI-дизайн, без проработки UX?
Технически можно, но это оправдано только если структура и логика сайта уже проверены и работают — например, при обычном ребрендинге без изменения количества страниц и их порядка. Если сайт делается с нуля, пропуск UX-этапа почти всегда означает, что логику придётся дорабатывать уже после запуска, методом проб и ошибок на реальных пользователях.
UX-дизайнер обязательно проводит исследования пользователей?
Не обязательно и не всегда — для типового сайта или лендинга среднего бизнеса достаточно опыта дизайнера и анализа конкурентов, полноценное UX-исследование с интервью пользователей нужно для сложных продуктов с большой аудиторией, где ставки на ошибку выше.
Почему в вакансиях чаще пишут «UI/UX-дизайнер», а не раздельно?
Потому что для большинства сайтов и лендингов одного совмещённого специалиста достаточно, и найм двух узких людей на такой объём задач — избыточные расходы. Разделение специализаций возникает там, где объём работы это оправдывает.
Сколько стоит UX-проработка отдельно от визуального макета?
Для сайта на 8-10 страниц прототип с проработкой логики обычно занимает 20-40 % бюджета всего дизайн-этапа — то есть если весь дизайн стоит 150 000 ₽, на прототип и UX-логику уходит примерно 30 000-60 000 ₽, остальное — визуальный слой и адаптация под устройства.
Как понять при просмотре готового макета, проработан ли в нём UX?
Задать простой вопрос: понятно ли за 5 секунд, что за компания, что она предлагает и что нужно сделать дальше (куда нажать)? Если на макете это неочевидно даже человеку, не знакомому с бизнесом, — вероятно, макет сделан без проработки UX, даже если визуально выглядит аккуратно.
Узнать, где на сайте теряются заявки — в логике или в оформлении
Покажем на конкретных данных из аналитики, что мешает конверсии: путаная структура или незаметные элементы интерфейса.