Pop up окно

Будем делать PopUp окно, такое знакомое и вызвающее отвращение, но его можно использовать не только для рекламы, но и например для поздравления с каким-нибудь праздником.

HTML

<div id="blanket" style="display:none;"></div>  <div id="popUpDiv" style="display:none;">        <a href="#" onclick="popup('popUpDiv')">Закрыть PopUp</a>  </div>     <a href="#" onclick="popup('popUpDiv')">Открыть PopUp</a>

В контейнер popUpDiv помещается контент попап окна.
Если хотите, чтобы popup окно показывалось при загрузке страницы то допишите к тегу body такой код:

<body onload="popup('popUpDiv')">

CSS

#blanket {     background-color:#111;     opacity: 0.65;     *background:none;     position:absolute;     z-index: 9001;     top:0px;     left:0px;     width:100%;  } #popUpDiv {      position:absolute;      background:url('pop-back.jpg') no-repeat;      width:400px;      height:400px;      border:5px solid #000;      z-index: 9002;  } #popUpDiv a {position:relative; top:20px; left:20px}    

Для IE задний фон при открытом popup окне мы выключили, так как старые версии IE не поддерживают прозрачность.

JS

jQuery у нас не используется, только jаvascript!
Подключаем файл css-pop.js с таким содержанием:

function toggle(div_id) {      var el = document.getElementById(div_id);      if ( el.style.display == 'none' ) {    el.style.display = 'block';}      else {el.style.display = 'none';}  }  function blanket_size(popUpDivVar) {      if (typeof window.innerWidth != 'undefined') {          viewportheight = window.innerHeight;      } else {          viewportheight = document.documentElement.clientHeight;      }      if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {          blanket_height = viewportheight;      } else {          if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {              blanket_height = document.body.parentNode.clientHeight;          } else {              blanket_height = document.body.parentNode.scrollHeight;          }      }      var blanket = document.getElementById('blanket');      blanket.style.height = blanket_height + 'px';      var popU.    
t.body.parentNode.clientWidth)) {         window_width = viewportwidth;     } else {         if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {             window_width = document.body.parentNode.clientWidth;         } else {             window_width = document.body.parentNode.scrollWidth;         }     }     var popUpDiv = document.getElementById(popUpDivVar);     window_width=window_width/2-200;//200 это половина ширины popup окна     popUpDiv.style.left = window_width + 'px'; } function popup(windowname) {     blanket_size(windowname);     window_pos(windowname);     toggle('blanket');     toggle(windowname);        }

PopUp автоматически центрируется по середине экрана. Чтобы скорректировать его расположения откройте этот js файл и подправьте строчки (в нашем примере ширина и высота popup 400px, а половина будет 200):

popUpDiv_height=blanket_height/2-200;//200 это половина высоты popup окна  window_width=window_width/2-200;//200 это половина ширины popup окна    

pcvector.net

Хороший, плохой, злой

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

Как раз о правильном использовании Pop-up на сайте я хочу рассказать сегодня.

В чем суть Pop-up окна?

Представьте, что вы читаете текст на сайте, пролистываете страницу… и тут на экране всплывает окно со специальным предложением! Вы, конечно, раздражены, но если это интернет-магазин, и вы хотели совершить здесь покупку, то предложение скидки в Pop-up вызовет совсем другие чувства.

Конечно, если не планировали ничего покупать, то раздражение будет основной эмоцией, но, возможно, что это как раз тот случай, когда магазин может пожертвовать вами.

Или представьте другую историю.

Вы читаете блог своего любимого интернет-маркетолога. И тут во всплывающем окне появляется предложение скачать бесплатную книгу по самым популярным ошибкам в Google Adwords. Что же, почему бы и нет?


Pop-up могут быть хорошими и плохими.

Здесь (как и в случае любого другого элемента) все упирается в полезность для потенциальных клиентов. Нужно ли им это?

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

А теперь перейдем к примерам. Рассмотрим хороший, плохой и отличный пример реализации всплывающего окна на сайте.

Хороший пример

Лидмашина сделала для своего блога такую всплывающую форму:

Pop up окно 

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

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

Так зачем же упускать такую возможность?

Обратите внимание, что пример от ЛидМашины достаточно лаконичен. Я не знаю, почему они приняли такое решение. Возможно, чтобы их Pop-up не ассоциировался с различными окнами со сторонних сервисов и иными рекламными. Тут весь акцент именно на текстовом материале.

Плохой пример

Знаменитый CallBackHunter.

Он просто раздражает. Во-первых, появляется на сайтах слишком быстро, поэтому даже не успеваешь толком понять, куда попал и есть ли здесь что-то необходимое тебе. Во-вторых, сам вопрос в CallBackHunter’е звучит по-дурацки:


Pop up окно 

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

Эта называется «втюхивание».

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

Зачем себе портить карму?

Ваша задача – сделать клиента довольным, а не продать ему любой ценой. Выстраивайте отношения с клиентами по модели «win-win». Это всегда дает свои плоды в долгосрочной перспективе.

