Popup это

Сказал и ушел, нарисовав себе в голове такую картину:

img-1

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

img-2

Валентин расстроен, Гоша зол, несколько часов рабочего времени потрачены впустую. То, что хотел Валентин, называется «немодальный поповер», а то, что сделал Гоша – «модальное диалоговое окно». Члены команды не поняли друг друга, так как не пользовались общепринятой терминологией.

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

Модальность

В зависимости от контекста, слово «модальность» может иметь два разных значения. Применительно к интерфейсу в целом, оно подразумевает наличие различных режимов: например, для набора заглавных букв нужно нажать 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

Показ всплывающих окон – зло или эффективный инструмент

Представьте ситуацию: вы увлечены чтением информации на страничке, пытаетесь прокрутить ее… и перед вами всплывают окна с рекламой. Первая реакция – раздражение. Однако, если вы находитесь на сайте интернет-магазина и желаете что-либо приобрести, то предлагаемая в pop-up скидка вас непременно обрадует.

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

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

Очевидные преимущества и недостатки настройки всплывающих окон

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

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

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

  • Уменьшение посещаемости. В случае неправильной установки pop-up окон посетители будут чувствовать при их появлении только раздражение. К примеру, если баннер огромный или приходится долго искать крестик для закрытия, то пользователи могут отдать предпочтение другим сайтам.
  • Расценивание баннеров как спама. Это возможно при очень большом количестве pop-up-ов. Результатом может стать ухудшение репутации компании.
  • Pop-up баннеры можно заблокировать. Некоторые знают, что возможна установка в браузере программы, которая будет блокировать появление всплывающих окон. При этом об эффективности рекламы с помощью pop-up можно забыть.

Из каких элементов состоит всплывающее окно

Залог эффективного общения с посетителями сайта через pop-up баннеры – тестирование на постоянной основе текстов, дизайна и формата их показа.

Перечислим наиболее значимые элементы:

Виды всплывающих окон на сайте

Есть две группы поп-ап окон: Hello-Board и Page-Stop.

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

Недостатки у таких попап-ов есть, но устранить их на данный момент нельзя – обзор сайта хоть и частично, но ограничивается. Это обуславливает меньшую эффективность окон Hello-board по сравнению с Page-Stop.

Категория баннеров Page-Stop предполагает полное ограничение активности на сайте, пока посетитель не кликнет на одну из кнопок – примет предложение или откажется от него, закрыв pop-up. Такое всплывающее окно в большинстве случаев лишь раздражает пользователей, поскольку отвлекает их от основной цели посещения страницы.

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

Хороший, плохой и отличный пример всплывающего окна

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

При первом посещении онлайн-магазинов Lamoda и Quelle всплывают окна со специальными предложениями:

«Соверши покупку, и доставка будет за наш счет»; «Оформи подписку, и мы скинем 40%». Привлекательные предложения, правда? Необходимо отметить, что такие приемы постоянно используются в торговле. Если обратить внимание, то можно заметить, что в каждом отделе торговых центров висят объявления о распродажах и больших скидках, действующих якобы именно сегодня. Однако такая система продаж практикуется все время.

Интернет-магазину (в том числе и Lamoda) очень важно получить электронный адрес посетителя. Маркетологи включат его в список e-mail-ов для рассылки и будут предлагать свои товары. Это выгодно всем. Пользователи получают скидки, а онлайн-магазины – постоянных покупателей. Такая модель называется «win-win».

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

Всем известный CallBackHunter. Когда данная технология только зародилась в Рунете, то она вызывала wow-эффект. Ведь согласитесь, вы вбиваете телефон и вам автоматически перезванивают через 30 сек и консультируют по тем или иным вопросам. Конверсия многих сайтов увеличились. Но неспособность большинства владельцев сайта правильно настроить данную технологию привела в скором времени к тому, что она у всех вызывает раздражение. Этому есть две причины. Первая — его мгновенное появление после перехода на сайт. Посетитель даже не успевает сориентироваться, куда попал, и нужно ли ему здесь что-нибудь. Вторая — формулировка в CallBackHunter’е вызывает по меньшей мере недоумение:  

