Поведенческий дизайн сайта

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

В SEO я с 2005 года и вижу одну и ту же картину на консультациях: владелец показывает сайт на большом мониторе, гордится анимацией, а девять из десяти его посетителей приходят с телефона, где первое, что они видят, — фотография на весь экран и лозунг без единой цифры. Цена, срок и телефон живут на третьем экране, куда доходит меньшинство. Это не вопрос вкуса, это измеримая потеря.

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

Никто не читает страницу подряд. Человек сканирует: выхватывает опорные точки, по ним решает, туда ли он попал, и либо остаётся, либо возвращается в выдачу. На всё решение уходят секунды, и в эти секунды он видит не текст, а несколько крупных элементов.

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

За что цепляется взгляд при сканировании и что из этого следует для страницы:

Что притягивает взгляд	Что туда нужно поместить	Типовая ошибка
Заголовок и подзаголовки	Суть предложения и названия разделов по смыслу	Подзаголовки вида «Наши преимущества»
Цифры, особенно цены и сроки	Стоимость, срок работ, гарантию	Цена спрятана в тексте или «по запросу»
Выделенные слова	Два-четыре действительно важных факта	Жирным помечена половина текста
Кнопки контрастного цвета	Одно главное действие	Пять равнозначных кнопок разных цветов
Списки и таблицы	Состав услуги, комплектации, сравнения	Перечисление внутри длинного абзаца
Изображения с людьми и предметами	Реальные фотографии процесса и результата	Стоковые снимки без отношения к делу

Практическое следствие: всё содержательное должно жить в сканируемых элементах — в подзаголовках, цифрах, списках. То, что осталось в середине длинного абзаца, большинство посетителей не увидит вообще, каким бы точным оно ни было. Это же объясняет, почему длинные абзацы на телефоне работают хуже коротких: абзац из десяти строк занимает целый экран, и глазу не за что зацепиться, чтобы решить, читать дальше или нет.

Что обязано быть в первом экране

Первый экран отвечает на один вопрос человека: «я туда попал?» Если ответа нет за пару секунд, посетитель возвращается в выдачу, и этот возврат виден системе.

• Заголовок, совпадающий с запросом. Человек искал «замена радиатора отопления» — он должен увидеть эти слова, а не «Мы делаем вашу жизнь теплее».
• Главное предложение. Что вы делаете и для кого, одной строкой без прилагательных.
• Цена или ориентир по ней. «От» с указанием, за что именно, или диапазон, или хотя бы стоимость выезда.
• Способ связаться. Телефон кликабельный и контрастный, кнопка заявки заметная.
• Подтверждение реальности. Город, адрес, имя человека, с которым будут говорить.

Всё перечисленное должно помещаться на экран телефона до первого движения пальцем. Проверка занимает минуту: откройте свою страницу на смартфоне и посмотрите, что видно без прокрутки. Чаще всего видно шапку, большую картинку и часть лозунга — то есть ничего из списка выше.

Пять правил, которые работают всегда

Одно главное действие на экран

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

Ответ раньше уговоров

Пока человек не получил ответ на свой вопрос, любые преимущества, гарантии и рассказы о компании он пролистывает — они для него шум. Рабочий порядок на странице: ответ, затем доказательство, затем предложение. Блок «О нас» с историей основания в самом верху — самая распространённая перестановка этого порядка наоборот.

Смежный материал по теме — «Простой дизайн сайта и его влияние на SEO».

Меньше полей — больше заявок

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

Предсказуемость важнее оригинальности

Логотип слева ведёт на главную, корзина справа сверху, меню сверху или под кнопкой с тремя полосками, телефон в шапке. Эти соглашения человек выучил на сотнях чужих сайтов, и он ими пользуется не думая. Нестандартное расположение требует от него усилий, которые он тратить не готов: закрыть вкладку проще, чем разбираться в чужой находке.

Обратная связь на каждое действие

Помогу с продвижением: SEO-специалист Анатолий Кузнецов — вывожу сайты в топ Яндекса белыми методами.

Нажал кнопку — что-то произошло: подсветка, изменение, переход. Отправил форму — видно подтверждение, а не просто исчезнувшие поля. Тишина после действия воспринимается как поломка, и человек либо отправляет форму пять раз подряд, либо уходит, решив, что сайт сломан. Отдельная разновидность той же ошибки — сообщение об успешной отправке, которое появляется ниже кнопки, за пределами видимой части экрана.

О поведении людей на сайте и о том, чем оборачивается его подделка:

6:08

Что чаще всего ломает поведение

Список ниже собран из того, что регулярно обнаруживается в записях визитов. Каждый пункт — не теория, а наблюдаемое действие человека, после которого визит заканчивается.

