Всплывающие окна на сайте: особенности и правила создания попапов

Что такое попап

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

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

А как ещё называется всплывающее окно и причем тут “попап”, спросите вы? Это слово образовано от английского, где popup как раз и означает “всплывающий”. Иногда можно встретить наименование оверлей (в пер. с англ. — “перекрытие”), а также всплывающее меню или всплывающая панель. По сути, всё это одно и то же: правило про яхту и ее название из мультика тут не работает.

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

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

Когда можно использовать попапы

Показ всплывающих окон на сайте зависит от ваших целей и контекста сайта. Мы советуем размещать попап в следующих случаях:

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

Виды попапов

По способу появления и расположению на сайте всплывающие окна бывают:

1. Модальные — блокируют доступ к основному контенту на сайте, пока не будут закрыты. Они применяются, в том числе, для важных уведомлений и оформления подписки/рассылки.
2. Встроенные — появляются внутри содержимого страницы и не ограничивают доступ к информации. Они очень компактные и используются часто для предложения скидок или отображения медиа-контента.
3. Всплывающие —  обычно полностью заполняют страницу, так как направлены на сосредоточение пользователя на конкретном действии или контенте. Они востребованы при размещении информации об акциях и при сборе контактов.
4. Выезжающие — возникают не как традиционные окна, а как плавные панели в боковой или нижней части экрана. Они могут содержать ссылки, формы ввода, навигационные подсказки по сайту и пр.

По такому же принципу в категории попапов отдельно выделяют hello-board (приветственные всплывающие окна при открытии сайта) и page-stop. Последние показываются в середине и требуют закрытия или выполнения целевых действий, ну а первый тип обычно не мешает изучать  контент. Попапы на выходе со страницы могут быть блокирующими, но чаще они просто удерживают внимание пользователя за счет полезного контента, подарка или скидки, чтобы человек не закрывал вкладку.

Как сделать эффективное всплывающее окно на сайте

• Попап должен быть лаконичным и отражать только самую важную информацию. Используйте короткие предложения, слоганы, ясный язык, чтобы пользователь сразу понимал, что до него пытаются донести. В противном случае человек либо злится (а негативные ассоциации с сайтом никому не нужны), либо игнорирует.
• Заголовок всплывающего окна должен быть привлекательным и ярким, чтобы удержать внимание пользователя. Используйте эмоционально окрашенные слова, чтобы вызвать интерес или любопытство.
• Попап должен иметь четкий и конкретный призыв к действию (Call to Action). Используйте точные глаголы, чтобы пользователь понимал, что именно ему нужно сейчас делать (и зачем).
• Дизайн всплывающих окошек должен соответствовать общему стилю сайта и компании. Используйте ту же цветовую схему и шрифты. При этом графические элементы не должны раздражать (например, сильно и часто мерцать), а текст надо сделать читабельным и контрастным с фоном.
• Попап должен быть релевантным для текущей ситуации или контента. Не показывайте всплывающую панель, которая не имеет отношения к тому, что пользователь просматривает или делает. Также не нужно делать на сайте (а тем более на одной странице) сразу несколько окон: выбирайте то, что важно для вашего бизнеса и вашей аудитории.
• Окошки не должны быть навязчивыми и мешающими. К примеру, если попап вылезает слишком рано, пользователь не успевает ознакомиться с сайтом и понять, нужно ли ему ваше предложение. Лучше настроить разумное время задержки перед появлением окна или показывать его при определенных условиях, например, в случае докрутки страницы до конкретного блока.
• Обязательно продумайте способ закрытия попапа. У пользователя должна быть возможность легко и быстро убрать окошко. Часто это может быть кнопка “Закрыть” или значок “X”.
• Попапы должны быть разработаны с учетом разных гаджетов. Если всплывающее меню не адаптировано для смартфонов (не отображается полностью или не закрывается), это негативно влияет на пользовательский опыт и восприятие сайта.

Сегментируйте аудиторию перед разработкой попапа, делая его более персонализированным. Например, окна могут отличаться в зависимости от устройства пользователя, его браузера или местоположения. Также обязательно учитывайте свою маркетинговую стратегию, чтобы попап “вписывался” в воронку продаж и отвечал вашим бизнес-целям.

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

Больше пользы: подписывайся на нас в VK, чтобы узнать о SEO и ADS

Перейти