В окне pop-up не содержится никакого выгодного предложения, пользователя не уговаривают оформить подписку. Здесь идет расчет на эффект неожиданности. Если посетитель кликнет на нужную кнопку pop-up-а, не сообразив, как закрыть окно, то автоматически пойдет звонок в компанию. Сотрудники начнут предлагать продукцию и могут даже что-то «впарить». Таким образом организация может лишь потерять свою репутацию.

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

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

На сайте журнала «Генеральный директор», являющегося нашим клиентом, всплывает такой баннер:

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

Заметьте, что pop-up на сайте журнала «Генеральный директор» содержит достаточно информации, его предложение заманчиво. С назойливостью тоже не переборщили. У посетителей не возникает впечатление, что этот pop-up относится к другому сайту или является рекламным, поэтому он работает эффективно.

7 идей, как настроить всплывающие окна на сайте

1. Всплывающее окно вместо баннера

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

Плюсы:

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

Минусы:

  • Информации на pop-up много разместить не получится, в отличие от страницы подписки. Нельзя будет также загрузить изображение или видеоролик.

2. Всплывающее окно вместо подписки

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

Плюсы:

  • Увеличение количества подписчиков. Причиной этого является то, что, кликнув по кнопке вызова pop-up посетитель уже более расположен к заполнению полей. Если форма подписки выводится сразу, ее, как правило, игнорируют.
  • Более экономное использование интернет-пространства. Поля из формы подписки можно заменить рекламной информацией. Еще один вариант – оформить страницу в стиле минимализма, сделав ее аккуратной.

Минусы:

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

3. Всплывающее окно вместо слов благодарности

Это хорошее и простое решение. Создавать страницы, размещая на них слова благодарности и ссылки на загрузку интересующих файлов, нет необходимости. Взамен следует направлять человека на ту же страничку, при этом немного изменяя ее адрес (к примеру, к /page/ добавили /?yhx935/). Такое дополнение будет давать команду на открытие pop-up с благодарностью или ссылками на скачивание.

Плюсы:

  • Создавать такие страницы можно, тратя на это гораздо меньше времени.

Минусы:

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

4. Всплывающее окно вместо страницы «Спасибо за подписку»

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

Плюсы:

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

Минусы:

  • Pop-up окно должно всплывать моментально, иначе пользователи могут заподозрить вас в обмане и отсутствии нужных ссылок. Как следствие, объемы продаж упадут.

5. Секретное всплывающее окно

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

Появляться такой pop-up может, к примеру, после 36 минут нахождения у вас на странице (или дольше). Как вариант, можно узнать, как долго находятся на вашем сайте не более 1% посетителей, и забить это время в pop-up. Не обязательно предлагать акцию, можно опросить пользователей (+ потом предоставить скидку), если вы хотите собрать какие-либо данные о тех, кто долго просматривает вашу страницу.

Плюсы:

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

Минусы:

  • Если «яйцо» найдут все, то вы потерпите убытки.

6. Мини персонализация

Добавление в список персонализации можно счесть странным. Однако сейчас она применяется не часто, а вместе с поп-апами работала бы довольно эффективно. Заключается она в следующем. Если вы знаете контакты пользователя (к примеру, имя, адрес электронной почты, номер телефона), то:

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

Плюсы:

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

7. Всплывающее окно внутри статьи

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

Плюсы:

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

Минусы:

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

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

Как сделать поп-ап самим? Для этого вы должны знать язык HTML хотя бы на базовом уровне. В таком случае вы без труда сделаете pop-up окно для сайта.

Чтобы создать его, часто используют библиотеки JavaScript-фреймворков (jQuery, MooTools, Prototype и т.д.), но непрофессионалу они ни к чему. Средства языка разметки гипертекста HTML и языка описания каскадных таблиц стилей CSS позволяют разработать хороший pop-up. Работа написанных на этих языках окон не будет зависеть от наличия в браузере поддержки JavaScript.

Код, дающий команду открыть всплывающее окно, помещается на двух строчках. Задача первой – сформировать ссылку, клик на которую вызывает появление pop-up-а:

