Автор: Мария Кокухина, эксперт по юзабилити
Книга Марии Кокухиной

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

Разработать баннер (CTR от 8% и выше)

Как сделать баннер

Принцип ОДП для баннеров

Все баннеры должны быть составлены по принципу ОДП:

  • «O», или оффер. Конкретное предложение для вашего клиента. Укажите в баннере — какую выгоду, пользу несет ваш продукт.
  • «Д», или дедлайн. Ограничение вашей акции (по времени, по количеству или по цене)
  • «П», или призыв к действию (купить, подробнее и т.д.)

Запомните: хороший баннер содержит столько информации, сколько достаточно для клика.

Рассмотрим поподробнее 3 варианта дедлайна:

1. Ограничение по времени

Часто используемый вариант в баннере — ограничение спецпредложения. Суть в том, что вы предлагаете вкусные условия, которое действуют до такого-то числа. А еще лучше указать в баннере, что акция действует 24 часа или 3-4 дня. Чем меньше времени у посетителей на раздумья, тем больше кликов на ваш баннер.

2. Изменение цены

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

3. Ограничение по количеству

Нужно показать клиенту, что товар заканчивается. Например, укажите в баннере — «Осталось всего 17 экземпляров». Для большего эффекта — 5 из 17 уже забронированы. Все это вынуждает покупателя поторопиться с решением.

2-3 баннера в слайдере

Не нужно создавать большое количество баннеров. Это бессмысленно, поскольку пользователи проводят не так много времени на главной, чтобы успеть просмотреть все ваши акции. Как правило, основное внимание будут получать первые 2-3 баннера.

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

Но если же вы хотите разместить 2-3 баннера, то следует учитывать следующие особенности.

1. Скорость баннеров

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

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

Таким образом, постарайтесь найти золотую середину. Настройте скорость ротации баннеров так, чтобы было не быстро, но и не медленно — достаточно для просмотра. 5-7 секунд обычно хватает, при условии отсутствия обилия текста в баннере.

2. Последовательность баннеров

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

Поэтому так важна последовательность баннеров в слайдере. Первый баннер получает большее внимание, чем все последующие. Если баннер не заинтересует посетителя, то велика вероятность, что остальные вовсе не будут просмотрены. Таким образом, последовательность баннеров должна быть тщательно продумана.

3. Авторотация баннеров в состояние фокуса

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

Важно: Авторотация возобновляется, как только мышь пользователя покидает баннер.

4. Ручное взаимодействие

Автоматическая ротация должна быть прекращена после любого активного взаимодействия пользователя с баннером. Например, когда он нажимает на кнопки (следующий / предыдущий), чтоб отобразить новый баннер в карусели.

Заключение

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

Статья написана для «LPGenerator»

Понравилась статья? Поделись с друзьями!

Популярные статьи