Сайт не «нравится» или «не нравится» — он либо ведёт человека к действию, либо мешает ему. Между этими состояниями лежит не вкус дизайнера, а набор вполне конкретных решений: где стоит цена, сколько полей в форме, в каком порядке идут блоки, какое возражение снято до того, как человек успел его сформулировать. Это и есть поведенческий дизайн. Я в SEO с 2005 года и много раз наблюдал, как перестановка двух блоков давала больше обращений, чем месяц работы над позициями.
Что такое поведенческий дизайн и чем он не является
Поведенческий дизайн — это проектирование интерфейса под то, как люди на самом деле принимают решения: быстро, поверхностно, с оглядкой на риск и почти всегда в состоянии «мне некогда разбираться». Задача — убрать препятствия между намерением и действием и добавить опоры там, где человек колеблется.
Чем это не является. Это не манипуляция и не тёмные шаблоны вроде спрятанной кнопки отказа или таймера, который перезапускается при обновлении страницы. Такие приёмы дают краткосрочный рост конверсии и долгосрочный рост возвратов, жалоб и отказов от повторных покупок. И это не «сделать красиво»: эстетика влияет на доверие, но сама по себе не приводит к действию.
Первый экран: что человек должен понять за несколько секунд
Посетитель приходит с конкретным вопросом и проверяет, есть ли на странице ответ. Если за первые секунды он не находит подтверждения, что попал по адресу, он возвращается в выдачу. Значит, на первом экране должны быть четыре вещи: что здесь предлагают, для кого, на каких условиях и что сделать дальше.
| Элемент первого экрана | Рабочий вариант | Нерабочий вариант |
|---|---|---|
| Заголовок | Конкретная услуга и объект: «Замена рулевой рейки на легковых автомобилях» | «Качество, проверенное временем» |
| Условия | Вилка цены, срок, гарантия | «Индивидуальный подход к каждому клиенту» |
| Доказательство | Число выполненных работ, срок работы компании, конкретный факт | Стоковая фотография улыбающихся людей |
| Действие | Одна заметная кнопка с понятным глаголом | Четыре кнопки одного размера с разными действиями |
Отдельно про телефон: на мобильных он должен быть виден в первом экране и работать по нажатию. Для услуг с высоким чеком доля звонков остаётся большой, а спрятанный в подвал номер — это потерянные обращения.
Цена и кнопка: где их место
Отсутствие цены — самая дорогая ошибка на сайтах услуг. Логика владельца понятна: «цена зависит от объёма, пусть позвонят и уточнят». Логика посетителя другая: он открыл пять вкладок, на трёх есть хотя бы вилка, на двух нет — эти две он закрывает первыми. Цена не обязана быть точной. «От 12 000 рублей», «расчёт по площади, средний проект укладывается в такой-то диапазон», таблица тарифов — любой ориентир лучше молчания.
Кнопка действия работает, когда стоит сразу после аргумента, а не в конце страницы. Человек принимает решение не в одной точке, а по мере чтения: у кого-то после цены, у кого-то после отзывов, у кого-то после блока с примерами работ. Поэтому кнопка повторяется через каждые один-два смысловых блока — одна и та же по формулировке, а не пять разных призывов. Текст на кнопке описывает результат для посетителя: «Рассчитать стоимость» вместо «Отправить».
Порядок блоков как сценарий
Страница — это не набор секций, а последовательность ответов на вопросы, возникающие в голове читателя по порядку. Сначала «туда ли я попал», потом «сколько стоит», потом «а вы вообще умеете», потом «что если что-то пойдёт не так», и только потом «как заказать».
| Вопрос посетителя | Блок, который на него отвечает | Типичная ошибка |
|---|---|---|
| Туда ли я попал? | Заголовок и краткое описание услуги | Начинать с истории компании |
| Сколько это стоит? | Цены или калькулятор | Прятать цены за формой |
| Вы это умеете? | Примеры работ, сертификаты, число проектов | Общие слова про опыт без подтверждения |
| Что входит и как проходит? | Этапы работы, состав услуги | Перечень из десяти шагов с канцеляритом |
| А если не подойдёт? | Гарантия, условия возврата, ответы на возражения | Умолчание, которое читается как риск |
| Как заказать? | Короткая форма и телефон | Форма из восьми полей в самом низу |
Формы: длина, поля и момент показа
Каждое лишнее поле — это причина закрыть вкладку. Зависимость почти линейная: чем больше полей, тем меньше отправок. При этом качество обращений от сокращения формы падает не так сильно, как принято думать: недостающие данные всё равно уточняются в разговоре.
- Минимум полей. Для первого контакта достаточно имени и способа связи. Всё остальное — на следующем шаге.
- Понятная цель. Заголовок формы говорит, что произойдёт после отправки: «Пришлём расчёт в течение дня».
- Один способ связи на выбор. Не заставляйте вводить и телефон, и почту, если реально пользуетесь одним.
- Подсказки об ошибках сразу. Не после отправки, а по мере заполнения поля.
- Видимая политика данных. Одна строка снимает часть тревоги, но не должна перекрывать кнопку.
- Подтверждение отправки. Человек должен увидеть, что заявка ушла, и понимать, когда ждать ответ.
Момент показа тоже важен. Всплывающее окно на третьей секунде после захода раздражает и портит поведенческие показатели. То же окно, показанное после прокрутки половины страницы или при уходе курсора к закрытию вкладки, работает заметно лучше.
Снятие возражений
Возражения у аудитории конечны, их обычно пять-семь, и они известны отделу продаж наизусть. «Дорого», «долго», «а вдруг сломаете», «работаете ли с моим случаем», «нужна ли предоплата». Каждое из них должно быть закрыто на странице до того, как человек дойдёт до формы, — текстом, таблицей, примером или блоком вопросов и ответов.
Самый быстрый способ собрать их — послушать записи звонков за неделю и выписать повторяющиеся вопросы. Это даёт больше пользы, чем изучение чужих сайтов: там возражения тоже угаданы, а не собраны.
Практический разбор: страница услуги
Разберу типичную ситуацию. Страница услуги: большой баннер с абстрактной фразой, дальше три абзаца о компании, потом преимущества иконками, ниже форма из шести полей, цен нет. Трафик идёт, обращений почти нет. Что делаю по порядку.
Первым делом смотрю карту прокрутки и записи сессий: где люди останавливаются и где уходят. Обычно выясняется, что до формы доходит малая часть, а основная масса покидает страницу на блоке о компании. Дальше переношу условия и вилку цен в первый экран, заменяю абстрактный заголовок конкретным, сокращаю форму до двух полей и добавляю кнопку после блока с ценами. Блок о компании убираю вниз — он нужен, но не первым. Возражения из звонков превращаю в раздел вопросов.
Такая доработка сайта занимает несколько дней и не требует переделки шаблона. Эффект проявляется на том же трафике, что и раньше, — именно поэтому изменения интерфейса окупаются быстрее, чем привлечение новых посетителей.
Как проверять гипотезы на данных
Любое утверждение о поведении посетителей проверяемо, и полагаться на вкус здесь не нужно. Набор инструментов простой.
| Инструмент | Что показывает | Какое решение помогает принять |
|---|---|---|
| Цели в аналитике | Долю посещений с обращением по страницам | Какие страницы чинить в первую очередь |
| Карта прокрутки | До какого блока доходят посетители | Что поднять выше, а что убрать |
| Карта кликов | Куда нажимают, включая некликабельные элементы | Что люди принимают за кнопку |
| Записи сессий | Реальный путь и места заминок | Где интерфейс непонятен |
| Аналитика форм | На каком поле бросают заполнение | Какое поле убрать или упростить |
| Сравнение вариантов | Какая версия страницы даёт больше действий | Оставить изменение или откатить |
Правило проверки: одна гипотеза — одно изменение. Если поменять одновременно заголовок, форму и порядок блоков, вы получите результат, но не поймёте его причину. И второе правило: гипотеза формулируется заранее, вместе с ожидаемым эффектом. «Перенесём цену в первый экран, ожидаем рост доли обращений» — это гипотеза, «переделаем страницу, посмотрим что будет» — нет.
Быстрее всего гипотезы проверяются на платном трафике: контекстная реклама даёт управляемый и однородный поток, поэтому разница между вариантами видна за дни, а не за месяцы.
Чего делать не стоит
- Копировать интерфейс лидера рынка. У него другая аудитория, другой уровень известности и, возможно, тоже непроверенные решения.
- Ставить несколько равнозначных кнопок рядом. Выбор из четырёх действий парализует, действие остаётся одно — уход.
- Использовать тёмные приёмы. Фальшивый дефицит, скрытая отписка, предвыбранные галочки платных опций дают отложенный ущерб репутации.
- Судить по маленькой выборке. Разница на трёх десятках посещений — это случайность, а не результат.
- Оценивать изменения по времени на странице. Долго читают и когда интересно, и когда не могут разобраться.
- Делать первый экран красивой картинкой без содержания. Экран крутят вниз только те, кто уже понял, зачем.
Частые вопросы
Сколько посещений нужно, чтобы сравнение вариантов было надёжным? Зависит от исходной конверсии и величины эффекта. Практический ориентир — несколько десятков целевых действий на каждый вариант; при меньших числах результат нестабилен.
Правда ли, что кнопку нужно делать заметного контрастного цвета? Важен не конкретный цвет, а контраст с окружением и отсутствие рядом элементов той же яркости. Если на странице всё яркое, кнопка теряется в любом цвете.
Всплывающие окна вредят позициям? Вредят те, что перекрывают содержимое сразу после захода, особенно на мобильных. Отложенные и ненавязчивые обычно проблем не создают.
Стоит ли показывать цену, если она выше рыночной? Да, вместе с обоснованием. Скрытая цена отсекает и тех, кто готов платить, а озвученная сразу отсеивает нецелевые обращения и экономит время отдела продаж.
С чего начать, если ресурсов на большие переделки нет? С трёх шагов: цена и условия в первый экран, форма до двух полей, блок ответов на реальные возражения. Это самая дешёвая часть работы с наибольшей отдачей. Если непонятно, что именно тормозит конкретную страницу, разберём её на SEO-консультации по данным вашей аналитики.
Чеклист поведенческого дизайна
- В первом экране понятно, что предлагают, кому и на каких условиях.
- Указана цена или её вилка, ориентир доступен без формы.
- Кнопка действия повторяется после ключевых блоков и имеет один и тот же текст.
- Порядок блоков соответствует порядку вопросов посетителя.
- Форма содержит минимум полей, ошибки показываются по ходу заполнения.
- После отправки есть понятное подтверждение и срок ответа.
- Основные возражения собраны из реальных разговоров и закрыты на странице.
- Телефон виден и нажимается на мобильных.
- Настроены цели, карты прокрутки и кликов, записи сессий.
- Изменения вносятся по одному, с заранее сформулированной гипотезой.
Поведенческий дизайн — это дисциплина наблюдения, а не набор универсальных рецептов. Смотрите, где люди спотыкаются, устраняйте препятствие, проверяйте результат по цифрам. На одном и том же трафике так можно получить кратный рост обращений, не вложив ни рубля в его привлечение.
Если нужно вывод сайта в ТОП Яндекса — помогу вывести сайт в топ Яндекса и удержать позиции.
Увеличьте позиции и продажи вашего сайта
Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:
Остались вопросы по продвижению?
Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.
Связаться со мной →
Старт 
Стандарт 
Премиум 
