Всплывающие окна. Настраиваем правильно

21.05.2019

Время чтения 7 мин

Нет времени  читать?
Прочту

Отправим материал вам на почту

Ваш E-mail

Оглавление:

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

    Мир против плохой рекламы и это нельзя игнорировать

    В 2017 году исследование отношения людей к рекламе поставило точку в этом вопросе — не показывайте пользователям всплывающие окна, если хотите их сохранить. Из 23 видов рекламы 452 участника теста однозначно отдали антипремию всплывающим окнам. А в 2018 Chrome и Yandex взялись улучшать пользовательский экспириенс, сворачивая назойливую рекламу. В Chrome под нож пошли 12 видов рекламы, включая назойливые всплывающие окна. Даже одно неправильно всплывающее окно позволит гуглу полностью заблокировать рекламный контент на сайте. Хуже этого только хейт-мейл пользователей .

    Такие окна Google забракует

    Как не попасть под санкции гугла

    Чтобы встроенный в гугл блокировщик не забанил рекламу, сделайте ее беззвучной, спокойной и легко закрывающейся. Google Chrome использует большинство пользователей в России — имеет смысл проверить сайт на соответствие рекламной политике гугла.

    Всплывающие окна правильно

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

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

    Узнайте среднее время посещения сайта в веб-аналитике. Пусть окна всплывают немного до выхода пользователя с сайта или страницы и как минимум после полной загрузки страницы.

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

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

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

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

    Сделайте окно удобным. Любой элемент сайта должен быть удобным в использовании. Позаботьтесь об удобных всплывающих окнах и емко расположите на них:

    • Понятный и вовлекающий текст обращения.
    • Место для ввода данных или нажатия. Поэкспериментируйте с кнопкой, сделайте ее тематической. «Жду звонка» вместо «Отправить».
    • Призыв к действию. Главное не перестараться.
    • Крестик, дающий возможность закрыть окно. Всегда должен быть легко различим, чтобы не подумали неладное.
    • Социальное доказательство. К примеру, счетчик подписавшихся на рассылку.

    Пример вовлекающего поп-апа



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

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

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

    Поп-аут окна не мешают пользователю взаимодействовать с сайтом



    Статичная строка вверху или внизу страницы воспринимается легче, особенно если ее легко скрыть



    Онлайн-чат с живым сотрудником на проводе



    Пуш-уведомления увеличивают трафик на сайте



    Слайдер на сайте — вместо тысячи поп-апов



    Встроенная в страницу форма не отвлекает от контента страницы



    Попробуйте готовые решения

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

    Хороший середнячок Hello Bar.

    Стоит $0-15-99 . Есть бесплатная версия со всеми базовыми функциями. Настройки простые, хорошая аналитика, но мало опций для таргетинга.

    Простенький сервис с хорошим бесплатным тарифом GetSiteControl.

    Стоит $0-19-29. Недорого и много шаблонов, но не убирается лого и продвинутая аналитика возможна только в платном тарифе.

    Достойный сервис с хорошим бесплатным тарифом Mailmunch.

    Стоит $0-15-25-75. Недорогой сервис с хорошей аналитикой и адаптивным дизайном. Неплохие настройки таргетинга, глубокая кастомизация. Но мало шаблонов в бесплатном тарифе и нельзя убрать лого.

    Слабый сервис со множеством виджетов Sumome.

    Стоит $0-29-79. Много виджетов, хорошая кастомизация и дизайн, но дороговато. Очень ограниченная бесплатная версия без возможности докупать виджеты, нельзя убрать лого.

    Полностью бесплатный сервис AddThis.

    Простой интерфейс, адаптивный дизайн. Хорошая аналитика и настройки таргетинга.

    Русский сервис, очень много шаблонов Witget.

    Стоит $15-30-90-300. Полностью поддерживает русский язык. Очень много шаблонов , адаптивный дизайн и статистика. Нет бесплатной версии, есть короткий триал.

    Дорогой сервис с хорошим инструментарием для профессионалов Picreel.

    Стоит $19-69-149-399. Много шаблонов, есть интеграция с crm-системами и email-сервисами. Адаптивный дизайн. Хорошая аналитика и таргетинг.

    Самый продвинутый сервис Optimonk.

    Стоит $29-59-99-199-399. Много шаблонов, есть интеграция с crm-системами и email-сервисами. Профессиональная настрйка таргетинга и аналитика, но дороговато.

    Добавить комментарий к этой строке

    Подпишитесь на рассылку

    Не пропустите выход свежих статей и проектов. Подпишитесь на рассылку и будьте в курсе последних проектов студии Jetmix. Следите за нашими новостями из Instagram, Facebook, Вконтакте.

    E-mail

    Спасибо за подписку!