UX и UI: что это и в чём разница

3 ноября 2026 г. | Статья: 9 мин чтения | Юзабилити, UX каталога

UX (user experience, пользовательский опыт) — это все аспекты взаимодействия человека с компанией, её сервисами и продуктами. UI (user interface, интерфейс пользователя) — это та часть, с которой человек непосредственно взаимодействует на экране: кнопки, меню, формы, шрифты, цвета, расположение элементов. UI — важная, но более узкая часть UX.

Простыми словами

Представьте интернет-магазин обуви.

UI — это как выглядит и ведёт себя карточка товара: фото, кнопка «Купить», переключатель размеров, блок с ценой.
UX — это весь путь: как человек нашёл магазин, понял ли, какой размер ему подходит, сколько стоит доставка Новой почтой, пришла ли посылка вовремя, как прошёл возврат, что ответила поддержка во Viber.

Можно иметь безупречный UI и плохой UX. Дон Норман и Якоб Нильсен приводят пример: сайт рецензий на фильмы может иметь идеальный поиск, но если в базе только фильмы крупных студий, а человек ищет независимое кино, опыт провальный (NN/g). Для магазина аналог — удобный каталог, в котором нет нужного размера, или красивый checkout, после которого заказ едет неделю.

Что такое UX: определение Нормана и Нильсена

Термин «user experience» придумал Дон Норман (IxDF). В статье Nielsen Norman Group Норман и Нильсен описывают UX как всё, что касается взаимодействия конечного пользователя с компанией, её сервисами и продуктами. Требования к хорошему UX по ним (NN/g):

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

Стандарт ISO 9241-210 формулирует UX как восприятие и реакции человека, возникающие в результате использования (или ожидаемого использования) продукта, системы или сервиса (цитата по IxDF).

Что такое UI

Interaction Design Foundation определяет UI-дизайн как работу над визуальным стилем и компоновкой интерфейсов программ или устройств, чтобы людям было легко и приятно ими пользоваться (IxDF, UI Design). Интерфейсы бывают:

графические (GUI) — экраны сайтов и приложений;
голосовые (VUI) — Siri, Alexa;
жестовые — например, в VR.

Для интернет-магазина UI — почти всегда графический интерфейс: сетка каталога, фильтры, карточка товара, корзина, форма оформления.

В чём разница между UX и UI

	UX	UI
Что охватывает	Весь опыт взаимодействия с компанией и продуктом	То, что человек видит и к чему прикасается на экране
Главный вопрос	Решает ли продукт задачу человека и приятен ли весь путь?	Понятен, удобен и привлекателен ли конкретный экран?
Пример в магазине	Найдёт ли человек свой размер, поймёт ли условия доставки и возврата	Как выглядят переключатель размеров, кнопка «Купить», форма адреса
Результат работы	Исследования, сценарии, карты пути, прототипы	Макеты, UI-кит, дизайн-система, состояния элементов

IxDF сравнивает UX с автомобилем, а UI — с его панелью управления (IxDF). А ещё между ними есть юзабилити: NN/g описывает его как атрибут качества интерфейса — легко ли им научиться пользоваться, эффективен ли он и приятен (NN/g).

Как на это смотрят разные источники

NN/g (Норман и Нильсен) понимают UX максимально широко: это не только сайт, а всё взаимодействие с компанией — сервис, доставка, поддержка. UI и юзабилити — части UX.
ISO 9241-210 фокусируется на восприятии человека, включая ожидаемое использование: опыт начинается ещё до первого клика, с ожиданий.
IxDF трактует UX-дизайн как процесс создания продуктов со значимым опытом и рассматривает UX и UI как отдельные пересекающиеся дисциплины. Юзабилити и UI-дизайн — подмножества UX (IxDF).

На рынке труда «UX/UI-дизайнер» часто означает одного человека, который делает и исследования, и макеты. Это вопрос распределения ролей в команде, а не определений: сами дисциплины разные.

Кто такой UX-дизайнер и UI-дизайнер

UX-дизайнер по IxDF (источник): - проводит исследования пользователей и создаёт персоны; - делает вайрфреймы и интерактивные прототипы; - тестирует решения с пользователями; - отстаивает интересы пользователя перед бизнесом и разработкой.

UI-дизайнер по IxDF (источник): - проектирует компоновку, визуал и интерактивные элементы сайтов и приложений; - делает интерфейс интуитивным, понятным и привлекательным; - создаёт вайрфреймы, макеты, прототипы; - обычно не обязан программировать, но знание HTML/CSS/JavaScript помогает говорить с разработчиками.

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

Процесс UX/UI-дизайна

Единого стандартного процесса нет, но большинство команд работает по варианту пятишагового design thinking (IxDF):

Эмпатия — исследование пользователей: интервью, наблюдение, аналитика.
Определение — анализ данных, формулировка проблемы. Здесь часто составляют customer journey map.
Генерация идей — брейншторм решений.
Прототипирование — от бумажных эскизов до кликабельных прототипов; на этом этапе подключается UI.
Тестирование — с реальными пользователями (юзабилити-тесты) и эвристический анализ.

Процесс итеративный: результаты тестов возвращают команду на предыдущие шаги.

Примеры из интернет-магазина

Задача UX: человек боится не угадать с размером. UX-решение — таблица размеров в карточке товара, отзывы «маломерит/большемерит», понятные условия обмена. UI-решение — где и как показать таблицу (модальное окно, вкладка), как выглядит подсказка у переключателя размеров.

Задача UX: покупатели бросают корзину из-за неожиданных расходов. По Baymard (обновление от 22 сентября 2025 года), 40% покупателей, бросивших оформление, ушли из-за слишком высоких дополнительных расходов (доставка, налоги, сборы), а ещё 12% — потому что не смогли заранее увидеть полную стоимость (Baymard). Украинских данных о причинах брошенного оформления нет. UX-решение — показать стоимость доставки Новой почтой или порог бесплатной доставки уже в карточке товара. UI-решение — как именно вывести эту строку, чтобы её заметили и не спутали с ценой.

Задача UX: длинная форма оформления. По анализу Baymard 2024 года, в среднем checkout содержит 11,3 поля (в 2021-м было 11,8, в 2019-м 12,7), хотя большинству сайтов достаточно 8 (Baymard, июнь 2024). Более нового измерения нет. UX решает, какие поля убрать (например, не требовать регистрацию, объединить имя и фамилию). UI — как поля выглядят, как подсвечиваются ошибки, какая клавиатура открывается на смартфоне для поля телефона.

Что изменилось в 2026 году

Интерфейс читают не только люди. NN/g в апреле 2026 года пишет, что AI-агенты уже выполняют за пользователя покупки: переходят по сайтам, заполняют формы, сравнивают варианты и оформляют заказ, хоть и «грубо, часто ненадёжно». Отсюда советы: подписывать кнопки текстом, а не только иконкой, строить разметку по смыслу (где цена, где варианты), держать корзину и checkout предсказуемыми. Это совпадает с доступностью для людей со screen reader (NN/g, 2026).
Красивый экран больше не отличает. По NN/g (январь 2026), визуальная работа над интерфейсом дешевеет из-за стандартизации, поэтому преимущество даёт глубина: как работает вся система, содержание и функции, а не только экран (NN/g, State of UX 2026).

Типичные ошибки

Считать UX «красивыми картинками». Красивый экран без исследований часто решает не ту задачу.
Начинать с UI. Если непонятно, что нужно покупателю, макеты придётся переделывать.
Ограничивать UX сайтом. Доставка, звонок менеджера, SMS об отправке — тоже часть опыта.
Не тестировать с людьми. Мнение команды и владельца — не замена наблюдению за покупателями.
Игнорировать привычки аудитории. Покупатели привыкли к паттернам крупных маркетплейсов вроде Rozetka и Prom; неожиданные решения в базовых вещах (корзина, фильтры) повышают нагрузку.

FAQ

Что такое UX/UI простыми словами? UX — это весь опыт человека с вашим продуктом и компанией. UI — это интерфейс, через который человек взаимодействует с продуктом: экраны, кнопки, формы.

UI и UX — в чём разница? UX отвечает на вопрос «решает ли продукт задачу и приятен ли весь путь», UI — «понятен и удобен ли конкретный экран». UI — часть UX.

Что делает UX/UI-дизайнер? Исследует пользователей, проектирует сценарии и прототипы (UX), рисует макеты и элементы интерфейса (UI) и проверяет решения на людях.

Какие основы UX/UI стоит знать владельцу магазина? Определение UX по NN/g, принципы юзабилити, 10 эвристик Нильсена и базовые исследования Baymard о корзине и checkout.

Связанные термины

Источники

Norman D., Nielsen J. The Definition of User Experience (UX). Nielsen Norman Group — nngroup.com/articles/definition-user-experience
Interaction Design Foundation. UX Design — ixdf.org/literature/topics/ux-design
Interaction Design Foundation. UI Design — ixdf.org/literature/topics/ui-design
Nielsen Norman Group. AI Agents as Users (10.04.2026) — nngroup.com/articles/ai-agents-as-users
Nielsen Norman Group. State of UX 2026: Design Deeper to Differentiate (16.01.2026) — nngroup.com/articles/state-of-ux-2026
Baymard Institute. Cart Abandonment Rate Statistics (обновление 22.09.2025) — baymard.com/lists/cart-abandonment-rate
Baymard Institute. Checkout Flow Average Form Fields (26.06.2024) — baymard.com/blog/checkout-flow-average-form-fields

Хотите проверить это на своём магазине?

UX/UI дизайн

Удобные и узнаваемые интерфейсы, которые повышают удовлетворённость клиентов и продажи.

Об услуге →