Коротко. «Хороший сайт» и «сайт, который конвертирует» — на практике одно и то же: из десятков правил веб-дизайна на заявки заметно влияют десять — визуальная иерархия, одна главная кнопка на экран, контраст текста не ниже 4,5:1, зоны касания от 44×44 px, форма не длиннее 5-6 полей на первом шаге, загрузка первого экрана быстрее 2,5 секунды, мобильная адаптивность как переработка сценария, сигналы доверия рядом с ценой, единый стиль элементов по сайту и проверка решений на данных, а не на вкус дизайнера. Нарушение любого из первых пяти пунктов обычно даёт измеримую просадку конверсии на 10-30 %.
Правила, которые управляют вниманием на экране
1. Визуальная иерархия: взгляд должен знать, куда смотреть первым
Человек не читает страницу подряд — глаз сначала цепляется за самый крупный или контрастный элемент, потом за следующий по значимости. Если на первом экране заголовок, изображение продукта и кнопка действия одинакового визуального веса, взгляд не знает, с чего начать, и в среднем задерживается на странице дольше, прежде чем принять решение — или уходит раньше. Иерархию строят размером, контрастом и отступами: заголовок крупнее и темнее подписей, кнопка выделена цветом, которого больше нигде на экране нет.
2. Одно главное действие на экран
Если на первом экране одновременно предлагают «Оставить заявку», «Скачать прайс» и «Посмотреть кейсы», внимание пользователя дробится, и по каждому отдельному действию конверсия падает — классический эффект выбора: чем больше равнозначных опций, тем реже человек выбирает хоть одну. Правило простое: одна кнопка визуально выделена как главная, остальные действия существуют, но оформлены слабее — текстовой ссылкой, а не второй яркой кнопкой рядом.
3. Контраст текста: 4,5:1 — порог читаемости, а не рекомендация
Соотношение контраста текста к фону ниже 4,5:1 (стандарт WCAG AA) не только нарушает доступность — такой текст физически медленнее читается и хуже воспринимается на ярком экране смартфона на улице. Серый текст на белом фоне — частая ошибка: дизайнеру он кажется «стильным» на мониторе в тихом офисе, но нечитаем в реальных условиях. Проверить контраст можно бесплатным инструментом за минуту — в панели разработчика браузера или отдельным онлайн-чекером.
Правила, которые решают судьбу мобильного трафика
4. Зона касания от 44×44 px
Больше половины трафика большинства сайтов — мобильный, и кнопки, ссылки, чекбоксы меньше 44×44 px промахиваются пальцем заметно чаще, чем кажется по десктопному макету, где всё кликается мышью с точностью до пикселя. Особенно часто страдают ссылки в футере, мелкие иконки соцсетей и чекбоксы согласия с политикой — их либо не замечают, либо не могут нажать с первого раза, а для формы с обязательным чекбоксом это значит потерянную заявку.
5. Скорость загрузки первого экрана быстрее 2,5 секунды
Скорость — тоже часть дизайна, а не только техническая метрика: тяжёлые несжатые изображения и лишние анимации увеличивают время загрузки, и каждая лишняя секунда до появления контента отсекает часть аудитории. Ориентир — 2,5 секунды до отображения основного контента (LCP); превышение обычно заметно по росту отказов именно на мобильном трафике, где соединение медленнее.
6. Адаптивность — не «уменьшенная десктопная версия»
Адаптивность — это перепроектирование структуры под другой сценарий использования: меньше текста на экран, крупнее кнопки, короче формы, меню скрыто за иконкой. Сайт, который просто сжимается до ширины телефона без пересмотра содержания, технически «адаптивен», но неудобен — тот же объём информации приходится читать со скроллом в 3-4 раза длиннее.
Правила формы и доверия
7. Форма не длиннее 5-6 полей на первом касании
Каждое дополнительное поле формы — точка, где часть пользователей передумывает. Форма из 3 полей (имя, телефон, комментарий) завершается заметно чаще, чем форма из 10-12 полей с адресом, компанией и должностью — даже если вся эта информация действительно нужна для работы. Решение: собирать минимум на первом шаге, а остальное — на следующем шаге после того, как контакт уже получен, или в разговоре с менеджером.
8. Сигналы доверия рядом с ценой, а не в отдельном разделе
Отзывы, кейсы, гарантии, лицензии работают на конверсию сильнее всего именно в момент принятия решения — рядом с кнопкой оплаты или заявки, а не на отдельной странице «Отзывы», куда доходит малая часть посетителей. Если у бизнеса есть доказательство надёжности, его место — на той же странице, где человек решает, платить или нет.
Согласованность и проверка данными
9. Единый стиль элементов по всему сайту
Если кнопка «Заказать» выглядит по-разному на разных страницах — где-то синяя и прямоугольная, где-то зелёная и скруглённая — пользователь каждый раз заново распознаёт интерфейс вместо того, чтобы действовать на автомате. Единый UI-кит — набор кнопок, полей, карточек — не только эстетика, а конкретная экономия внимания пользователя на каждой странице.
10. Проверка решений на данных, а не на мнении дизайнера
Любое из перечисленных правил может не сработать именно на конкретном сайте с конкретной аудиторией — общие принципы задают вероятность, а не гарантию. Проверяется это просто: A/B-тест или хотя бы сравнение метрик до и после изменения в веб-аналитике. Дизайн, который «должен» работать по всем правилам, но не подтверждён данными, — гипотеза, а не факт.
Что нарушается чаще всего и во что это обходится
| Правило | Типичное следствие нарушения |
|---|---|
| Слабая визуальная иерархия | Рост времени принятия решения, рост отказов |
| Несколько равнозначных кнопок | Дробление конверсии между действиями, падение по каждому |
| Контраст текста ниже 4,5:1 | Текст не дочитывают, особенно на ярком экране на улице |
| Форма длиннее 6 полей на старте | Часть пользователей закрывает форму, не дозаполнив |
| Загрузка дольше 2,5 секунды | Рост отказов на мобильном трафике |
Сколько стоит привести сайт в соответствие этим правилам
Точечные правки — контраст, размер кнопок, длина формы — обычно стоят 15 000-40 000 ₽ и занимают 3-5 дней работы, если структура сайта не меняется. Полный пересмотр иерархии и стиля по всему сайту — это уже редизайн, 50 000-150 000 ₽ в зависимости от числа страниц. Разбор поведения в Яндекс.Метрике — вебвизор и карта скроллинга — обычно показывает, на каком экране пользователи теряются, и это почти всегда указывает на конкретное правило из списка, а не требует проверять все десять подряд. Если нужен пересмотр дизайна с нуля, это уже задача для разработки сайта, а не точечных правок.
Частые вопросы
Нужно ли применять все 10 правил сразу на существующем сайте?
Нет, лучше по порядку влияния на деньги: сначала форма и контраст (их правит верстальщик за 1-2 дня и без риска), потом иерархия и скорость (требуют пересмотра макета), в последнюю очередь — согласованность стиля по всему сайту, это самая объёмная и не самая срочная работа.
Можно ли проверить эти правила на своём сайте без дизайнера?
Контраст, размер кнопок и длину формы — да, это займёт 20-30 минут с бесплатными инструментами браузера. Визуальную иерархию и согласованность стиля объективно оценить сложнее без опыта — тут полезен взгляд со стороны, хотя бы коллеги, не видевшего макет раньше.
Правда ли, что определённые цвета продают лучше других?
Нет прямой связи «этот цвет = больше продаж» — конверсия зависит от контраста кнопки с окружением, а не от конкретного оттенка. Красная кнопка на белом фоне и зелёная кнопка на белом фоне работают примерно одинаково, если обе выделяются на общем фоне страницы.
Чем «хороший дизайн» отличается от «дизайна, который конвертирует»?
Формально ничем — если дизайн действительно хорош для бизнес-сайта, он одновременно понятен, быстр и подталкивает к действию. «Красиво, но не работает» обычно означает, что нарушено одно из первых пяти правил из списка, просто это не всегда заметно на глаз без данных аналитики.
Как понять, какое из правил нарушено именно на моём сайте?
Разбор поведения в Яндекс.Метрике — вебвизор и карта скроллинга — показывает, на каком экране пользователи теряются, и это почти всегда указывает на конкретное правило из списка выше.
Проверить, какие из этих правил нарушены на вашем сайте
Покажем на данных из аналитики, какие конкретные элементы интерфейса стоит поправить в первую очередь.