UX и UI постоянно ставят рядом и часто путают. Разница простая: UX — про то, понятно ли человеку, UI — про то, как это выглядит. Проблема в том, что заказчик почти всегда видит только второе, а на заявки сильнее влияет первое.
Аналогия, которая всё объясняет
Представьте кафе. UX — это планировка: где вход, видно ли меню от двери, нужно ли обходить колонну, чтобы дойти до кассы, понятно ли, где забирать заказ. UI — это интерьер: свет, мебель, шрифт на меню, посуда, музыка.
Красивое кафе с ужасной планировкой раздражает. Удобное кафе без атмосферы работает, но его не запоминают и не рекомендуют. Сайт устроен ровно так же.
Что относится к UX
- Структура сайта: какие страницы есть и как они связаны.
- Порядок блоков: что человек видит первым, вторым, третьим.
- Логика пути: как посетитель доходит от «случайно зашёл» до «оставил заявку».
- Формулировки: понятно ли из заголовка, чем вы занимаетесь.
- Формы: сколько полей, что обязательно, что происходит после отправки.
- Снятие возражений: цены, сроки, гарантии, примеры, отзывы.
Что относится к UI
- Типографика: шрифты, размеры, межстрочные расстояния, иерархия заголовков.
- Цвет: основная палитра, акценты, контраст, доступность.
- Сетка и отступы: ритм страницы, воздух между блоками.
- Компоненты: кнопки, карточки, поля, теги, иконки и их состояния.
- Изображения и графика: стиль фотографий, иллюстраций, инфографики.
- Микроанимации: как элементы реагируют на наведение и прокрутку.
Сравнение в таблице
| UX | UI | |
|---|---|---|
| Отвечает на вопрос | Понятно и удобно? | Красиво и уместно? |
| Материал работы | Структура, сценарии, смыслы | Цвет, шрифт, сетка, компоненты |
| Результат этапа | Прототип без визуала | Готовые макеты страниц |
| Если сделано плохо | Человек не понимает и уходит | Человек не доверяет и уходит |
| Когда делается | Сначала | После согласования логики |
Что бывает, когда есть только UI
Самый частый случай. Сайт выглядит дорого, анимации плавные, фотографии хорошие — но заявок нет. Обычно причины такие:
- На первом экране красивая фраза вместо ответа «что здесь продают».
- Цен нет вообще, а человек не готов писать, чтобы их узнать.
- Кнопка «оставить заявку» одна и она в самом низу.
- Форма из восьми полей, включая «должность» и «сфера деятельности».
- На телефоне текст на первом экране не читается, потому что макет делали для широкого монитора.
Что бывает, когда есть только UX
Обратная ситуация встречается реже, но тоже болезненно. Структура логичная, всё на месте, но сайт выглядит как черновик: системные шрифты, серые блоки, случайные отступы. В нише, где решение принимают по картинке — дизайн, косметика, услуги для дома, ресторан — это прямая потеря доверия. Человек делает вывод «если у них такой сайт, то и работа такая же».
Практический вывод. Если сайт не приносит заявок, начинать нужно не с перерисовки, а с проверки структуры и текстов первого экрана. Перекрасить кнопку дешевле, но чаще всего бесполезно.
Как это устроено в работе
В kri·studio порядок всегда один: сначала бриф и структура, потом прототип, и только после согласования — визуальная концепция. Так дорогие правки случаются на этапе, где переставить блок стоит десять минут, а не после отрисовки двадцати экранов.
Полный состав этапов разобран в статье «Что входит в дизайн сайта под ключ», а стартовые цены — на странице дизайна сайта.
Частые вопросы
UX отвечает за логику: понятно ли человеку, куда он попал, что предлагают и как совершить действие. UI — за визуальную оболочку: типографику, цвета, кнопки, сетку и ощущение бренда.
Оба слоя обязательны, но порядок имеет значение: сначала логика, потом визуал. Красивый сайт без UX путает, логичный без UI выглядит слабее конкурентов.
Да, если структура и прототип уже согласованы. Но если сайт не даёт заявок, проблема обычно в структуре и смыслах — одна перерисовка визуала результат не изменит.