Отличный пример

Если вы впервые зайдете на сайт интернет-магазина одежды Lamoda, то увидите специальное предложение:

Pop up окно


Подпишитесь на рассылку и получите 500 рублей скидки. Давайте признаем, что продажи одежды существуют за счет скидок. Просто прогуляйтесь до ближайшего торгового центра. Я недавно ходил в кино на «Женщину в черном 2». Так вот, сам кинотеатр находится на третьем этаже и до него мне пришлось пройти уйму магазинов. Витрины просто кричали о скидках в 20, 50 и 90 процентов!

И все это, конечно, «только сейчас», а на самом деле работают вечно.

Одежду продают так почти всегда (есть исключения для дорогих и модных брендов).

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

Выигрывают все. Вы экономите, а Lamoda получает постоянного клиента. В общем, обе стороны в данном случае получают как раз то, что и искали. Это модель «win-win».

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

Полезность – это основное свойство всплывающих окон. Однако есть еще некоторые технические детали, которые стоит учитывать.

1) Pop-up не должен быть слишком большим

Подбирайте размеры, как у той же Lamoda или даже меньше. Не нужно пугать посетителей огромными всплывающими окнами.

2) Не перегружайте аудиторию

Не нужно постоянно показывать Pop-up одному и тому же человеку. Если он его закрыл, то забудьте о нем. Покажите снова всплывающее окно через пару недель.


3) Не торопитесь

Показывать Pop-up в первые же секунды после захода на сайт, – это нормально, но только в том случае, если это соответствует логике дальнейшей работы с посетителем и несет для него пользу. Например, скидка от Lamoda является как раз таким Pop-up’ом.

4) Кнопка «Закрыть» должна быть видна

Да, посетитель должен иметь возможность закрыть ваш Pop-up без проблем. Забудьте про всякие трюки. Фокусы здесь только помешают делу и вызовут раздражение человека. Если он решил закрыть всплывающее окно, то не должен тратить на это слишком много времени.

5) Четкое сообщение

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

Помните про личный контакт

Если речь идет про блог или ваш проект завязан на личности, то во всплывающем окне можно использовать фотографию. Так получается в какой-то мере обращение от первого лица. Это уже плюс, так как не воспринимается, как назойливый Pop-up со сторонних сервисов (цель которого в том, чтобы приносить доход от рекламы владельцу сайта).

Пример удачного всплывающего окна с фотографией:

Pop up окно 


Резюме

Использование PopUp – это совсем не переход на темную сторону силы. Если вы, конечно, подходите к делу грамотно и создаете всплывающее окно, которое будет полезным целевой аудитории. И которое при этом не будет мелькать слишком часто у них перед глазами.

Я не считаю, что всплывающие окна нужно показывать регулярно. Лучше брать какой-то временной промежуток. Например, нужно собрать базу email для рассылки. Собрали? Можно отключать Pop-up. Передозировка от назойливой рекламы – не самый лучший способ построить долгосрочные отношения с клиентом.

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

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

myemarketing.ru

На данный момент ни один современный, качественный сайт не может обойтись без использования JavaScript. Этот язык даёт очень многое, модифицирует и делает лучше любой проект. Но писать на чистом JS порой бывает трудно и долго. Для значительного облегчения объёма работы и времени потраченного на неё, была создана библиотека jQuery. Сегодня мы рассмотрим пример использования jQ, и сделаем всплывающее окно (довольно полезное и красивое дополнение к сайту).

Для начала напишем HTML код:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Popup Show</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="content">
      <button class="show_popup blue_btn" rel="popup1">Отправить письмо</button>
    </div>
    <div class="overlay_popup"></div>
    <div class="popup" id="popup1">
      <div class="object">
        <form action= "" method= "">
          <p>Имя: </p>
          <p><input type= "text" name= "name"></p>
          <p>E-mail: </p><p> <input type= "text" name= ".
/>       </div>
    </div>
    <script src="jquery/jquery-1.11.2.min.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>

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

textarea {
  width: 100%;
  resize: none;
}

/* Ставим кнопку по центру */

.content {
  text-align: center;
}

/* Стили для нашей кнопки */

button {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 0;
}

button:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

button:focus {
  outline: none !important
}

/* Стили для содержимого popup окна */