Значения атрибутов тега данной ссылки следующие. Onmouseover определяет тип курсора мыши, который появляется при наведении на кнопку pop-up-а. Оnclick нужен, чтобы подать команду на появление скрытого блока с идентификатором pop-up, после того как пользователь кликнет на кнопку.

Вторая строка является всплывающим окном. Для указания слоя служит идентификатор pop-up. Атрибут style позволяет задать параметры окошка, шрифта и рамки (их цвет, размер, фон):

Поп-ап является невидимым по умолчанию (так как селектор display имеет значение none в тексте кода).

Этих двух строчек достаточно, чтобы создать всплывающее окно на html. Потребуется вставить их между тегами <body> и </body> вашего сайта, и попап заработает.

Для того чтобы pop-up закрывался, понадобится вставить перед тегом </div> ссылку, дающую команду скрыть видимый слой с идентификатором pop-up:

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

Всплывающее окно для Вордпресс

Есть не один плагин всплывающих окон для WordPress. Как выбрать подходящий из множества вариантов? Pop-up может возникать неожиданно либо плавно, на основной странице сайта или на внутренней, сразу при переходе на страницу или при ее закрытии. Ниже рассмотрены лучшие варианты плагинов:

  • ITRO Popup Plugin

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

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

  • YITH Newsletter Popup

Тоже является бесплатным. Предназначен для создания поп-ап окна в форме подписки. Его не сложно установить и настроить. Работать придется всего на двух страницах. На одной – общие настройки, на другой – редактор дизайна pop-up-а.

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

  • WordPress PopUp

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

  • Optinmonster

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

  • Ninja Popups

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

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

9 советов, как сделать всплывающее окно и не переусердствовать

1. Не фамильярничайте

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

2. Не компенсируйте качество количеством

Желание выйти на 400% не должно привести к наращиванию количества pop-up окон в ущерб их качеству. Чтобы выбрать самый эффективный вариант, проводите тесты. Не размещайте всплывающие окна на каждой странице сайта.

3. Не делайте всплывающее окно не в том месте, не в то время

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

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

4. Персонализируйте свои всплывающие окна

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

Если у вас есть возможность, персонализируйте свои pop-up окна. Если вы владелец интернет-магазина, то выждите, пока клиент обозначит, что ему интересно, а затем сформируйте в соответствии с этим предложение.

5. Не скрывайте крестик для закрытия окна

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

6. Не будьте чрезмерно назойливыми, насколько это возможно

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

7. Будьте конкретны

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

8. Будьте лаконичны

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

9. Взвесьте все «за» и «против»

Создавайте pop-up окна только в случае отсутствия других вариантов.

9 причин, почему ваш pop-up не работает

У вас всплывающее окно «немобильно»

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

Вы не оценили работу плагина

Скорость реагирования вашего сайта уменьшается с каждым плагином. Если страница медленная, то трафика меньше, соответственно, меньше продаж. Скорость загрузки можно узнать на сервисах Sitespeed.ru или PageSpeed Insights. Помимо результата вам выдадут рекомендации по улучшению скорости сайта:

Но это не всё.

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

У вас некачественный дизайн всплывающего окна

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

Вы не придумали, а скопировали текст для всплывающего окна

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

У вас нерелевантный контент

Например, пользователь отправил товар в корзину, до завершения покупки осталось немного, и он почему-то закрывает вкладку… При этом выскакивает всплывающее окно, предлагающее книгу в электронном виде. Как вы думаете, это решение является правильным?

Другой пример. Человек читает ваш блог, при этом ничего не покупает. Можно ли предложить ему скидку на товар, как думаете?

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

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

Вы просите слишком много информации

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

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

В случае создания одношагового всплывающего окна лучше всего запрашивать только e-mail.

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

Вы не провели А/В-тестирование

Специалисты в сфере маркетинга знают, что результативное А/В-тестирование позволяет увеличить объем прибыли при существующем трафике.

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

sales-generator.ru

Введение

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

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

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

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

Вконтакте

Popup это

