Как сделать всплывающие окна на компьютере

Обновлено: 04.07.2024

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

Давайте посмотрим, как создавать всплывающие окна, которые приведут к высоким конверсиям.

Самый распространенный вариант — квадратный поп-ап в центре экрана. Он появляется прямо перед глазами пользователя и закрывает нужный контент. Это неплохой вариант, но это не значит, что его следует использовать везде и всегда.

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

Поп-апы могут появляться в любом месте экрана — все зависит от того, что вы хотите сообщить посетителю сайта. Стандартное расположение строго по центру обычно используют, чтобы рассказать что-то важное: о горящих акциях или необходимости оплатить контент (допустим, в онлайн-медиа).

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

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

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

2. Следите за тем, чтобы всплывающие окна соответствовали общему стилю бренда

Часто в погоне за вниманием пользователей и высокой конверсией появляется желание добавить в дизайн поп-апов больше необычных элементов. Так появляются кричащие дизайны, которые избыточно подчеркивают призыв к действию (CTA). Например, стрелки, выделение текста жирным или чрезмерное использование красного цвета — все, чтобы пользователь не пропустил заманчивое предложение.

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

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

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

Здесь поп-ап оформлен в стиле сайта и благодаря этому воспринимается как его элемент и не так отвлекает внимание. Дизайн Алекс Бернштейн на Dribbble Несмотря на то, что здесь преобладают серые тона, получилась чистая и одновременно сложная композиция, которая соответствует бренду. Дизайн Анастасии на Dribbble

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

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

Скругленные края делают вашу рекламу более «дружелюбной». Дизайн Элисон Дэнис на Dribbble

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

Разрешение всплывающих окон для всех сайтов

Разблокировать появление всплывающих окон можно через две вкладки в свойствах браузера.

Открываем главное меню Internet Explorer.
Переходим в раздел «Свойства браузера».

Через это меню можно полностью управлять браузером Через это меню можно полностью управлять браузером

3. Открываем вкладку «Безопасность».

4. В поле «Уровень безопасности» нажимаем на кнопку «Другой».

5. Находим в списке параметр «Блокировать всплывающие окна» и выбираем для него значение «Отключить».

6. Применяем конфигурацию и перезагружаем компьютер.

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

Проверяем, чтобы нигде не была включена блокировка всплывающих окон Проверяем, чтобы нигде не была включена блокировка всплывающих окон

Разрешение всплывающих окон для отдельных сайтов

Можно не отключать блокировку всплывающих окон, а вручную указать, каким сайтам можно их показывать.

Открываем свойства браузера и переходим в раздел «Конфиденциальность».
Отмечаем пункт «Включить блокирование всплывающих окон».
Нажимаем на кнопку «Параметры».
Вводим в строке адрес сайта, которому можно показывать всплывающие окна, и добавляем его в список исключений.

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

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

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

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

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. ~~Все лишние данные со скриншотов удалены.~~

Вконтакте

Facebook

Twitter

Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.

Постановка задачи(ТЗ)

Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.

Решение

Способ 1

Результат:

Очень часто предлагают использовать:

Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.

Способ 2

Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

Html (без изменений)

Результат аналогичный

Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.

Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

Добавление магии на Jquery

Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:

Также необходимо обновить Html:

Результат

Теперь при загрузке страницы всплывающее окно PopUp скроется.

Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.

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

1. Что такое всплывающее окно
2. Почему pop-up окна важны
3. Как сделать всплывающие окна полезными
4. Чего лучше избегать при использовании pop-up окон

1. Что такое всплывающее окно

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

Пример всплывающего окна:

Классифицировать pop up окна можно по двум характеристикам:

Когда они появляются:
- сразу при открытии страницы,
- при закрытии сайта
- после того как пользователь проведёт на сайте определённое время
- прокрутит до конкретной части и т.п.
Где находятся:
- сбоку,
- в верхней или нижней части экрана,
- посередине или занимают весь экран, перекрывая контент страницы.

2. Почему pop-up окна важны

Рассмотрим причины, почему стоит использовать pop up окна на сайте:

3. Как сделать всплывающие окна полезными

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

Чтобы сделать pop up были максимально эффективными, придерживайтесь рекомендаций, которые я перечислю ниже.

3.1 Добавляйте ценностное предложение

Помните, что у вас есть не так много времени что-то донести → зачастую пользователи закрывают pop up окно спустя пару секунд после его появления. Поэтому минимизируйте текст в окне и кратко опишите, какие выгоды получит человек, если выполнит то, что вы предлагаете.

Например, если вам нужен адрес электронной почты посетителя, недостаточно его попросить. Опишите выгоды: например, вы будете отправлять уникальные и полезные материалы. Или предложите что-то особенное: купон на скидку, лид-магнит и пр.

Пример всплывающего окна с ценностным предложением

Важно: не манипулируйте, это может вызвать отторжение. Не стоит использовать фразы типа «если вы не этого не сделаете, многое потеряете». Относитесь уважительно к своей аудитории.

3.2. Упростите закрытие всплывающего окна

Не заставляйте посетителей искать кнопку закрытия окна, это очень раздражает. Позвольте им закрыть всплывающее окно просто и быстро. Сделайте видимой кнопку закрытия [X] в углу и разрешите пользователям кликать за пределами всплывающей области, чтобы также закрыть окно.

3.3. Не спамьте

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

3.4. Рассчитайте время появления всплывающего окна

Хорошая тактика — показывать pop up окна не сразу после того, как посетитель зашёл на сайт, а через некоторое время — так вы произведёте более положительное впечатление. Дайте пользователям немного освоиться и ознакомиться с вашим контентом

Один из вариантов — настроить появление окна по прошествии 30% от среднего времени пребывания на сайте. Среднюю длительность сеанса можно узнать в Google Аналитике.

Умножьте это время его на 0,3. Так вы определите, когда показывать всплывающее окно.

3.5. Всплывающие окна должны соответствовать общему дизайну

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

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

всплывающее окна были заметными и привлекательными,
они смотрелись гармонично,
текст был читабельным,
окна были адаптивными и подстраивались под разные размеры экранов.

3.6. Сделайте заметным призыв к действию

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

Пример не самого удачного CTA

А вот хороший пример:

4. Чего лучше избегать при использовании pop-up окон

Чтобы не раздражать пользователей, придерживайтесь таких правил:

Не перегружайте посетителей. Иногда при входе на сайт появляются уведомления о файлах cookie, онлайн-чаты, запросы на использование местоположения и пр. Если вам важно, чтобы несколько всплывающих окон отображались на сайте, сделайте так, чтобы они не появлялись одновременно, и чтобы не занимали весь экран.
Не показывайте всплывающие окно после совершения целевого действия. Когда посетитель выполнил целевое действие, pop-up не должно ему больше показываться
Не показывайте всплывающие окно после того как пользователь его закрыл. Нужно им навязывать своё предложение, если он от него один раз отказался.
Не размещайте всплывающие окна на каждой странице сайта.

Подводим итоги

Всплывающие окна — инструмент продвижения, который при правильном подходе может принести конверсии. Чтобы pop up окна были эффективными, придерживайтесь таких рекомендаций:

окно должно содержать ценностное предложение,
дайте возможность посетителям быстро закрыть всплывающее окно,
не спамьте pop up окнами,
рассчитайте время появления всплывающего окна,
всплывающие окна не должны сильно отличаться от дизайна сайта,
призыв к действию должен быть понятным и заметным.

Читайте также: