Как pop-up влияет на пользовательский опыт

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

Pop-up, или оверлей — это всплывающее окно на сайте, которое перекрывает экран и демонстрирует определенное сообщение пользователям. Это могут быть скидки, геймификация с эксклюзивными предложениями или призывы подписаться на рассылку.

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

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

Виды всплывающих баннеров: 

• Лайтбокс — сообщение на затемненном экране. 

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

Преимущества поп-ап

Рассмотрим плюсы оверлея: 

1. Повышение уровня конверсии. Лайтбокс направляет аудиторию совершить конкретное действие — мотивировать ее стать клиентами. 
2. Снижение показателя отказов. Удержание внимания посетителей и их вовлечение.
3. Реклама и лидогенерация. Возможность продвигать товары или услуги за счет ограниченных предложений или офферов, отвечающих на боль посетителя.
4. Уведомления — информирование о новостях, акциях и мероприятиях.

Недостатки

Разберем минусы оверлея со стороны SEO и UX-дизайна:

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

• Медленная загрузка. Некорректная настройка может замедлять загрузку страницы.

• Блокировка контента. Лайтбокс может затруднять доступ к контенту людям с ограниченными возможностями, а это влияет на SEO-показатели.

На примере ниже плохо различаются шрифт с дополнительной информацией и CTA-кнопка.

Помните, что многие пользователи включают блокировщик рекламы — и поэтому часть аудитории не увидит оверлей. Чтобы избежать негативного пользовательского опыта — добавьте кнопку «Закрыть», и человек сможет быстро убрать окно со страницы, если ваше предложение его не заинтересовало. 

Как сделать оверлей

Создавайте лайтбоксы, которые решают ваши бизнес-задачи и не раздражают аудиторию. 

5 правил хорошего pop-up:

1. Удобный интерфейс. Пользователь должен интуитивно понимать, как взаимодействовать с окном, а не разбираться с функционалом.
2. Адаптивность. Помните, что большая часть аудитории использует смартфоны, поэтому всплывающее окно должно помещаться на экране мобильного устройства и располагаться поверх основной части страницы.
3. Целесообразность пути пользователя. Не нужно показывать все возможные лайтбоксы каждому посетителю. Учитывайте действия человека и настраивайте соответствующее окно: подписаться на рассылку после прочтения статьи в блоге или оставить контактные данные, чтобы получить полезный гайд.
4. Призыв к действию. Создайте простое и четкое предложение без воды — «Оставить email», «Перейти в каталог», «Получить скидку».
5. Избавьтесь от навязчивости. Если человек закрыл окно один раз, оно не должно появляться снова.

Существует большое количество сервисов для разработки оверлеев: 

• Специализированные площадки для создания всплывающих окон — Mindbox, Plerdy, Leadgenic, JumpOut, Awidget, Envybox, Formdesigner.

• Виджеты для WordPress.

• Платформы email-рассылок.

Чек-лист 

Мы собрали рекомендации — с чего начать создание поп-ап, чтобы добиться желаемых результатов:

1. Определите цель — это позволит понять, какое целевое действие вы хотите получить от пользователей. 
2. Пишите четко и кратко. Всплывающее окно не должно содержать большое количество информации. 
3. Используйте триггеры для соответствующих сегментов аудитории.
4. Добавляйте короткие формы: имя и телефон или email. В ином случае вы отобьете желание у человека изучать ваш виджет.
5. Придерживайтесь стилистики сайта: цветовая гамма, форма элементов, шрифты и так далее.
6. Проведите тестирование полученного pop-up и проанализируйте эффективность.