1. Как создать форму для всплывающих окон (POP-UP)

Как создать форму для всплывающих окон (POP-UP)

28 июля 2021
Разберемся, что необходимо для создания оптимальной формы для всплывающих окон (POP-UP).
Любая форма поп-ап собрана из трёх основных частей: 
  1. Заголовок. Он должен быть содержательным и понятным. Рекомендуем использовать простые фразы и короткие предложения. Пользователь должен быстро понять, что ему предлагают, и без труда заполнить форму. Хорошими вариантами будут «Подпишись на новинки!», «Получи промокод!». 
  2. Содержание. Это часть поп-апа подробно раскрывающая его смысл и назначение, она может быть, как в виде текста, так и в виде заполняемой формы. В тексте можно разместить информацию об актуальных акции, свежих предложениях или розыгрыше подарков. Форма нужна, чтобы собрать данные по лиду: его имя, номер телефона или e-mail. 
  3. Призыв к действию. Чаще всего это активная кнопка или ссылка. Этот элемент поп-апа призывает пользователя совершить заданное действие, например, оставить заявку на обратный звонок, подписаться на рассылку, получить купон, скачать файл и т.п. 
Развлекательный поп-ап баннер на сайте магазина
 
Обратите внимание! По закону вам необходимо согласие пользователя на обработку персональных данных, поэтому в любом поп-апе обязательно соблюдайте это требование, в том числе согласие на рассылку. Его можно оформите в виде чебокса со ссылкой на политику конфиденциальности на вашем сайте.

Внешний вид поп-апа 

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

Всплывающее окно должно легко восприниматься пользователем и не вызывать вопросов как с ним взаимодействовать. 

Вот 5 рекомендаций по правильному оформлению поп-апа:
  1. Простой интерфейс. Используйте легко читаемый шрифт в тексте, широкие поля и крупные кнопки - пользователь должен сходу понять о чем поп-ап. 
  2. Адаптивность. Поп-ап должен качественно отображаться на экранах любых устройств, в том числе на мобильных телефонах и планшетах, кроме того, не должно возникать проблем с закрытием такого всплывающего окна.
  3. Уместность. Правильно настройте время показа поп-апа согласно логике просмотра и релевантности действий пользователя на сайте - не нужно по нескольку раз собирать его e-mail, постоянно показывая ему форму подписки, или сразу предлагать перейти на целевую страницу, если пользователь только начал знакомство с вашим сайтом. 
  4. Не навязчивость. Не дублировать поп-апы, которые пользователь уже ранее закрывал, не нужно предлагать несколько раз одно и то же – для этого используйте в форме надписи, типа «Уже подписан», «Больше не показывать». 
  5. Призыв к действию. Пользователь должен сразу понимать каких действий от него ожидают. Используйте кнопки и ссылки с побуждающими фразами «Подпишись на рассылку!», «Получи скидку!», «Зайди к нам в блог!» и т.п.

Создание поп-апа 

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

Также нужно учесть, что всплывающие окна (pop-up) считаются формой рекламы и поэтому при их создании необходимо придерживаться требований Coalition for Better Ads (Коалиция за лучшую рекламу), которыми руководствуется в том числе Google Chrome.

Нельзя: 
• добавлять в поп-апы видео с автозапуском и звуком 
• запускать обратный отсчет без возможности закрыть поп-ап вручную 
• применять агрессивные эффекты, типа мигания 
• использовать поп-апы, закрывающие более 30% площади экрана. 

Так же может быть интересно
18.03.2022
Несмотря на то, что тема далеко не новая, типовые вопросы про разработку сайта возникают постоянно. В этой статье мы решили осветить самые основные моменты, с которыми необходимо определиться до начала работ над вашим ресурсом.
25.01.2022
Что взять за основу: онлайн конструктор или полноценную CMS? Это первый задача, с которой сталкиваются все будущие владельцы всех сайтов. 
14.12.2021
Изображения - элементы, которые придают сайту его индивидуальность, разнообразят ваши статьи, но в то же время, являются одной из основных причин медленной работы вашего ресурса.
28.10.2021
Создание специальных версий сайта набирает популярность, в связи с чем на рынке появилось множество предложений ускорить сайт за небольшую сумму и повысить тем самым рейтинг ресурса на сервере PageSpeed до 100/100 баллов для мобильной и ПК версии.