input, textarea {
  color: #494949;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  background: #fff;
  font-size: 14px;
  margin: 0 0 10px;
  padding: 5px;
  width: 100%;
  font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

input:focus {
  border-color: #808080;
  outline: none;
}

textarea:focus {
  border-color: #808080;
  outline: none;
}

/* Кнопка */

.blue_btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

/* Окно */

.overlay_popup {
  display:none;
  position:fixed;
  z-index: 999;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:#000;
  opacity:0.5;
}

.popup {
  display: none;
  position: relative;
  z-index: 1000;
  margin:0 25% 0 25%;
  width:50%;
}

/* Ещё немного стилей для popup окна */

.object{
  width: 500px;
  height: 500px;
  background-color: #eee;
  padding: 50px 70px;
}

Отлично! Красивая кнопка, приличный блок (pop-up окно) и пока что, бесполезный блок с затемнением. Осталось написать только небольшой кусок кода — и всё прекрасно!

$('.show_popup').click(function() { // Вызываем функцию по нажатию на кнопку
    var popup_id = $('#' + $(this).attr("rel")); // Связываем rel и popup_id
    $(popup_id).show(); // Открываем окно
    $('.overlay_popup').show(); // Открываем блок заднего фона
})
$('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
    $('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})

Готово! Всё прекрасно работает, красиво на вид, и очень полезно! Результат работы можно посмотреть здесь: Pop-up окно на jQuery

Задавайте вопросы и высказывайте своё мнение в комментариях!

myrusakov.ru

Pop-up — что это?

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

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

Поп-апы появились не вчера, их популярность не спадает вот уже лет 20. Когда-то пользователи относились к ним совершенно спокойно и даже охотно выполняли целевое действие: подписывались, скачивали, переходили и загружали. Со временем этот инструмент затерли настолько, что сегодня у большинства пользователей он вызывает только отвращение. Между тем нельзя сказать, что всплывающие окна совсем уж кошмарное средство. Если использовать их «с умом», то можно получить определенную выгоду.

Какие бывают всплывающие окна

  • Приветственный поп-ап. Появляются через определенное время нахождения на сайте. Обычно это до 5 секунд, но встречаются назойливые примеры появления окошка уже через миллисекунду. Увы, в таком случае эффект — прямо противоположный.
  • Скроллинговый поп-ап. Появляется по мере того, как пользователь листает страницу и доходит до какого-то места, обычно, до середины или до конца.
  • «Выходной» поп-ап. Появляется, когда пользователь собирается закрыть страницу или нажать кнопку «Назад» в браузере.

Рекомендации по настройке всплывающих окон Часто на одном сайте можно заметить сразу несколько всплывающих окон. Сначала приветствие, потом вопрос «Не нашли нужное?», затем предложение подписаться на новости или перейти в другой раздел. Если вы решите использовать поп-апы на своем сайте, убедитесь, что оно обладает главными качествами адекватного всплывающего окна.

Три качества хорошего всплывающего окна

  • Беззвучное.
  • Неагрессивное.
  • Легко закрываемое.

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

Когда уместно показать всплывающее окно?

  • Если пользователь собирается покинуть ваш сайт.
  • Находится на сайте более 30 секунд, но никаких действий не предпринимает, а у вас нет длинных видео или десятка лонгридов.
  • Пользователь дошел до конца страницы/дочитал статью.
  • Пользователь вернулся на ваш сайт, посетив другую вкладку.

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

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

Всплывающее окно - сallback для сайтаЕще один вариант — сallback, то есть виджет обратного звонка. Это всплывающее окно, которое предлагает перезвонить посетителю. Код сервиса можно установить на сайт, созданный на 1C-UMI.

Позитивные стороны всплывающих окон

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

Негативные стороны всплывающих окон

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

Тестируйте разные виды всплывающих окон, проверяйте предложения на адекватность и вы обязательно выведете собственную формулу успешного поп-апа!

umi.ru

Перво-наперво распишем подробнее, что предстоит сделать.

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

По ссылкам ниже можно скачать готовый код примера, или перейти на демо страницу:

Скачать готовый код Посмотреть Demo

На первый взгляд задачка сложновата, но это только на первый взгляд. Разметим кнопки, вызывающие окна:

<div class="link_group">  	<a class="show_popup" rel="reg_form" href="#">Зарегистрируйтесь</a>  	<a class="show_popup" rel="photo_win" href="#">Галерея</a>  	<a class="show_popup" rel="tabs_info" href="#">Окно со вкладками</a>  </div>  

Все кнопки оформим в виде ссылок, зададим им общий класс (у меня это show_popup) и положим внутрь div-а с каким нибудь произвольным классом (я назвал этот блок link_group). Для того, что бы по клику на определенную кнопку открывалось нужное окно, добавим каждой ссылке атрибут rel параметр которого будет в точности соответствовать названию класса попапа.

Осталось с помощью стилей зааккуратить кнопки и работу над ними можно считать законченной:

/**********popup links**********/  .link_group {  margin:20px auto;  width:555px;  text-align:center;  }  .link_group a {  margin:0 20px;  padding:5px 15px;  color:#000;  font-weight:bold;  display:inline-block;  vertical-align:top;  *display:inline;  *zoom:1;  position:relative;  text-decoration:none;  text-transform:uppercase;  border:1px solid #ccc;  -moz-border-radius:3px;  -webkit-border-radius:3px;  border-radius:3px;  behavior: url(PIE.htc);  }  .link_group a:hover {  color:#cc0000;  }  

По большому счету, в стилях все понятно — центрируем блок со ссылками, закругляем углы, для ИЕ 7-8 подключаем PIE. В итоге кнопки выглядят одинаково во всех, распространенных на сегодняшний день, браузерах.

Займемся попапами. HTML разметка для всех окон будет одинакова. Различия касаются лишь размеров (ширины) и содержимого попапов.

Первым разметим попап с формой регистрации:

<div class="popup reg_form">  	<a class="close" href="#">Close</a>  	<h2>Регистрация на сайте</h2>  	<form method="post" action="">  		<label for="login">Введите логин:</label>  		<input type="text" name="login" />  		<label for="password">Введите пароль:</label>  		<input type="password" name="password" />  		<input type="submit" value="Войти" />	  	</form>  </div>  

Для самого первого обертывающего блока задаем двойной класс (popup reg_form) через пробел (обратите внимание, что имя reg_form соответствует атрибуту rel первой кнопки). Это позволит написать общие стили для всех окон и задать различные параметры для каждого окна отдельно.

Вторым разметим попап с картинками:

<div class="popup photo_win">  	<a class="close" href="#">Close</a>  	<h2>Галерея</h2>  	<div class="img_wrap">  		<img alt="" src="/images/pic_1.png" />  		<img alt="" src="/images/pic_2.png" />  		<img alt="" src="/images/pic_3.png" />  		<img alt="" src="/images/pic_2.png" />  		<img alt="" src="/images/pic_3.png" />				  		<img alt="" src="/images/pic_1.png" />				  	</div>  </div>  

Здесь так же задаем двойной класс (popup photo_win), путь к картинкам указывается к той папке, где эти картинки находятся.

И, наконец, разметим третий попап. Так же, как и в двух первых вариантах, обертывающему блоку задаем общий (popup) и индивидуальный (tabs_info) классы. Само содержание (разметку табов) возьмем из статьи «Универсальные вкладки на jQuery» и немного подправим под данную задачу.

<div class="popup tabs_info">  	<a class="close" href="#">Close</a>  	<h2>Вкладки (tabs)</h2>		  	<div class="selectTabs">  		<ul class="lineTabs">  			<li class="active"><a href="#">Удобства вкладок</a></li>  			<li><a href="#">Преимущества вкладок</a></li>  		</ul>  		<div class="tab_content">  			<div class="tab1">  				<p>Tabs - элемент интерфейса для отображения группы документов таким образом, что только 1 активный документ показан, а остальные спрятаны. Пришёл этот элемент интерфейса в компьютеры из офисного быта: папки с документами разделялись такими закладками на группы. Ну и конечно телефонные книги часто разделены табами по алфавиту.</p>  			</div>  			<div class="tab2">  				<p><img alt="" src="/images/tabs.jpg" /> Табы показаны в одном месте, рядом. Отсюда — удобство навигации. И целостность навигации, что тоже важно. Все уже привыкли к табам, так как видят и используют их везде (те же телефонные книжки, каталоги в библиотеках, и т.д.). А значит и домохозяйка знает, как они работают.</p>  			</div>  		</div>  	</div>			  </div>  

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

/**********All styles popup**********/  .popup {  padding:5px 15px 15px;  position:fixed;  top:100px;  left:50%;  display:none;  overflow:hidden;  border:1px solid #ccc;  background:#fff;  -moz-border-radius:15px;  -webkit-border-radius:15px;  border-radius:15px;  z-index:100;  behavior: url(PIE.htc);  }  .popup h2 {  font:bold 18px/32px Arial, san-serif;  }  .popup a.close {  width:16px;  height:16px;  display:block;  text-indent:-9999px;  position:absolute;  top:10px;  right:10px;  background:url(../images/close.png) no-repeat;  }  

Все попапы будут отцентрированы по горизонтали, оснащены кнопкой, закрывающей окно и их заголовки будут оформлены одинаково. При загрузке страницы все три окна будут скрыты (правило display:none; для дива с классом popup).

Подошла очередь оформить каждое отдельное окно.

Стили для окна с регистрацией.

/**********popup with form**********/  .reg_form {  margin-left:-200px;  width:400px;  }  .reg_form form {  margin-top:10px;  }  .reg_form label {  width:100px;  height:26px;  font:bold 12px/26px Arial, san-serif;  display:inline-block;  vertical-align:top;  *display:inline;  *zoom:1;  }  .reg_form input[type=text], .reg_form input[type=password] {  margin-bottom:10px;  padding:0 3px;  width:274px;  height:22px;  font:bold 12px/26px Arial, san-serif;  border:1px solid #ccc;  }  .reg_form input[type=submit] {  margin:10px 15px 0 0;  padding:3px 10px;  float:right;  background:#ccc;  border:0;  -moz-border-radius:3px;  -webkit-border-radius:3px;  border-radius:3px;  font:bold 10px Arial, san-serif;  text-transform:uppercase;  position:relative;  cursor:pointer;  behavior: url(PIE.htc);  }  .reg_form input[type=submit]:hover {  color:#fff;  }  

Стили для окна с картинками.

/**********popup with pictures**********/  .photo_win {  margin-left:-250px;  width:500px;  }  .img_wrap {  margin-top:10px;  width:100%;  overflow:hidden;  }  .img_wrap img {  margin:0 10px 10px;  height:187px;  }  

Стили для окна с табами.

/**********popup with tabs**********/  .tabs_info {  margin-left:-250px;  width:500px;  }  /*tabs links*/  .selectTabs {  margin:10px 0 0;  width:100%;  }  .lineTabs {  width:100%;  float:left;  list-style:none;  }  .lineTabs li {  margin:0 0 -1px 10px;  float:left;  position:relative;  z-index:1;  border:1px solid #ccc;  }  .lineTabs li.active {  border-bottom:1px solid #fff;  }  .lineTabs li.active a {  color:#cc0000;  }  .lineTabs a {  padding:4px 15px;  display:block;  text-decoration:none;  color:#000;  font-weight:bold;  font-size:10px;  text-transform:uppercase;  }  /*tabs content*/  .tab_content {  width:100%;  float:left;  border:1px solid #ccc;  -moz-border-radius:0 0 5px 5px;  -webkit-border-radius:0 0 5px 5px;  border-radius:0 0 5px 5px;  position:relative;  behavior: url(PIE.htc);  }  .tab_content div{  display:none;  }  .tab_content .tab1 {  display:block;  }  .tab_content .tab1, .tab_content .tab2 {  padding:10px 5px;  }  .tab_content img {  margin:0 10px 5px 0;  float:left;  }  

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

/**********overlay styles**********/  #overlay {  width:100%;  height:100%;  position:fixed;  top:0;  left:0;  display:none;  background:#000;  opacity:.8;  }  

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

Весь js будет следующим:

$(function () {  	//script for popups  	$('a.show_popup').click(function () {  		$('div.'+$(this).attr("rel")).fadeIn(500);  		$("body").append("<div id='overlay'></div>");  		$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});  		return false;				  	});	  	$('a.close').click(function () {  		$(this).parent().fadeOut(100);  		$('#overlay').remove('#overlay');  		return false;  	});  	  	//script for tabs  	$("div.selectTabs").each(function () {  		var tmp = $(this);  		$(tmp).find(".lineTabs li").each(function (i) {  			$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){  				var tab_id=i+1;  				$(tmp).find(".lineTabs li").removeClass("active");  				$(this).parent().addClass("active");  				$(tmp).find(".tab_content div").stop(false,false).hide();  				$(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300);  				return false;  			});  		});  	});  });  

Разберем подробнее, чего тут таково мы понаписали (напоминаю, рассматриваем только ту часть скрипта, которая отвечает за показ скрытых окон).

Перво-наперво, разыскиваем все ссылки с классом show_popup и отслеживаем когда по ним кликнет пользователь.

Если такое событие произошло, ищем блок, класс которого индентичен атрибуту rel ссылки, по которой кликнули ($(‘div.’+$(this).attr(«rel»))) и с помощью метода анимации .fadeIn(500) показываем этот блок (установленный в скобках параметр указывает на то, что блок будет проявляться на странице в течении 500 миллисекунд).

Далее с помощью метода .append(«<div id=’overlay’></div>») в самый конец body помещаем пустой блок с id=overlay (оформление для этого блока задавалось в таблице стилей) и, поскольку он является скрытым, с помощью метода .show() делаем его видимым.

Последним действием в цепочке, вызванной событием click(), устраняем возможные проблемы с прозрачностью (.css({‘filter’ : ‘alpha(opacity=80)’})) в горяче любимых ИЕ браузерах. Кстати, это правило можно было вынести и в таблицу стилей. Тут уже каждый решает, как ему удобнее, сам.

Проделав кучу вышеописанных операций, уходим в режим ожидания и находимся в этом состоянии до тех пор, пока пользователь не кликнет по крестику (ссылка с классом close). Как только это произошло, снова засучим рукава.

С помощью метода .parent() отыщем родителя для ссылки, по которой кликнули и спрячем найденный блок (метод .fadeOut(100)). Что бы исчезал блок не слишком резко, зададим временной интервал 100 миллисекунд (можно больше — как кому нравится).

Затем разыскиваем блок с id=overlay и при помощи метода .remove(‘#overlay’) удаляем его со страницы, после чего снова ожидаем, когда пользователь кликнет по какой нибудь из кнопок.

Стоит сказать еще пару слов по поводу записи return false;. Она применяется для того, что бы запретить браузеру осуществлять переход по ссылкам, используемым в конструкции.

Вот, пожалуй и все. Успехов в использовании…

siteis.ru

Модальность

В зависимости от контекста, слово «модальность» может иметь два разных значения. Применительно к интерфейсу в целом, оно подразумевает наличие различных режимов: например, для набора заглавных букв нужно нажать Caps lock, то есть переключить/выбрать другой режим. А когда мы говорим о всплывающих окнах, модальность означает блокирование работы с интерфейсом, до тех пор пока окно не будет закрыто (обычно это выглядит как затемнение фона).

Классификация всплывающих окон

Теперь можно разобрать классификацию:

  • Alert. Используется, чтобы сообщить об ошибке, либо предупредить пользователя о последствиях действия, которое он собирается совершить. Обычно содержат внутри себя две кнопки, вроде «Сделать что-то» и «Отменить». Алерты чаще всего модальны, то есть блокируют интерфейс позади себя, пока юзер не произведет действие внутри окна. Так как они прерывают работу пользователя, алерты должны использоваться только в крайних случаях. Например, при безвозвратном удалении файла, либо для подтверждения покупки. Хороший алерт всегда имеет информативный текст, поясняющий что произошло и почему это стоит внимания пользователя. В частности, фраза «Произошла ошибка!» — пример плохого алерта, так как не сообщает никакой полезной информации, но если заменить ее на «Соединение отсутствует! Проверьте, подключен ли ваш компьютер к сети», то юзеру станет намного понятнее в чем проблема и как ее решить. Также в хорошем алерте размещают не более двух кнопок, заголовок каждой из которых глаголом описывает действие при нажатии. Например, кнопки «Да» и «Отмена» — вроде бы понятны пользователю, но если переименовать их в «Удалить» и «Отменить», станет намного лучше.

img-3

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

img-4

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

img-5

  • Notifications. Сообщают о том, что начался или завершился какой-либо процесс, или совершилось какое-то действие. Обычно пропадают со временем, если не обращать на них внимания, либо остаются висеть, пока юзер не закроет их (в случае, если информация особенно важна). Могут содержать в себе кнопки действия. Текст уведомлений всегда должен быть кратким, но информативным, чтобы пользователю было понятно, что произошло.

img-6

  • Lightbox. Используется для увеличения элемента, на котором хочет сфокусироваться пользователь. В основном лайтбоксы применяют в галереях для просмотра картинок. Например, чтобы листать изображения не выходя из лайтбокса используются миниатюры внутри окна, либо кнопки со стрелками влево и вправо. Лайтбоксы также бывают модальными и немодальными.

img-7

  • Tooltip. Это подсказка, которая отображает дополнительную или справочную информацию. Может появляться либо по наведению курсора на элемент, либо по клику. Тултипы всегда немодальны.

img-8

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

img-9

В заключение

В данной статье приведена общепринятая классификация всплывающих окон, но в некоторых гайдлайнах можно встретить как дополнения, так и некоторые расхождения: например, где-то popover и tooltip это разные вещи, а где-то – одно и тоже. Главное – придерживаться правил конкретной платформы. Например, в OS X модальное диалоговое окно всегда выезжает сверху и дает ресайзить родительское окно, а в Windows оно всегда появляется посередине и наглухо блокирует родительский интерфейс.

ru.smedialink.com

Известный факт: большинство посетителей не совершают покупки при первом визите на товарную страницу интернет-магазина и даже не оставляют лиды — но как велико это большинство?

Согласно исследованиям компании SeeWhy, таковы 99% посетителей, впервые зашедших на ресурс. Конечно, речь идет в первую очередь о сайтах eCommerce, но все же возникает вопрос: если 99% посетителей ничего не покупают при первом визите, то как побудить их вернуться?

Хорошей новостью станет следующая статистика: 75% посетителей все же готовы возвратиться позже для завершения покупки.

всплывающие окна

Как бы вы не относились к popup окнам, эта маркетинговая технология все еще эффективна для привлечения внимания и сбора контактных данных (лидогенерации).

Проще говоря, используя popup окна, можно быстрее всего вернуть посетителя на лендинг.

  • 5 советов по оптимизации всплывающего окна (Pop-Up)

Почему?

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

Если говорить о контент- и email-маркетинге, то «прерывание паттерна» наиболее эффективно, когда читатель уже настроен на решение проблемы и продолжение взаимодействия (подписку на рассылку, покупку и т. д.).

Пример от сервиса Made.com. Маркетологи предложили своим посетителям бесплатный ваучер номиналом в 10 евро за сущий пустяк — адрес электронной почты. Это было сделано потому, что:

  1. Все любят денежные подарки;
  2. 10 евро за постоянный контакт по email — небольшая цена.

Made.com

Согласно данным ExactTarget, электронная почта — наиболее предпочтительный для клиентов маркетинговый канал, ведь 77% потребителей предпочитают email другим каналам взаимодействия с брендом.

Возможно, всплывающие окна не так уж плохи?

Скорее всего, вы ненавидите pop-ups и имеете на это право. Еще бы, кому понравится сразу после перехода на лендинг видеть нечто подобное:

всплывающие окна

Или вот такое:

всплывающие окна

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

Возможно, стоит немного остыть и посмотреть на результаты тестов. Что говорят цифры? Вот данные сплит-теста поп апа и кнопки «Нет, спасибо» на popup оффере.

Текст Количество просмотров Количество собранных email Коэффициент конверсии
Нет, спасибо. Я предпочитаю платить полную стоимость 165 416 9928 6,0%
Мне это неинтересно 165 625 7961 4,81%
Нет, спасибо 165 021  7616 4,62%
Нет 166 072 7433 4,48%

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

  • Как создать огромную подписную базу?

1. Опыт использования всплывающих окон

WP Beginner

За обычный день сервис WP Beginner получает около 70–80 новых подписчиков благодаря различным методам лидогенерации. Но чем больше подписная база, тем успешнее бизнес, поэтому маркетологи сервиса решились на ряд экспериментов с pop-ups.

Что было сделано?

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

WP Beginner

Каковы результаты?

Использование всплывающего окна на важнейших страницах (не на всем сайте) повысило количество регистраций на 660%. То есть от 70–80 лидов сервис перешел к показателю в 445–470 лидов за сутки — скачок на качественно новый уровень.

Следующий кейс — от Backlinko. После добавления на лендинг СТА с предложением подписаться на рассылку, конверсия упала до 1.73% — необходимо было срочно что-то сделать. Маркетологи компании разработали popup окно, которое появлялось перед пользователями, решившими покинуть целевую страницу. Вот как оно выглядело:

Backlinko

Помните, что конверсия было около 1.7% до использования popup окна? Через 2 дня после запуска pop-up статистика изменилась. Всего за два дня коэффициент конверсии вырос с 1.73% до 4.83% — более чем в 2 раза!

Конечно, в мире, где один грамотный тест может повысить конверсию на 100, 300%, даже 1300%, результаты этого эксперимента выглядят скромно. Однако это не совсем так.

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

Если popup окна будут приводить по 15 дополнительных подписчиков в сутки, то ежедневный доход вырастет в среднем на $225, а годовой доход — на $82 125 соответственно. Неплохой заработок за 2 минуты проверки настроек, верно?

Очевидно, что ненавистники pop-ups были неправы. Но существуют и другие факторы: показатель отказов и влияние всплывающих окон на пользовательский опыт. Что насчет этого?

  • 4 альтернативы традиционным Pop-Ups

2. Как pop-ups влияют на пользовательский опыт и показатель отказов?

Одна из первых мыслей при упоминании pop-up — рост числа отказов, ведь все больше людей будут уходить с лендинга по вине всплывающего окна, что абсолютно логично. Однако, вспомним приведенные выше примеры: маркетологи WP Beginner не увидели колебания данного показателя, равно как и Backlinko — число отказов не изменилось в обоих случаях.

Дэн Зарелла (Dan Zarrella) пришел к такому же выводу после проведения серии тестов на своей личной целевой странице, выяснив, что присутствие всплывающего окна никак не влияет на показатель отказов. Единственное, что изменилось — убрав pop-ups, Дэн лишился 50% входящих лидов.

pop-ups

  • 6 способов быстро увеличить подписную базу

3. Что насчет пользовательского опыта?

Судя по всему, посетителям все равно. Маркетологи WP Beginner не получили ни одной жалобы на popup окна от своих клиентов.

Если задуматься, в этом есть смысл. Да, неприятно видеть подобное после перехода на ресурс по ссылке с Facebook:

поп ап

Но это не повод в гневе покидать сайт. Что вы обычно делаете в подобных случаях? Верно — закрываете popup окно и продолжаете поиск нужного контента.

Более того, грамотное использование pop-ups способно повысить пользовательский опыт, по примеру сервиса Vero. Если вы зайдете главную страницу и в течение 30 секунд не предпримете никаких действий, то увидите в углу окно с текстом: «Что мешает вам подписаться на Vero прямо сейчас?».

Vero

4. Как уничтожить юзабилити с помощью всплывающих окон?

Однако вы не можете встроить в лендинг любое pop-up-объявление и надеяться на высокую конверсию. Если popup окно не выделяется на странице, то оно как минимум бесполезно.

pop-up-объявление

Вы уже собираетесь уйти с лендинга, и тут… Бам! Произошло что-то непонятное, откуда в середине страницы появилась кнопка СТА? В действительности это popup окно наложилось на незатемненную страницу, слившись с фоном. Когда вы не отделяете pop-ups от остальной страницы, это сильно портит пользовательский опыт.

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

  • Примеры юзабилити пользовательского интерфейса

5. Создание эффективных всплывающих окон

Прежде чем приступать к созданию pop-ups, рассмотрим их основные виды. Существует две крупных разновидности popup окон:

  1. Большие окна (оверлеи).
  2. Окна, всплывающие в результате прокрутки страницы.

Оверлеи

окно

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

Известный маркетолог Дэн Зарелла тоже использует оверлеи с затемнением фона, но само окно у него гораздо меньше обычного:

Pop up окно

  • Пользовательский опыт и юзабилити на сайтах eCommerce

Окна, всплывающие в результате прокрутки страницы

Этот вид pop-ups появляется, когда пользователь прокручивает страницу до некоторого этапа — чаще всего данный формат используется в блогах, и он крайне эффективен. Пролистав половину страницы, вы увидите нечто подобное:

всплывающее окно

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

Текст кнопок на всплывающих окнах

К заголовкам, текстам полей и кнопок на всплывающих окнах применимы те же требования, что и к контенту на СТА. Ведь pop-ups и являются элементами призыва к действию, цель которых — увеличение просмотров/подписчиков/лидов.

Текст кнопок на всплывающих окнах

6. Лучшее время для показа всплывающих окон

Если говорить о тестировании оверлеев, то сервис SumoMe собрал следующие данные: на сегодняшний день оптимальное время составляет 5 секунд после перехода посетителя на лендинг.

сервис SumoMe

Сервис WhichTestWon дает другую статистику. В ходе тестов было проверено появление оверлеев на 15, 30 и 45 секунде после посадки пользователя, и оптимальный результат показал первый вариант: появление окна через 15 секунд на 11% эффективнее варианта с 30 секундами, и на 50% — варианта с 45 секундами после посадки.

Но помните — не существует идеального времени появления окна, ведь тесты необходимы в каждом конкретном случае. Это справедливо и для вопроса о частоте появления pop-ups. Проще говоря, статистика чужих ресурсов может мотивировать на собственное тестирование, но не должна быть объектом подражания — тестируйте.

  • Как удвоить конверсию вашего сайта за 4 простых шага?

Заключение

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

Высоких вам конверсий!

По материалам conversionxl.com 

lpgenerator.ru

Зачем использовать pop-up?

 

 

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

 

 

подписка на рассылку новостей компании;

 

загрузка полезного контента (при этом пользователь также должен оставить свой электронный адрес или телефон);

 

регистрация на сайте за купоны на скидку.

 

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

 

 

 

Виды pop-up окон

 

 

Сегодня в интернет-маркетинге насчитывают целых 5 видов всплывающих окон:

 

 

 — приветственное;

 

 — окно во время прокрутки страницы;

 

 — окно, всплывающее в заданное время;

 

 — окно с вопросом;

 

 — окно exit-intent.

 

 

 

1) Приветственное всплывающее окно

 

 

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

 

Пример на сайте Tele2

 

 

2) Окна, которые возникают по мере прокрутки страниц веб-сайта

 

 

Эта разновидность pop-up окон характеризуется проявлением в определенный момент времени: как только пользователь дойдет до середины или конца страницы.

 

Пример на сайте Lamoda

 

 

всплывающие окна

 

 

3) Поп-апы, появляющиеся в заданное время

 

 

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

 

Правильно запрограммировать время появления окна  – целая наука. Маркетологи до сих пор проводят множество исследований, вычисляя наилучшее время для такого pop-up. На сегодняшний момент лидирует теория «пятой секунды».

 

Пример на сайте Quelle

 

 

4) Pop-up с «коварным» вопросом

 

 

Окна такого типа встречаются на сайтах достаточно часто, особенно когда пользователь провел там какое-то время. Чтобы такие pop-ups работали, убедитесь, что целевое(нужное вам) действие написано крупным шрифтом и выделено, а отказ практически незаметен. Кроме того, для закрытия окна не стоит использовать некорректные фразы, которые могут смутить или унизить вашу целевую аудиторию.

 

Пример на сайте Кораблик

 

pop-up окна

 

 

5) Поп-апы типа exit-intent

 

 

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

 

Пример на сайте Behappy

 

поп-ап окна

 

 

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

 

 

По масштабу всплывающие поп-апы делят на следующие категории:

 

 — hello-board

 

 — page-stop

 

 

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

 

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

 

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

 

 

 

Советы по созданию всплывающих окон, творящих чудеса конверсии:

 

 

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

 

2. Используйте яркие цвета. Pop-up должен заметно выделяться, поэтому используйте контрастные цвета. Сочетания желтый+черный, розовый+белый, например, очень хорошо привлекают к себе внимание.

 

3. Экспериментируйте. Одно и тоже окно на каждой странице веб-сайта или после определенного количества прокруток вызовет у пользователей только негатив. Используйте разные типы поп-апов, но только не все сразу.

 

4. Сделайте ваше предложение действительно нужным. Промокоды, скидки и слово «бесплатно» всегда работают.

 

5. Эффект толпы. Если вы предлагаете пользователю подписаться на новостную рассылку или скачать вашу книгу, укажите, какое количество человек уже совершило это действие, так как это вызывает доверие.

 

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

 

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

 

 

 

Не терпится применить знания на практике? Тогда настало время создать свой сайт на платформе Ucraft. У нас уже есть интеграция с сервисом Hellobar, который с помощью всплывающих окон поможет направлять трафик, собирать имейлы или привлекать внимание посетителей к вашим социальным сетям.

 

 

www.ucraft.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector