UX и UI дизайн: в чём разница

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

Что такое UX простыми словами

UX — сокращение от user experience, «опыт пользователя»: всё, что человек переживает, пока пользуется сайтом. Нашёл ли он то, за чем пришёл? Понял ли, что делать дальше? Не пришлось ли гадать и возвращаться назад?

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

UX проектируют до того, как что-то рисуют: в структуре сайта, сценариях и прототипе. Его результат — не картинка, а решения: что показать первым, о чём спросить в форме, что произойдёт после нажатия.

Что такое UI и из чего он состоит

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

Задача UI — не украсить, а сделать логику видимой. Главная кнопка заметна сразу, второстепенная — спокойнее. Ссылка похожа на ссылку, а заголовок — на заголовок. Часть требований здесь измерима: по WCAG контраст обычного текста с фоном должен быть не ниже 4,5 : 1, крупного — 3 : 1. Светло-серый текст на белом фоне до этой планки часто не дотягивает, и прочитать его трудно, особенно с телефона на солнце.

Хороший UI ещё и последовательный: одинаковые элементы выглядят одинаково на всех страницах. Для этого дизайнер собирает UI-кит — набор всех кнопок, полей и карточек в одном файле.

Чем UX отличается от UI: таблица

	UX	UI
Главный вопрос	Удобно ли дойти до цели	Понятно ли, что на экране и куда нажать
Чем занимается	Структура, сценарии, порядок блоков, тексты кнопок и форм	Кнопки, поля, шрифты, цвета, иконки, отступы, состояния элементов
Результат	Схема сайта, сценарии, прототип	Макеты страниц и UI-кит
Как проверяют	Дают людям задачу и смотрят, справятся ли	Проверяют контраст, читаемость, одинаковость элементов на всех страницах
Пример ошибки	Цена спрятана в конце страницы, форма просит лишнее	Кнопка не похожа на кнопку, серый текст на сером фоне

Граница не всегда чёткая: текст на кнопке — это UX, а её цвет и размер — UI, хотя речь об одном элементе.

Примеры на обычном сайте: форма, меню, карточка услуги

Форма заявки

UX: какие поля действительно нужны, какие из них обязательные, что будет после отправки и куда уйдёт заявка. Каждое лишнее поле — повод бросить форму на середине.

UI: подписи над полями, поля, в которые легко попасть пальцем, ошибка рядом с полем и понятными словами, кнопка с названием действия, сообщение об успешной отправке. Подробный разбор — в статье о форме заявки на сайте.

Меню

UX: какие разделы вынести в меню, в каком порядке и как их назвать — словами клиента, а не внутренними терминами компании. И что должно быть доступно без меню: телефон, кнопка заявки.

UI: где стоит меню, как выглядит кнопка, которая раскрывает его на телефоне, как подсвечен раздел, в котором человек находится.

Карточка услуги

UX: что человек должен узнать до того, как нажмёт: название, для кого услуга, цена «от», срок. И куда ведёт карточка — на подробную страницу или сразу к заявке.

UI: иерархия текста — что крупно, что мелко, — фото или иконка, одинаковая высота карточек в ряду, отклик на наведение.

Почему одно без другого не работает

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

Поэтому работают в таком порядке: сначала UX — структура, тексты и прототип, потом UI — макеты под компьютер и телефон. У нас это два этапа подряд: структура и тексты — 3–5 дней, дизайн — 5–10 дней. Рисовать красивые кнопки, пока не решено, что они делают, — значит перерисовывать их потом.

Как понять, хороший ли UX

Мнение «мне удобно» не годится: владелец знает свой сайт наизусть. Нужны чужие глаза и цифры.

Тест с реальными людьми

Найдите несколько человек, которые не видели сайт и похожи на ваших клиентов, и дайте им задачу: «Узнайте, сколько стоит перевезти двухкомнатную квартиру, и оставьте заявку». Не подсказывайте, просите думать вслух и записывайте, где человек замялся, что искал и не нашёл. В Nielsen Norman Group советуют начинать с пяти человек: дальше проблемы в основном повторяются. Найденное исправляют и проверяют снова.

Тестировать можно ещё до дизайна — на кликабельном прототипе. Ошибку в логике дешевле найти в схеме, чем на работающем сайте.

Аналитика: Метрика и Вебвизор

После запуска поведение посетителей показывает Яндекс Метрика:

• цели — сколько людей отправили форму, позвонили, перешли в мессенджер;
• Вебвизор — записи визитов: как человек прокручивал страницу, куда нажимал, где остановился и откуда ушёл;
• карта кликов — куда нажимают; частые клики по тому, что не нажимается, — знак, что элемент выглядит как кнопка;
• карта скроллинга — до какого места страницу досматривают;
• аналитика форм — на каком поле бросают заполнение.

Вебвизор, карту скроллинга и аналитику форм включают в настройках счётчика. Смотрите не на отдельные визиты, а на повторяющееся поведение: если многие листают страницу вверх-вниз, они что-то ищут и не находят.

Что заказывать для небольшого сайта

Лендингу или сайту услуг не нужны отдельные UX-специалист и UI-дизайнер: обычно логику и внешний вид проектирует один дизайнер или студия. Важно, чтобы в работе были обе части:

• структура и прототип с настоящими текстами до дизайна;
• макеты под компьютер и под телефон;
• состояния элементов: ошибки в формах, наведение, успешная отправка;
• единый набор элементов, чтобы новые страницы выглядели частью сайта;
• цели в Метрике — чтобы после запуска проверить решения на реальных посетителях.

Отдельная работа над UX с тестами на людях имеет смысл там, где сценарии сложные: личный кабинет, большой каталог, запись с выбором специалиста и времени.

Если хотите, чтобы сайт был и понятным, и аккуратным, расскажите о задаче: разберём её и предложим структуру. Как всё это должно работать на узком экране, — в статье про адаптивный дизайн, а с чего посетитель начинает знакомство с сайтом, — в разборе первого экрана.