Чем UX отличается от UI: за что вы платите в смете и что будет, если вычеркнуть

Короткий ответ: UX - это строка сметы за то, что человек дойдет до цели, а UI - за то, как это выглядит и ощущается на каждом экране. В коммерческом предложении они стоят отдельно, потому что это разные работы с разными сроками и разными предметами на руки. Вычеркивают обычно первую: за нее не показывают картинок, и 80 000 ₽ выглядят как повод сэкономить.

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

Чем UX отличается от UI: короткий ответ и две строки в смете

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

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

Откуда взялись оба слова и почему UI - не вкусовщина

Формальное определение тоже существует. ISO 9241-210 описывает пользовательский опыт как восприятие и реакции человека, возникающие в результате использования или предполагаемого использования продукта (сводка стандарта). Ключевое слово - «предполагаемого»: опыт начинается до первого клика, на странице выдачи и в рекламном объявлении. Поэтому UX-строка почти всегда затрагивает тексты и структуру, а не только экраны.

Обратная сторона важнее для сметы: UI - тоже не про вкус. У него есть проверяемые пороги, по которым работу принимают так же, как по срокам.

• Размер кликабельной цели. WCAG 2.2, критерий 2.5.8: не меньше 24 на 24 CSS-пикселя на уровне AA и 44 на 44 на уровне AAA (w3.org).
• Гайдлайны платформ строже нормы. Apple требует минимум 44 на 44 pt, Material Design - 48 на 48 dp (Apple HIG, Material).
• Контраст текста. 4,5:1 для обычного и 3:1 для крупного, критерий 1.4.3. Ровно тот случай, когда «светло-серый на белом красиво» упирается в норму (w3.org).
• Скорость и стабильность. Пороги Google по 75-му перцентилю: LCP не больше 2,5 с, INP не больше 200 мс, CLS не больше 0,1 (web.dev).
• Язык приемки. Десять эвристик Нильсена 1994 года в редакции 2020-го - то, на чем строится любой экспертный разбор интерфейса (NN/g).

Практический смысл списка простой. Спор «мне не нравится этот оттенок» и спор «здесь контраст ниже нормы» - два разных разговора. Второй закрывается замером за минуту, первый может идти неделями и стоить срока.

Сколько UX-части в сроке проекта и что вы получаете на каждом шаге

UX-часть - это примерно треть срока проекта: аналитика и структура плюс прототип. Не «услуга сверху», а два этапа из пяти, после которых остальные три идут быстрее. Сроки по неделям мы раскладывали отдельно, здесь важны доли и то, что ложится на стол в конце каждого этапа.

Отсюда вывод, который читается прямо в чужом коммерческом. Если в нем нет строк аналитики и прототипа, вы платите за 60-70% работы. Недостающие 30-40% никто не отменил - их додумает тот, кто окажется рядом, обычно верстальщик и обычно в пятницу. Второй маркер - слово «состояния». Десять экранов это десять картинок; интерфейс - это те же экраны плюс пустой список, ошибка, загрузка, нажатая кнопка и заполненная форма.

Во что обходится вычеркнутая строка UX

Считаем на обычной правке: поменять местами два блока и добавить третий. Работа одна и та же, стоимость зависит только от того, на каком этапе правка пришла. Часы наши, ставка для счета - 2 500 ₽ за час, ровно та же, по которой мы считаем цену правки в разборах прототипа. Рядом ходят еще две ставки, и путать их не надо: 3 000-6 000 ₽ за час - верхняя, проектная ставка студии по открытому обзору Purrweb (срез 09.07.2026), по ней те же часы выходят примерно вдвое дороже таблицы; 1 667-2 667 ₽ за час - наш час внутри пакетов дизайн-поддержки, он дешевле и считается не по проекту, а по месячному объему.

Третий счет - часы сотрудников, где UI не участвует вообще. Для интернет-магазина «Сколько?Можно» мы собрали собственную админ-панель: добавление партии товаров с описаниями сократилось с недель до примерно двух часов. Красота этого экрана не влияет ни на что: это внутренний экран, наружу он не смотрит. Логика влияет на зарплатный фонд. Как обе строки складываются в общую сумму проекта, разобрано в статье про стоимость разработки сайта.

Где UX запрещает креатив: магазин, который нельзя было усложнять

Перед переработкой «Сколько?Можно» мы разобрали путь клиента: смотрели тепловые карты, замеряли точки входа и время на дорогу до покупки. Путь оказался долгим и с негативными моментами. Вывод из аналитики получился контринтуитивным: архитектура интернет-магазина давно стандартизирована, усложнять привычную механику нельзя, играть можно только визуально. UX здесь запретил креатив и отдал его UI целиком.

