Контент

Что такое Floating Bar: 10 примеров и советы по использованию

05 мартa ~ 9 мин читать 917 просмотры
оценить
Claspo Blog Что такое Floating Bar: 10 примеров и советы по использованию

Что это такое floating bar

Floating bar — это pop-up, который закрепляется сверху или снизу сайта и остается видимым при скролле страницы. В Floating bar можно разместить напоминание об окончании распродажи, форму подписки или направить трафик на определенный лендинг. 

Преимущества использования floating bar

Ненавязчивость

Floating bar не отвлекает пользователей от основного контента сайта и не требует совершить дополнительных действий, чтобы продолжить просматривать страницу (например, подписаться или закрыть форму). 

UX-friendly

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

Высокий показатель конверсии

Тогда как всплывающую форму можно закрыть и не вернуться к ней, Floating bar всегда остается на виду и дает пользователю возможность отреагировать на предложение в любой момент. Это повышает вероятность совершения целевого действия, а с ней — конверсию и продажи.

Как использовать floating bar? 

Форма подписки

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

Распродажа или ограниченное предложение

Такие формы эффективны вместе с таймером — это позволит привлечь внимание к акции и подчеркнет лимитность вашего оффера. 

Промо онлайн- или офлайн-событий

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

Сбор подписчиков в социальных сетях

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

Call to action

В floating bar можно разместить кнопку с главным CTA лендинга или сайта. Например, “Получить демо” или “Попробовать бесплатно” для SaaS-продуктов.

10 примеров использования floating bar

Распродажи и акции

Birchbox.com

birchbox1.png

Birchbox напоминает о скидках и просит не забывать о задержках в доставке на время праздников. У этой формы также есть логика отображения: она видна пользователям на стартовой странице и при скролле вверх, обратно к началу.

Narscosmetics.com

nars1.png

NARS напоминает о скидках, которые скоро заканчиваются.

Ограниченное предложение (Limited offer)

Swisswatchexpo.com

swiss watch expo 1.png

Магазин швейцарских часов сообщает о скидке при оплате с PayPal и предлагает промокод. 

Beautybay.com

beauty bay1.png

В предпраздничный период Beauty Bay напоминает сделать заказ до определенной даты, чтобы получить товары до Рождества.

Call to action

Shopify.com

shopify1.png

На лендинге Shopify размещает floating bar с главным CTA — “Get started”. Менее ярко выделена кнопка “Learn more”, которая ведет на блог. 

ActiveCampaign.com

ac1.pngВместе с меню сайта, Active Campaign закрепляет форму для email и CTA “Try it free”.

Canva.com

canva1.png

Canva закрепляет кнопку “Start designing”, чтобы пользователи из любого места на сайте могли перейти непосредственно к использованию сервиса.

Thewineshop.com

wineshop 1 welcome.png

Винный магазин Wine Shop приветствует новых пользователей и предлагает перейти к выбору вина. 

Дополнительные предложения, напоминания

Maccosmetics.com

mac1.png

MAC сообщает о бесплатной подарочной упаковке для заказов от определенной суммы. Floating bar располагается на стартовой странице и при скролле обратно вверх.

100percentpure.com

100 percent pure 1.png

В этом интернет-магазине косметики контент floating bar не статичный: сообщение о бесплатной доставке от определенной суммы сменяется информацией о скидке по промокоду. 

Советы по использованию floating bar

Используйте простой текст и CTA

Так как floating bar фактически позволяет разместить только текст и кнопку, меткое сообщений и CTA как никогда важны. 

Тестируйте

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

Персонализируйте оффер

Как только вы получили результат с floating bar на основной странице сайта, протестируйте более узконаправленное предложение на странице с определенной группой товаров или услугой. Возможно, вам удастся привлечь внимание пользователя персонализированным оффером, если он не взаимодействовал с попапом на главной странице.

Исключите нагромождение форм

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

Заключение

Floating bar — это простая механика для взаимодействия с клиентами. Если вы беспокоитесь о навязчивости всплывающих форм и не хотите отвлекать пользователей от основного контента сайта — floating bar станет отличным решением для ваших задач. 

Корректно размещенная и соответствуя запросу аудитории, floating bar форма способна:

  • увеличить рост контактной базы;
  • сообщить о распродаже, скидках или новинках;
  • направить трафик на нужную страницу;
  • собрать заявку на участие в онлайн-событии;
  • повысить эффективность отдельной страницы;
  • поделиться полезным PDF-файлом, чек-листом, записью вебинара с целью подписки или промо продукта, события.

Чтобы добиться лучших результатов, придерживайтесь принципа минимализма в дизайне floating bar, тестируйте контент и CTA, чтобы определить лучшее предложение для ваших клиентов. И стремитесь к более персонализированным сообщениям, основывая их на особенностях поведения пользователей на сайте.

 

Вас также может заинтересовать
Exit Pop-up.svg
Pop-up: техники, примеры и стратегии использования

Что такое Pop-up Pop-up — это элемент интерфейса, который отображается поверх всех остальных элементов в окне браузера. Он может появляться без запроса пользователя или по клику на определенном элементе страницы. Пример приветствующего попапа со скидкой за регистрацию на сайте онлайн-магазина magnolia.com: Для каких целей используют попапы: привлечение новых подписчиков; сбор данных о пользователе (емейл, телефон, куки и прочее);  сообщение о новостях;  оказание техподдержки;  показ рекламы;  сбор заявок клиентов; получение обратной связи (опросники).  Но все же основная цель попапа — сбор...

09 мартa 8 мин читать
Best Popup Examples for Blogs to Get More Followers and Subscribers (1).svg
8 ошибок попапов, или почему вам кажется что они не работают

А вас раздражают попапы? 73% пользователей утверждают, что негативно относятся к всплывающим окнам. Но это не мешает маркетологом продолжать использовать их. Почему? Ответ довольно простой – они работают! Несмотря ни на что клиенты продолжают взаимодействовать с попапами, и этот инструмент не теряет эффективности. Но даже незначительные ошибки в настройке окна, такие как неудачное время появления или перегруженность данными, могут привести к потере клиентов и трафика.  Попапы появились в середине 1990-х годов с подачи дизайнера и программиста Итана Цукермана, который в...

01 мартa 8 мин читать