Баннер на сайте: когда он помогает продажам, а когда мешает

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

Что такое баннер на сайте

Баннером на сайте называют заметный графический блок с коротким текстом и призывом к действию. Под одним словом скрываются четыре разных вещи, и правила для них разные.

• Главный баннер первого экрана — крупный блок вверху главной или посадочной страницы с предложением компании и кнопкой.
• Промо-баннер — блок об акции, новой услуге или распродаже внутри страницы или в каталоге.
• Всплывающий баннер — окно, которое появляется поверх страницы: подписка, скидка, напоминание.
• Рекламный баннер — блок чужого рекламодателя или рекламной сети на вашем сайте.

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

Баннер работает, когда показывает одно предложение под задачу посетителя и выглядит частью страницы.

Почему посетители не замечают баннеры?

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

NN/g называет три признака, по которым блок записывают в рекламу: привычное рекламное место — верх страницы или правая колонка; рекламное оформление, например анимация; соседство с настоящей рекламой. Содержимое в той же части экрана, что и реклама, часто принимают за рекламу и пропускают вместе с ней.

Это не временная мода. По данным NN/g, баннерную слепоту фиксируют уже на протяжении трёх десятилетий — от первых тестов до исследований с отслеживанием взгляда. Люди приходят на сайт с задачей, и всё, что не похоже на ответ, мозг отсеивает автоматически.

Факт. Nielsen Norman Group фиксирует баннерную слепоту на протяжении трёх десятилетий: посетители пропускают всё, что похоже на рекламу.

Когда баннер помогает продажам?

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

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

Третье — текст важнее картинки. Заголовок с конкретным предложением, одна строка пояснения и кнопка с понятным действием: «Рассчитать стоимость», «Записаться на замер». Если смысл баннера можно понять только по фотографии, его поймут не все.

Из каких блоков, кроме баннера, складывается продающая страница, разобрано в статье из каких блоков собирают лендинги.

Мнение. Если баннер про акцию не связан с тем, что человек ищет на странице, уберите его отсюда в каталог или на страницу акций. Неуместный баннер не продаёт, а учит посетителя пропускать этот участок страницы.

Слайдер на первом экране: почему автопрокрутка вредит

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

Вывод NN/g однозначный: аккордеоны и карусели должны показывать новую панель только по запросу посетителя. Автопрокрутка создаёт несколько проблем сразу:

• Меньше времени на чтение — человек не успевает дочитать панель до того, как она сменится.
• Хуже доступность — движущиеся элементы обычно снижают доступность, особенно для тех, кому трудно быстро попасть курсором.
• Каждое предложение видно реже — в разобранном NN/g слайдере скидка была видна только 20 % времени.
• Похоже на рекламу — движущийся блок посетители автоматически принимают за рекламу.

Руководство по доступности WCAG добавляет формальное требование: если движение начинается само, длится дольше 5 секунд и идёт параллельно с другим содержимым, у посетителя должна быть возможность его остановить, поставить на паузу или скрыть.

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

Всплывающие баннеры: когда окно мешает

Всплывающий баннер перекрывает страницу и заставляет посетителя сначала разобраться с окном. Google в документации для владельцев сайтов предупреждает: навязчивые всплывающие окна мешают поисковым системам понять содержимое страницы, а посетители, которым неудобно, вряд ли вернутся.

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

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

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

Небольшая плашка, которую легко закрыть, мешает меньше, чем окно на весь экран, и не прячет страницу от поиска.

Как баннер влияет на загрузку страницы

Главный баннер первого экрана часто оказывается самым крупным элементом страницы, и от того, как быстро он появится, зависит впечатление о скорости сайта. Руководство web.dev по ускорению отрисовки первого экрана даёт два прямых правила.

Первое: картинку, которая станет крупнейшим элементом первого экрана, нельзя загружать лениво. Атрибут loading="lazy" откладывает загрузку до момента, когда браузер убедится, что картинка видна, и главный баннер появляется позже, чем мог бы.

Второе: на такую картинку ставят атрибут fetchpriority="high", если она, скорее всего, станет крупнейшим элементом первого экрана. Так браузер начнёт загружать её раньше остальных изображений.

Кроме этого, баннер стоит сохранять в современном формате и в размере, близком к тому, в котором его показывают. Слайдер из пяти тяжёлых фотографий загружает их все, хотя посетитель увидит одну. Подробнее о метриках скорости — в статье как пройти Core Web Vitals.

Что закон требует от рекламного баннера на сайте?

Если на сайте стоит рекламный баннер чужого рекламодателя, закон о рекламе (38-ФЗ, статья 18.1) предъявляет к нему конкретные требования. Реклама в интернете должна содержать пометку «реклама» и указание на рекламодателя или на страницу с информацией о нём.

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

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

С точки зрения дизайна у чужой рекламы есть цена. Nielsen Norman Group советует не смешивать содержимое и рекламу в одном визуальном блоке: соседство с рекламой заставляет посетителей пропускать и ваш полезный блок. Рекламный баннер ставят отдельно от ваших предложений и кнопок заявки.

Как сделать баннер, который читают

Баннер читают, когда он отвечает на задачу посетителя и не маскируется под рекламу. Перед запуском пройдитесь по короткому списку.

Что делать дальше

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

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

Первый экран с баннером мы проектируем вместе со структурой страницы, когда делаем лендинг или страницу услуги. Оставьте заявку — начнём с того, какое предложение посетитель должен увидеть первым.

Источники

• Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop — Nielsen Norman Group
• Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility — Nielsen Norman Group
• Understanding SC 2.2.2 Pause, Stop, Hide — W3C
• Avoid intrusive interstitials and dialogs — Google Search Central
• Optimize Largest Contentful Paint — web.dev
• Федеральный закон № 38-ФЗ «О рекламе», статья 18.1 — КонсультантПлюс