• Корзину и стандартный путь до покупки не трогаем: человек проходит его на автомате. По агрегации исследований Baymard около 70% начатых заказов не доводят до конца - данные зарубежные, но порядок величины отрезвляет.
• Всю идентичность отдаем визуалу: витрина, карточка товара, типографика, съемка.
• Нестандартное оставляем точечно - например, встроенный плеер, а не переизобретенную корзину.
• Прогноз по конверсии называем до старта, а не подбираем объяснение после.

Заказчик хотел сверхкреативный, нестандартный магазин. Мы отстояли понятность: интерес должен быть к бренду одежды, а не к интерфейсу, - и сошлись на компромиссе. Бюджет всех переработок составил до 500 000 ₽, срок около полугода. Конверсия выросла примерно на один процентный пункт, ровно на тот, который прогнозировали. Заявки и стоимость лида остались на прежнем уровне, а по тепловым картам и Метрике выросли взаимодействие с интерфейсом и время на сайте.

Где UI вырастает из аналитики: почему мы отказались от синего

Бытовое «UX думает, UI раскрашивает» ломается на первом же продукте, который выходит на рынок впервые. У ReNairo работу, которую взял на себя сервис, раньше делал отдел людей. Главный вывод аналитики: задача не продать, а переобучить - показать, что можно иначе, проще и дешевле. Это чистый UX-вопрос о том, что человек должен понять и в каком порядке. А выросли из него решения, которые выглядят как чистый UI.

• Отказ от «технологичного синего». В нем уже сидели конкуренты. Цвет выбран по итогам разбора рынка, а не по вкусу.
• Реальные скриншоты, дашборды, звонки и тесты вместо абстрактного визуала: доверие важнее эстетики.
• Никаких перегруженных интерфейсов и сложных иллюстраций. Сложное объясняли простым языком: продукт и так требовал усилия на понимание.
• Дизайн-система с правилами и запретами. Клиент дорабатывает продукт сам через вайб-кодинг и не оплачивает команду на мелочи.

Спор был серьезным: основатель сам из стартап-среды и считал, что надо быть похожим на другие стартапы. Наша позиция победила только после показа бренд-платформы целиком. От старта до полного макета прошло от месяца до полутора. За первый месяц набралось около 10 000 просмотров по всем площадкам, на третий-четвертый месяц единовременно пришло 10-20 заявок с сайта, еще через два-три месяца - около 20 заявок с каналов трафика. Сотрудничество продлилось год, дизайн-системой и сайтом клиент пользуется до сих пор.

Почему одна и та же строка стоит и 17 тысяч, и восемь тысяч евро

Разброс цен на разбор существующего продукта - двадцатикратный, и дело не в жадности. Под одним названием продают разные работы. Экспертный проход по сценариям силами специалиста и тестирование с живыми людьми отличаются по трудоемкости в разы, а в предложении обе работы называются одинаково. Подмена второго первым - самая частая причина разочарования заказчика.

Это открытые прайсы конкретных подрядчиков на дату обращения, а не средняя по рынку: отраслевого среза по таким услугам нет. Наши 80 000 ₽ стоят в середине российской вилки. Слово «от» тут работает буквально: внутри вилки цену двигают объем задачи (у нас это множители тарифа 1, 1,2 и 1,4) и срочность - 1,3 к итогу. Нижняя граница означает простой объем в спокойном темпе, а не итоговую сумму.

Как прочитать чужое коммерческое за пять минут

Для этого ничего покупать не нужно. Шесть вопросов, на которые в документе либо есть ответ, либо нет, - и по количеству пропусков видно, сколько работы подрядчик оставил на «разберемся по ходу».

1. Есть ли отдельная строка аналитики или сценариев - или все свернуто в одно слово «дизайн».
2. Назван ли предмет каждого этапа: карта страниц, серые экраны, экраны с состояниями.
3. Написано ли «состояния кнопок, форм и пустых списков» - или только «10 экранов».
4. Сколько кругов правок входит в цену и на каком этапе они закрываются.
5. Кто отвечает за адаптив и под какие разрешения.
6. Есть ли в приемке проверяемые пороги: контраст 4,5:1, размер цели от 24 на 24, LCP не больше 2,5 с.

Если по чек-листу все плохо, а подрядчик уже выбран, спасает договор. Впишите предметы этапов и число кругов правок с указанием этапа, на котором они закрываются. Строчка «правки структуры принимаются до начала верстки» стоит дешевле, чем сорок часов переделки. После этого вопрос, чем UX отличается от UI, перестает быть теоретическим: это две строки, за каждую из которых кто-то отвечает поименно и в срок.