UI и UX дизайн: в чём разница и как это влияет на продажи с сайта

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

UX и UI: за что отвечает каждый

UX (user experience) означает опыт пользователя: путь от входа на сайт до нужного действия и то, насколько этот путь логичен. UI (user interface) означает интерфейс: кнопки, поля, цвета, шрифты, отступы, состояния при наведении. UX-дизайнер решает, что и в каком порядке показать, UI-дизайнер решает, как именно это нарисовать. В небольших командах это один человек, в крупных продуктах две разные роли.

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

Как UX-проблемы съедают конверсию

Три примера, которые повторяются на каждом втором аудите.

Форма на 12 полей. Заявка на консультацию просит имя, фамилию, отчество, телефон, email, город, компанию, должность, бюджет, удобное время, откуда узнали и комментарий. Половину из этого менеджер и так спросит во время звонка. Каждое лишнее поле отсеивает часть людей, и на мобильном этот эффект сильнее. Рабочая форма для первого контакта: имя, телефон или мессенджер, при необходимости один вопрос о задаче.

CTA ниже первого экрана. На главной красивый баннер, под ним преимущества, под ними отзывы, и только потом кнопка «Заказать». Десктопный пользователь ещё долистает, мобильный уйдёт раньше. Кнопка действия должна быть на первом экране, в шапке и повторяться после каждого содержательного блока.

Медленная мобильная версия. Сайт открывается 6 секунд, у товара в каталоге нет кнопки «в корзину» без перехода в карточку, фильтры разворачиваются на весь экран и закрываются с третьей попытки. По нашим наблюдениям, в большинстве ниш мобильный трафик давно преобладает, поэтому каждая секунда и каждый лишний тап там стоят дороже, чем на десктопе.

Вещи проще, но не менее болезненные: нет поиска по каталогу, цена показывается только после регистрации, в форме не видно, какое поле заполнено с ошибкой, кнопка «Назад» ведёт на главную вместо предыдущего шага.

Процесс UX-проектирования: исследование, CJM, прототипы, тесты

1. Исследование. Аналитика (куда заходят, где уходят), записи сессий в Microsoft Clarity или Hotjar, 5-8 интервью с клиентами, разговор с менеджерами по продажам о том, что спрашивают чаще всего. Этого хватает, чтобы увидеть 80% проблем.
2. CJM. Customer journey map, карта пути клиента: этапы от первого поиска до повторной покупки, с мыслями, вопросами и барьерами на каждом. Показывает, чего сайту не хватает до и после самой покупки.
3. Структура и сценарии. Карта страниц и 3-5 ключевых сценариев: найти товар, сравнить, заказать, связаться. Количество шагов в каждом становится измеримым.
4. Вайрфреймы и прототип. Чёрно-белые схемы экранов без дизайна, собранные в кликабельный прототип в Figma. На этом этапе менять логику дёшево.
5. Юзабилити-тесты. 5 человек из целевой аудитории выполняют задания на прототипе вслух. По классическому наблюдению Nielsen Norman Group, пять участников выявляют большинство проблем интерфейса. Найденное правится до того, как появится дизайн.

UI-дизайн: дизайн-система, доступность, контраст

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

Доступность (accessibility) касается не только людей с нарушениями зрения: контрастный текст читается на солнце с телефона, крупные зоны клика выручают в транспорте, подписи к полям помогают всем. Минимальный контраст по WCAG для обычного текста 4.5:1, для крупного 3:1, проверить можно любым контраст-чекером. Серый текст на белом фоне, модный последние годы, эту планку часто не проходит.

Визуальная иерархия: на экране должно быть одно главное действие, и оно должно быть самым заметным. Две одинаковые кнопки «Купить» и «Узнать больше» рядом делят внимание пополам. Состояния элементов (наведение, нажатие, неактивный, ошибка) прорисовываются в дизайн-системе, иначе разработчик придумает их сам.

Экспресс-аудит за 10 пунктов

Пройдите по списку с телефона, не с рабочего компьютера. Каждое «нет» это потенциальная точка потери клиентов.

1. За 5 секунд на первом экране понятно, что вы продаёте и кому.
2. Кнопка главного действия видна без прокрутки и повторяется дальше по странице.
3. Страница открывается до 3 секунд на мобильном интернете (проверить в PageSpeed Insights).
4. В форме первого контакта не больше 3-4 полей, ошибки подсвечиваются рядом с полем.
5. Телефон в шапке кликабельный, мессенджеры открываются в один тап.
6. Цены или хотя бы порядок цен видны без регистрации и звонка.
7. В каталоге есть поиск, фильтры работают без перезагрузки и не ломаются на мобильном.
8. Текст читается: контраст достаточный, размер не меньше 16px на мобильном, абзацы короткие.
9. Нет элементов, перекрывающих контент: всплывающие окна в первые секунды, чат-виджет поверх кнопки.
10. С любой страницы понятно, где вы и как вернуться: логотип ведёт на главную, есть хлебные крошки, кнопка «Назад» работает как ожидается.

Если «нет» набралось три и больше, есть смысл в полном аудите UI/UX дизайна с записями сессий и приоритизированным списком правок. Отдельно о базовых правилах юзабилити мы писали в статье о юзабилити сайта.

Какие метрики смотреть владельцу

• Конверсия. Доля посетителей, выполнивших целевое действие: заказ, заявку, звонок. Смотреть отдельно для мобильных и десктопа и по источникам трафика. Разница между устройствами в разы почти всегда означает проблемы мобильной версии.
• Глубина просмотра. Сколько страниц за сеанс. Высокая глубина без конверсии часто означает, что люди ищут и не находят.
• Процент отказов и вовлечённые сеансы. В GA4 вместо классических отказов есть engagement rate. Низкая вовлечённость на посадочных страницах из рекламы сигнализирует, что обещание в объявлении не совпадает со страницей.
• Время до действия. Сколько времени проходит от входа до клика по кнопке или отправки формы. Если на простом лендинге это минуты, путь слишком длинный.
• Завершение формы. Сколько людей начали заполнять и сколько отправили. Падение на конкретном поле видно в записях сессий.
• Клики в пустоту. Rage clicks и dead clicks в Clarity: люди нажимают на то, что выглядит как кнопка, но ею не является.

Ошибки, которые повторяются

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

С чего начать

1. Пройдите список из 10 пунктов с телефона и запишите все «нет».
2. Поставьте Microsoft Clarity (бесплатно) и посмотрите 20 записей сессий на ключевой странице.
3. Сократите форму первого контакта до 3-4 полей и поднимите кнопку действия на первый экран.
4. Проверьте контраст текста и кнопок, исправьте то, что ниже 4.5:1.
5. Сравните конверсию мобильных и десктопа за месяц: разница в разы подскажет, с чего начинать большие изменения.