Facebook

Popup это

Twitter

Popup это

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

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

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

Решение

Способ 1

html

<div class="b-container">  Sample Text </div> <div class="b-popup">  <div class="b-popup-content">  Text in Popup  </div> </div> 

css

*{  font-family: Areal; } .b-container{  width:200px;  height:150px;  background-color: #ccc;  margin:0px auto;  padding:10px;  font-size:30px;  color: #fff; } .b-popup{  width:100%;  height: 2000px;  background-color: rgba(0,0,0,0.5);  overflow:hidden;  position:fixed;  top:0px; } .b-popup .b-popup-content{  margin:40px auto 0px auto;  width:100px;  height: 40px;  padding:10px;  background-color: #c5c5c5;  border-radius:5px;  box-shadow: 0px 0px 10px #000; } 

Результат:

Popup это

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

position:absolute; 

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

Способ 2

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

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

<div class="b-container">  Sample Text </div> <div class="b-popup">  <div class="b-popup-content">  Text in Popup  </div> </div> 

Css

*{  font-family: Areal; } .b-container{  width:200px;  height:150px;  background-color: #ccc;  margin:0px auto;  padding:10px;  font-size:30px;  color: #fff; } .b-popup{  width:100%;  min-height:100%;  background-color: rgba(0,0,0,0.5);  overflow:hidden;  position:fixed;  top:0px; } .b-popup .b-popup-content{  margin:40px auto 0px auto;  width:100px;  height: 40px;  padding:10px;  background-color: #c5c5c5;  border-radius:5px;  box-shadow: 0px 0px 10px #000; } 

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

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

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

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

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

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

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script>  $(document).ready(function(){  //Скрыть PopUp при загрузке страницы   PopUpHide();  });  //Функция отображения PopUp  function PopUpShow(){  $("#popup1").show();  }  //Функция скрытия PopUp  function PopUpHide(){  $("#popup1").hide();  } </script> 

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

<div class="b-container">  Sample Text  <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1">  <div class="b-popup-content">  Text in Popup  <a href="javascript:PopUpHide()">Hide popup</a>  </div> </div> 

Результат

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

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

Результат можно посмотреть тут: http://jsfiddle.net/p7NbX/15/

habr.com

Зачем нужны временные магазины, если можно открыть постоянный?

Плюсов на самом деле много.

1. Открыть Pop-up-магазин легче и дешевле, чем обычный

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

2. Pop-up-магазины легко подстраиваются под формат мероприятий

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

3. Pop-up-магазин — хорошая реклама для интернет-магазина

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

Как вариант, можно сразу предлагать покупателям сделать покупку в интернет-магазине со скидкой. Так адрес вашего магазина останется у клиента, а на почту придёт информация о заказе.

Если у вас интернет-магазин на платформе «Эквид», заказами можно управлять из мобильного приложения: обрабатывать, менять статус, делать скидки, следить за остатками, добавлять новые товары или удалять те, что закончились.

4. Pop-up-магазин подходит для старта новых проектов

Если вы только-только начали своё дело, Pop-up-магазин — хороший и недорогой способ рассказать об этом.

5. Вы получаете фидбек от клиентов

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

6. Вы можете менять место торговли хоть каждый день

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

lifehacker.ru

Будем делать 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 popUpDiv = document.getElementById(popUpDivVar);      popUpDiv_height=blanket_height/2-200;//200 это половина высоты popup окна      popUpDiv.style.top = popUpDiv_height + 'px';  }  function window_pos(popUpDivVar) {      if (typeof window.innerWidth != 'undefined') {          viewportwidth = window.innerHeight;      } else {          viewportwidth = document.documentElement.clientHeight;      }      if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.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

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

На 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Popup это 

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

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

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

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

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

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

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

Popup это 

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

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

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

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

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

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

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

Popup это

Подпишитесь на рассылку и получите 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 со сторонних сервисов (цель которого в том, чтобы приносить доход от рекламы владельцу сайта).

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

Popup это 

Резюме

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

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

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

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

myemarketing.ru

You May Also Like

About the Author: admind

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

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

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