Правильная карусель на главной странице вашего сайта

Карусели (от англ. carousel, кроме этого «слайдер», «слайд-шоу») на сайтах весьма популярны — особенно на основной странице. Но неправильно оформленная карусель может лишь все сломать, а не оказать помощь. К примеру, стремительное мелькание баннеров злит и приводит к желанию поскорее покинуть сайт.

Как же сделать так, дабы приводить к интересу, а не бешенство визитёров?

Разглядим главные моменты при проектировании слайдеров.

  • Как создать карусель, применяя лишь HTML и CSS без Javascript

Принцип ОДП

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

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

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

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

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

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

Чем меньше времени у визитёров на раздумья, тем выше отклик на ваше предложение.Правильная карусель на главной странице вашего сайта

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

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

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

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

Все это вынуждает клиента поторопиться с ответом..

Примеры верно созданных реализовывающих баннеров:

  • Как сделать слайдер (слайд-шоу, галерею) на целевых страницах

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

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

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

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

1. Скорость

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

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

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

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

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

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

Так, последовательность баннеров должна быть шепетильно продумана.

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

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

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

4. Ручное сотрудничество

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

  • Как слайдеры воздействуют на конверсию landing page?

Вместо заключения

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

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

Image source K Rsnk

Создатель этого поста:

Мария Кокухина, специалист по аудиту сайтов, повышению интернет-продаж. Начальник компании PROF-MK.RU

Случайные статьи:

Джедай вёрстки #7. Часть 13: Вёрстка адаптивной карусели отзывов


Подборка похожих статей:

riasevastopol