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

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

28 Июля 2021
Разберемся, что необходимо для создания оптимальной формы для всплывающих окон (POP-UP)

Любая форма поп-ап собрана из трёх основных частей:

  • Заголовок. Он должен быть содержательным и понятным. Рекомендуем использовать простые фразы и короткие предложения. Пользователь должен быстро понять, что ему предлагают, и без труда заполнить форму. Хорошими вариантами будут «Подпишись на новинки!», «Получи промокод!».

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

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

obrazets-formy-pop-ap.jpg

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

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

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

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

Вот 5 рекомендаций по правильному оформлению поп-апа:

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

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

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

  4. Не навязчивость. Не дублировать поп-апы, которые пользователь уже ранее закрывал, не нужно предлагать несколько раз одно и то же – для этого используйте в форме надписи, типа «Уже подписан», «Больше не показывать».

  5. Призыв к действию. Пользователь должен сразу понимать каких действий от него ожидают. Используйте кнопки и ссылки с побуждающими фразами «Подпишись на рассылку!», «Получи скидку!», «Зайди к нам в блог!» и т.п.

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

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

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

Нельзя:

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

Другие статьи на тему всплывающих окон (POP-UP):

«Зачем нужны всплывающие окна (POP-UP)»

«Варианты использования всплывающих окон (POP-UP)»

Так же может быть интересно