Приём на сайте	Что делает человек	Чем заменить
Всплывающее окно через три секунды	Возвращается в выдачу, не читая	Показ по намерению уйти или после прокрутки половины страницы
Автозапуск видео со звуком	Закрывает вкладку мгновенно	Видео по нажатию, без звука по умолчанию
Цена «по запросу»	Уходит к конкуренту, где цена есть	Диапазон, «от» с условием, калькулятор
Сдвиг вёрстки при загрузке	Промахивается по кнопкам, раздражается	Заданные размеры изображений и блоков
Виджет чата поверх кнопки заказа	Не может нажать физически	Сдвиг виджета на мобильных или отключение
Мелкий серый текст	Не читает, уходит быстрее	Шрифт от 16 пикселей, контрастный цвет
Обязательная регистрация до просмотра	Закрывает страницу на первом шаге	Доступ к информации сразу, регистрация при заказе

Общее у всех строк: сайт что-то требует от человека раньше, чем даёт ему то, за чем он пришёл. Внимание посетителя — ограниченный ресурс, и каждое требование тратит его часть. Пока баланс в пользу человека, он идёт дальше; как только он чувствует, что с ним торгуются, он уходит — и уходит именно обратно в выдачу, к конкуренту.

Почему красивый сайт перестаёт продавать

Разберу типовую механику, потому что она повторяется от проекта к проекту почти дословно. Компания заказывает редизайн: современная типографика, крупные фотографии, плавная анимация при прокрутке. Сайт действительно выглядит лучше прежнего. Через месяц заявок становится заметно меньше, и начинается спор, в котором дизайнер защищает работу, а владелец не может объяснить, что именно не так.

Если нужны детали, смотрите «Влияние поведенческих факторов на ранжирование сайта».

Разбор почти всегда обнаруживает одни и те же четыре решения:

• Цена уехала вниз. Сверху разместили большое изображение с лозунгом, и всё содержательное сдвинулось на второй-третий экран.
• Телефон стал светло-серым. Формулировка на согласовании обычно звучит как «чтобы не мешал композиции».
• Кнопка потеряла контраст. Заливку заменили тонкой рамкой — так аккуратнее, но кнопка перестала читаться как кнопка.
• Анимация задержала текст. Каждый блок появляется с задержкой в доли секунды при прокрутке; на быстром пролистывании человек видит пустые экраны.

Ни одно из этих решений не является ошибкой дизайнера в его системе координат. Все четыре улучшают композицию. И все четыре отбирают у страницы именно те элементы, за которые цепляется взгляд: цифру, контакт, кнопку, текст. Лечится это возвратом опорных точек на место, а не отменой редизайна: цена в первый экран, телефону контраст и кликабельность, кнопке заливка, анимация отключается на мобильных.

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

Как проверять решения данными, а не вкусами

Спор о вкусах не имеет решения, потому что у сторон нет общего критерия. Данные его дают. Инструменты для этого бесплатные и уже стоят на большинстве сайтов — вопрос только в том, чтобы открыть их с конкретным вопросом.

Инструмент	Что показывает	Что искать в первую очередь
Записи визитов	Реальный путь человека по странице	Где останавливается, что перечитывает, где уходит
Карта прокрутки	До какого места доходят посетители	Форма или цена ниже точки, куда доходит пятая часть
Карта кликов	Куда нажимают, включая некликабельное	Нажатия по картинкам и заголовкам — признак нехватки
Отчёт по устройствам	Разницу поведения телефон и компьютер	Провал конверсии на мобильных при том же трафике
Отчёт по времени на странице	Сколько человек держится до ухода	Массовые уходы в первые пятнадцать секунд

Порядок работы простой. Возьмите страницу с наибольшим трафиком, посмотрите десять записей визитов подряд и выпишите то, что увидели, а не то, что подумали. Дальше исправляйте по одному элементу за раз и сверяйтесь с числом обращений. Менять пять вещей одновременно бессмысленно: при росте вы не узнаете, что сработало, при падении — что откатывать.

Если нужна помощь по теме — доработка сайта.

Отдельно про сравнительные тесты. При достаточном трафике они полезны, но у большинства небольших сайтов его нет: при двухстах визитах в месяц любая разница попадает в статистическую погрешность, и вывод будет случайным. В такой ситуации честнее последовательные изменения с оценкой по кварталу, а не имитация научного подхода на десяти заявках.

Связь поведения с позициями в выдаче

