UX отвечает за то, насколько легко человек доходит до цели, UI — за то, как интерфейс при этом выглядит и ощущается. Конверсию сильнее всего режут лишние шаги, непонятный первый экран, медленная загрузка и недоверие на оплате. Лечится это починкой конкретных сценариев, а не сменой палитры.
Коротко
UX (user experience, пользовательский опыт) — то, как человек достигает цели в продукте: какие задачи он решает, из каких экранов состоит путь и что происходит после каждого действия, включая ошибку. UI (user interface) — слой, через который этот путь воспринимается: композиция, цвет, типографика, иконки и состояния элементов.
| Вопрос | UX | UI |
|---|---|---|
| За что отвечает | Сценарии, структура, логика переходов и ошибок | Композиция, цвет, типографика, состояния элементов |
| Что на выходе | Карта экранов, сценарии, кликабельный прототип | Макеты всех экранов и библиотека компонентов |
| Чем проверяется | Тест сценария на людях, конверсия по шагам | Контраст, читаемость, единообразие компонентов |
| Цена ошибки | Переделка структуры и части бэкенда | Правка стилей в готовых компонентах |
Рабочая метафора — квартира: UX это планировка, UI это отделка. Красивая отделка не спасёт квартиру, в которой на кухню можно пройти только через спальню. Мобильные приложения живут по отдельным правилам — размеры касаний, системные жесты, безопасные зоны, — и они разобраны в статье про UX/UI-дизайн мобильного приложения.
Конверсия — доля людей, дошедших до целевого действия. Интерфейс влияет на неё через четыре вещи: понятность первого экрана, длину пути, предсказуемость отклика и доверие в момент, когда человек отдаёт деньги или данные.
Отсюда простое следствие: до оплаты доходит меньшинство, и каждый лишний шаг в этом меньшинстве отнимает свою долю. Поэтому разбирают не «сайт целиком», а конкретный путь — от первого экрана до подтверждения заказа.
Пример В кейсе SIMACH запись на ужин занимает 35 секунд, а гостю, который уже оставлял контакты, анкета не показывается вовсе. Сократили не текст на кнопке, а число шагов.
Удержание решается на первом запуске и на пустых экранах — там, где у человека ещё нет своих данных. Обзор Harvard Business Review напоминает, почему это выгодно: привлечение нового клиента обходится в пять–двадцать пять раз дороже, чем удержание существующего.
Роли — недооценённая часть удержания во внутренних системах. В кейсе SHUMI сотрудники бренда и менеджеры агентства работают в одной CRM, но видят разные наборы данных: клиент остаётся общим, а рабочее место у каждого своё.
Медленный интерфейс ощущается как сломанный, и это измеримо. Google свёл ощущение от страницы к трём показателям — Core Web Vitals — и назвал для каждого границу «хорошо», которую считают по 75-му перцентилю загрузок отдельно на телефонах и компьютерах.
| Показатель | Что измеряет | Хороший порог |
|---|---|---|
| LCP | Когда появляется главный элемент экрана | 2,5 секунды |
| INP | Отклик на действие человека | 200 миллисекунд |
| CLS | Смещение содержимого во время загрузки | 0,1 |
Дизайн влияет на все три: тяжёлые изображения и шрифты удлиняют загрузку, отсутствие заранее зарезервированного места под баннер сдвигает содержимое под пальцем, а анимация без отклика превращает быструю систему в медленную на вид. Поэтому пороги закладывают в макет, а не измеряют после запуска.
Доступность — не отдельная версия сайта для особых пользователей, а набор требований, от которых выигрывают все: контраст помогает на солнце, крупные цели — в транспорте, клавиатура — тем, кто работает быстро. Требования собраны в стандарте WCAG 2.2, принятом Консорциумом W3C 12 декабря 2024 года.
Для мобильных приложений действуют более строгие платформенные минимумы — 44 × 44 pt у Apple и 48 × 48 dp у Android; они разобраны в материале про интерфейс мобильного приложения.
Порядок этапов принципиален: визуальный стиль ложится на проверенную структуру, а не наоборот. Ниже — шаги и то, что остаётся у заказчика после каждого.
Исправить структурную ошибку на прототипе заметно дешевле, чем в собранном продукте: в первом случае переделывается схема, во втором — вёрстка, бэкенд и то, что уже успели построить поверх.
Результат работы — не картинки, а комплект, по которому продукт можно собрать и потом развивать без дизайнера рядом.
Качество интерфейса измеряют поведением людей, а не мнением о макете. Нужны две группы данных: числа, которые показывают, где теряются пользователи, и наблюдение, которое объясняет почему.
Наблюдение стоит дешевле, чем кажется: Nielsen Norman Group ещё в 2000 году показала, что лучший результат дают тесты не более чем на пяти пользователях, зато проведённые несколько раз подряд. Пять человек находят большинство проблем сценария, а следующие повторяют уже найденное.
Отдельной услуги «UX/UI-дизайн» с собственной ценой у нас нет: проектирование входит в разработку продукта вместе с вёрсткой, программированием и аналитикой. Ориентироваться стоит на цены форматов на странице разработки сайтов.
Что входит в каждый формат и чем лендинг отличается от многостраничного сайта, подробнее — в материалах про лендинг для бизнеса и запуск интернет-магазина. Объём дизайна внутри проекта определяют число уникальных экранов, количество состояний и ролей, необходимость дизайн-системы и языки интерфейса.
Мы начинаем со сценария и данных, а не с макета: какие шаги человек проходит до цели, откуда берутся данные на каждом экране и что система делает, когда что-то идёт не так. Прототип проверяем на людях до того, как в интерфейс вложены визуальный стиль и код, и только потом собираем UI-кит.
Дизайн у нас не живёт отдельно от разработки: интерфейс, вёрстка, интеграции и аналитика делаются одной командой, поэтому спецификация не расходится с тем, что в итоге собрано. Если продукт уже работает, начинаем не с редизайна, а с разбора: где люди уходят, о чём спрашивают в поддержке и какие экраны тормозят.
Обсудим вашу задачу
Расскажите, что нужно сделать, — оценим сроки и стоимость и предложим решение.
Экономия обманчивая: ошибку в логике тогда находят в собранном продукте и переделывают вёрстку и бэкенд, а не схему. Прототип без визуального стиля проверяют на людях до того, как вложены деньги в дизайн и код.
Сначала разбор: на каком шаге сценария уходят люди, о чём спрашивают в поддержке, какие экраны тормозят. Чинят найденные шаги — смена палитры конверсию не возвращает.
Пятерых, но несколько раз по ходу работы: по данным Nielsen Norman Group пять человек находят большинство проблем сценария, дальше ошибки повторяются. Выгоднее несколько коротких тестов, чем один большой в конце.
В приложении добавляются правила платформ: минимальные размеры касаний Apple и Google, системные жесты, безопасные зоны, разрешения и работа без сети. Логика сценариев общая, а навигация и состояния экранов проектируются отдельно под iOS и Android.
С запуском она меняет режим: продукт начинает собирать данные о реальном поведении, и интерфейс уточняется по ним. Обычный цикл — гипотеза, изменение на одном экране, проверка по конверсии этого шага. Полные редизайны при таком подходе требуются реже.
Отдельно мы его не продаём: проектирование входит в разработку продукта. Лендинг — от 1 200 $, сайт-визитка — от 1 900 $, интернет-магазин — от 10 000 $; внутри проекта объём дизайна растёт с числом уникальных экранов, состояний, ролей и языков.
Три порога Core Web Vitals — показателей скорости страницы, которые должны выполняться для трёх посещений из четырёх: главный элемент экрана появляется за 2,5 секунды, отклик на нажатие — до 200 миллисекунд, вёрстка при загрузке почти не сдвигается. Тяжёлые картинки и баннеры без отведённого места ломают эти цифры ещё в макете.
