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.
Карту экранов и сценарии, кликабельный прототип, макеты всех экранов и состояний, UI-кит с компонентами и правилами, описание поведения интерфейса в крайних случаях и доступ к исходникам макетов на своей стороне.
С запуском она меняет режим: продукт начинает собирать данные о реальном поведении, и интерфейс уточняется по ним. Обычный цикл — гипотеза, изменение на одном экране, проверка по конверсии этого шага. Полные редизайны при таком подходе требуются реже.