Всё перечисленное — не отдельная задача «про конверсию», параллельная продвижению. Человек, который нашёл ответ и не вернулся в выдачу, — положительный сигнал для поисковой системы. Человек, который открыл страницу, увидел лозунг вместо цены и через шесть секунд нажал «назад», чтобы открыть следующий результат, — сигнал отрицательный. Систему не интересует, красивая была страница или нет; её интересует, закрыл ли посетитель свою задачу.

Подробнее об этом — в статье «Как повысить конверсию сайта».

Отсюда практический вывод для организации работы: разделять поведенческий дизайн и продвижение между разными подрядчиками — способ получить конфликт вместо результата. Тот, кто отвечает за позиции, не управляет страницей; тот, кто управляет страницей, не отвечает за позиции. В итоге оптимизатор просит добавить текст, дизайнер просит убрать текст, и оба формально правы.

Есть и обратная сторона, о которой стоит сказать прямо. Работа над реальным поведением людей и накрутка поведенческих факторов — противоположные вещи, хотя слова похожи. Первое меняет страницу так, чтобы человек получил ответ. Второе имитирует людей, которых нет. Первое накапливается, второе распознаётся и заканчивается санкцией.

Чек-лист: двадцать минут на страницу

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

1. Ответ на запрос виден в первом экране без прокрутки.
2. Цена или ориентир по ней указаны на странице.
3. Телефон кликабельный, контрастный, нажимается пальцем без промаха.
4. Главное действие одно и визуально сильнее остальных.
5. В форме не больше двух-трёх полей.
6. Нет всплывающих окон на входе и автозапуска звука.
7. Страница показывает содержимое быстрее двух секунд.
8. Вёрстка не сдвигается во время загрузки.
9. Ничто не перекрывает кнопки: ни чат, ни баннер, ни плашка о файлах cookie.
10. После отправки формы человек видит подтверждение в зоне видимости.
11. Подзаголовки информативные: по ним понятен смысл страницы за десять секунд.
12. Текст читается при ярком свете: шрифт от 16 пикселей, контраст достаточный.

Двенадцать пунктов, проверка на двадцать минут. Если хотя бы четыре из них не выполняются, заниматься тонкой настройкой оформления рано — сначала закрываются эти.

Частые вопросы

С чего начать, если сайт уже сделан и переделывать его не на что? С записей визитов. Десять просмотров на главной посадочной странице занимают вечер и дают список конкретных задач, большая часть которых правится в шаблоне за час. Полная переделка почти никогда не нужна: потери обычно сидят в трёх-четырёх элементах.

Нужен ли сравнительный тест перед каждым изменением? При достаточном трафике — полезен. При двух сотнях визитов в месяц выводы будут случайными: разница в две заявки не значит ничего. Тогда работают последовательные изменения и оценка по более длинному периоду.

Можно ли доверять советам из статей про конверсию, включая эту? Как гипотезам — да, как истине — нет. Любой совет проверяется на своих данных, потому что аудитория, ниша и устройство спроса у всех разные. Универсальны только вещи вроде кликабельного телефона и отсутствия автозвука.

Что важнее: оформление или скорость загрузки? Скорость. Красивую страницу, которая показывается пять секунд, значительная часть людей просто не увидит — они уйдут раньше. Работа над оформлением на медленном сайте — это доводка того, что не успевает появиться на экране.

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

Насколько сильно поведение на телефоне отличается от компьютера? Настолько, что это фактически два разных сайта. Глубина просмотра ниже, терпение меньше, попадание пальцем грубее, чтение при внешнем свете хуже. Проверять решения нужно на телефоне, а согласовывать макеты на большом мониторе — самая частая причина расхождения ожиданий с результатом.

Коротко

• Люди не читают страницу, а сканируют её по опорным точкам: заголовкам, цифрам, кнопкам, спискам — всё содержательное должно жить именно там.
• Первый экран отвечает на вопрос «я туда попал?»: запрос в заголовке, предложение, цена или ориентир, контакт, подтверждение реальности.
• Порядок на странице — ответ, доказательство, предложение; блок о компании в самом верху переворачивает этот порядок наоборот.
• Каждое лишнее поле формы и каждое требование раньше ответа сокращают число обращений: всплывающие окна на входе и автозвук — самый быстрый способ потерять визит.
• Красивый сайт перестаёт продавать в одном случае — когда композиция забирает опорные точки: цену, телефон, контраст кнопки, скорость появления текста.
• Записи визитов и карты прокрутки заменяют спор о вкусах фактами, а работа над реальным поведением одновременно является работой над позициями — в отличие от накрутки, которая заканчивается санкцией.

Если заявок стало меньше после переделки сайта или вы не понимаете, где теряете посетителей между переходом из поиска и звонком, приходите на SEO-консультацию — посмотрим записи визитов и статистику вместе и разберём, какие именно элементы страницы тормозят людей.