Попап (Pop-up): что это и как не щекотать нервы посетителей
Попапы, или же всплывающие окна, пользуются большой популярностью. Как использовать их максимально полезно и не раздражать посетителей сайта? Ответы найдете здесь!
Автор Олеся Мельниченко
“Уже уходите!? Постойте, у нас есть еще много интересностей именно для вас!” – читаете вы в окошке, которое неожиданно появилось перед глазами. Да, нельзя просто так зайти на сайт, посмотреть именно то, что вас интересует и закрыть страницу.
Но подождите… Если отбросить всю лирику и очевидный раздражающий фактор, эти окошки могут иметь сверхмощный потенциал как для бизнеса, так и для клиентов. Как они называются? Очень логично: всплывающие окна.
Сегодня поговорим о них, а также откроем несколько секретов их создания и как не получить шквал хейта от клиентов после этого. Поехали! 🤓
Что такое попап (pop-up): разбираемся в деталях
Попап (pop-up c английского “всплывать”, “неожиданно возникать”) – это элемент интерфейса страницы сайта, который появляется на экране посетителя. Он может всплыть после какого-либо действия (попадание на сайт, клик на ссылку, нажатие кнопки, при наведении курсора мыши на “крестик” возле вкладки) или вообще без запроса пользователя.
Главной целью всплывающего окна является привлечение внимания пользователей и побуждение их к дальнейшему взаимодействию с ресурсом. Предположим, вас пригласили на детский праздник и вы в поиске подарка. После нескольких часов безуспешных скитаний онлайн, вы замечаете соответствующий магазин. Оп! Попались.
Всплывающий попап на сайте предлагает 500 бонусов на первую покупку за подписку. Неплохо! Нажимаем “Получить”. Как видите, все просто: магазин завладел вашим вниманием, “заманил” бонусами и побудил к действию.
Каноническим местоположением всплывающего окна на экране является центр (как показано на скриншоте выше). Но это, конечно, не обязательно – вы можете поместить его где угодно: в углу справа, слева, сверху или снизу. Все зависит от других элементов интерфейса, так что лучше не перекрывать текст или такие важные блоки, как поисковую панель или виджет онлайн-чата.
Например, на сайте интернет-магазина MOYO можно заметить всплывающее окно в правом нижнем углу:
Преимущества и недостатки попап-окон
Существует общепринятое мнение, что попап чрезвычайно раздражает пользователей и сразу вызывает недоверие к бизнесу. Вроде бы он плохо влияет на имидж бренда и нередко выглядит навязчиво.
Но не все так плохо! Если вы решите серьезно подойти к делу, хороший результат не заставит себя ждать. Прежде чем начать делать первые шаги, давайте рассмотрим основные преимущества и недостатки попапов:
| Преимущества | Недостатки |
|---|---|
| 1. Быстрое привлечение внимания посетителей сайта – так же как и виджет онлайн-чата, pop-up окна это еще один способ привлечь взгляд в самый ответственный момент. | 1. Особенности дизайна – не всегда попап выглядит хорошо (иногда ему присущи навязчивые черты), поэтому приходится закрывать его как можно быстрее и больше никогда не заходить на этот сайт. |
| 2. Дополнительная реклама бизнеса – можно вместить всю важную информацию об акциях, сезонных предложениях, специальных товарах и так далее – словом, все, о чем упоминать на основной странице сайта где-то в третьем параграфе слева было бы не так эффективно. | 2. Повышенный уровень недоверия к бренду – конечно, он возникает только тогда, когда бизнес устанавливает слишком много попапов на сайте (или на одной странице сайта). В таком случае посетители сочтут их спамом и покинут сайт, что приведет к их низкой конвертации в лидов. |
| 3. Возможность собрать контактные данные аудитории – попап-окна станут отличным вариантом для привлечения новых клиентов, скажем, на вебинар или презентацию новой книги или просто призывом подписаться на новостную рассылку. | 3. Расширение для блокировки реклам – часто человек настраивает блокировку всплывающих окон и другой рекламы в браузере или имеет специальный плагин для этого, например, AdBlock. Тогда шансы увидеть pop-up на сайте сводятся к минимуму. |
| 4. Больше возможностей для персонализации – добавьте логотип вашего бренда, контакты поддержки, специальные визуальные элементы, видео о компании/продукте и т.д. |
Какие цели и задачи имеет всплывающее окно?
Сначала выделим цели попапов. Обычно это:
- Предложение дополнительных промокодов/скидок на покупки;
- Проведение опроса аудитории;
- Заполнение контактной формы (имя, email, телефон);
- Информирование о новостях компании;
- Оказание технической поддержки.
Наряду с этим есть много задач (или функций), которые выполняют попапы. И как вы уже могли догадаться, каждый бизнес выбирает свое: радушно приветствовать посетителей сайта, сразу забрасывать скидками или удержать их внимание. Давайте поговорим о 5 основных задачах всплывающих окон (с реальными примерами!):
1. Лидогенерация
10-15 лет назад для привлечения большей аудитории и получения желаемой огласки бизнес раздавал листовки. Словом, для лидогенерации. Но давайте будем честны: это не быстрый и не самый эффективный процесс.
Сегодня pop-up – это хороший инструмент именно для генерации лидов на сайте. Они помогут расширить базу контактов, которые в будущем могут пополнить ряды ваших постоянных клиентов.
Здесь фантазия – это то, что нужно: предлагайте подписаться на новости компании, социальные сети, блог и т.д. Но есть нюанс: делайте это в обмен на контактные данные клиента. Все это в результате даст трафик, продажи и высокие конверсии.
На примере ниже прекрасно все: pop-up в контрастных тонах, показательно сниженная цена, фраза-ключ “бесплатно” и, конечно же, форма для сбора контактных данных клиента. Такой pop-up трудно не заметить, так что аудитория точно “запишется на пробную тренировку” и ваша армия клиентов увеличится 🙋♀️
2. Удержание клиентов
Посетитель может закрыть страницу, если не найдет нужной информации, не заинтересуется вашим продуктом или просто заскучает, путешествуя по вашему сайту. Кто хочет потерять потенциального клиента, когда он был так близко? Так поймайте его, если сможете. Закатайте рукава – всплывающие окна сделают все в лучшем виде.
Вид попапов, появляющихся в момент, когда человек намерен уйти с сайта, называются exit-intent попапы. Название очевидно. Какое должно быть предложение на таком всплывающем окне? Все, что сможет заинтересовать посетителя! Выгодные цены, дополнительные бонусы, акция, которая вот-вот закончится и т.д.
На сайте Mate academy – украинской компании, которая специализируется на IT-курсах – такой pop-up появляется каждый раз, когда клиент хочет закрыть страничку с описанием Java курсов.
Их трюк заключается в эффекте срочности – “волна набора закроется через”, “осталось мест” – и дополняется таймером в реальном времени. Ой, смотрите! Человек, который хотел бы выучить Java и чуть не упустил свое счастье, уже заполняет форму и ожидает старта курса.
3. Информирование клиентов
В вашей компании произошли изменения и нужно как-то известить клиентов? Или вы просто хотите проинформировать посетителей сайта о пользовании вашими услугами? Естественно, можно подключить email-маркетинг или тот же онлайн-чат и команду поддержки. Но попробуйте использовать всплывающее окно для этого.
Что является ключевой составляющей информационного попапа? Хорошо заметный дизайн и нередко ссылки на дополнительные ресурсы. English home – магазин домашнего текстиля – использовал попап-окно на сайте именно для информирования клиентов. Пример, конечно, не из самых приятных, но достаточно показательный: при заходе на сайт, видим яркий pop-up и сообщение с ключевой информацией от компании.
4. Увеличение продаж
Если продажи магазина упали или хочется немного увеличить эти показатели, попап точно изменит ситуацию к лучшему. Установите его на лендинге, продуктовых или акционных страницах, странице регистрации или с тарифами. Главное правило – добавить релевантный контент всплывающего окна.
Предложения с ограничением времени, скидки (для новых клиентов), подарки, кэшбек, возможность согласиться или уйти с сайта, бесплатные пробные товары/сервисы – подойдет все, что, по вашему мнению, круто увеличит продажи вашего бизнеса. В общем, экспериментируйте! Таким образом, вы сможете узнать, какие всплывающие окна срабатывают именно для вашей аудитории.
А теперь внимание! 😱 Следующий пример вызывает резкое желание съесть что-то сладкое. Перед вами сайт украинского производителя арахисовых паст – Паста ТОМ. В правом нижнем углу видим пестрый попап на сайте – “10 років дружби з Новою поштою”. В честь этого события, компания дарит “безкоштовну доставку в поштомати при замовленні від 250 грн”. Отличная коллаборация и ход! 👍
5. Улучшение пользовательского опыта
Бизнес это не только о деньгах. Важнейшей ценностью являются ваши клиенты и посетители сайта. Вам, вероятно, будет интересно получить обратную связь от них и улучшаться с каждым днем.
Используйте pop-up, чтобы спросить мнение аудитории по поводу вашего сервиса, проводите различные опросы, представьте их как окно пожеланий и предложений. Не стесняйтесь спрашивать прямо:
Как мы можем усовершенствовать наш продукт?
Понравилось ли вам взаимодействие с нашим сервисом?
Перед тем как вы покинете нас! Оставьте свой отзыв и помогите нам стать лучшей версией себя!
На сайте немецкой медиакомпании Deutsche Welle (DW) хорошо использован попап для обратной связи. Так как именно эта версия сайта находиться в бета-версии, посетителям предлагается оставить свой отзыв о том, удобно ли ею пользоваться, или же вернутся к прежнему варианту. И, заметьте, всплывающее окно расположено справа в углу, а не по центру, как обычно:
Как создать pop-up и привлечь внимание пользователей?
Перед тем как мы перейдем к самой интересной части, предлагаю разобрать критерии такого попапа, который не раздражает (ни вас, ни клиентов):
- Общее оформление. Здесь можно отталкиваться от фирменного цвета вашего бренда или добавить логотип компании. Гармония должна быть во всем!
- Точный СТА (call-to-action). Чтобы склонить клиента к конкретному действию, выберите четкий призыв к нему (отсюда и название кнопки CTA). Вместо Вот скидка, напишите Получить 50% скидку, а подпись Новый ассортимент лучше заменить на Посмотреть новый ассортимент.
- Креативность. Вот где можно разгуляться! Добавьте немного персонализации и интерактивности к попапу, например выбор времени демо-звонка или предложите оставить какое-то сообщение от клиента вашей команде поддержки (в обмен на его электронный адрес, конечно).
- A/B тестирование. Создайте несколько вариантов всплывающего окна и покажите вашей аудитории. Затем проанализируйте, какой pop-up понравился больше и где взаимодействие было лучше.
Вот как это все воплотить в жизнь с HelpCrunch! Поверьте, здесь нет ничего сложного:
Шаг 1. Войдите в свой аккаунт HelpCrunch или быстренько создайте новый бесплатно.
Шаг 2. Выберите Попапы → Добавить попап. Пропишите название, определите время показа (команда онлайн, офлайн или всегда), аудиторию (посетители, пользователи) и показывать ли его на мобильных устройствах. Нажмите Перейти в редактор.
Важно! Помимо всплывающего окна, вы также можете создать форму благодарности.
Шаг 3. Пора выпустить своего внутреннего художника! 👨🎨 Благодаря редактору попапов от HelpCrunch, вы можете настроить все по вашему желанию:
- Стиль – сделайте большую кнопку, добавьте немного цвета, выберите анимацию всплывающего окна, скройте брендинг HelpCrunch, измените положение окна на экране или ограничитесь простым оформлением.
- Форма для сбора контактных данных клиентов – можно собирать имена, телефон, email, название компании.
- Кнопка – выберите цвет, пропишите текст и добавьте ссылку.
- Условия отображения – определите правила, согласно которым ваш попап будет отображаться (история чатов с посетителем, продолжительность текущей сессии, платформа и т.д.).
- Собственные CSS – хочется большей персонализации? Просто настройте собственные CSS стили.
Важно! Для редактирования текста и добавления других визуальных элементов внутри всплывающего окна, просто нажмите на текст.
Шаг 4. Сохраните ваш pop-up как черновик, чтобы вернуться к нему с новыми идеями или сразу нажмите Сохранить и запустить если все готово.
Ухты! Только что мы создали классное всплывающее окно, которое посетители сайта ни за что не пропустят мимо глаз. Вот как он выглядит в действии:
Подводим итоги
Попап является мощным инструментом для маркетинга, продаж и, конечно, поддержки. Если он в надежных руках и правильно используется, высокие конверсии и эффективность не заставят себя ждать.
Прежде чем прибегнуть к этой авантюре, проанализируйте цели, которых вы хотите достичь: только привлечь и удержать внимание посетителей сайта? Может собрать большую базу контактов?
Лайфхак: понаблюдайте за сайтами конкурентов и посмотрите, настроены ли у них попапы и как они используются.
Это ваш бизнес, вам и карты в руки! 🃏
