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

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

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

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

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

И из этих двух взаимоисключающих фактов возникает вопрос: «Как так получается, что всплывающие окна настолько эффективная, и вместе с тем, самая ненавистная форма рекламы?»

Почему люди ненавидят всплывающие окна и как это исправить

Создание привлекательного текста

Заголовок

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

Тело

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

Дизайн

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

В этой статье описаны все настройки Mozilla Firefox, предназначенные для контроля над всплывающими окнами.

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

Всплывающие окна - это окна, появляющиеся автоматически без вашего разрешения. Они могут быть разными по размеру, но обычно не достигают размера всего экрана. Некоторые всплывающие окна появляются сверху окна Firefox (они называются pop-ups), другие могут появляться под окном Firefox (они называются pop-unders).

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

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

Когда вы щёлкаете по кнопке Настройки в информационной панели или значку в адресной панели, появляется меню со следующими опциями:

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

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

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

Для доступа к настройкам блокирования всплывающих окон:

Разрешить : Нажмите, чтобы добавить веб-сайт в список исключений. Удалить сайт : Нажмите, чтобы удалить веб-сайт из списка исключений. Удалить все сайты : Нажмите, чтобы удалить все веб-сайты из списка исключений.

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

Всплывающие окна не блокируются

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

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

Проверьте, включено ли блокирование всплывающих окон и распространяется ли оно на этот сайт

Всплывающее окно появляется после щелчка мышью или нажатия клавиши на клавиатуре

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

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

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

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

Всплывающее окно – первое знакомство

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

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

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

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

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

Всплывающие окна – технология расширения возможностей веб-приложения

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

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

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

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

Всплывающие окна: зло или благо – решать вам

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

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

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

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

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

Сведения, содержащиеся на этой странице, мы адресуем, прежде всего, пользователям Microsoft Internet Explorer 5.х и 6.х. - самых распространенных браузеров в сети Internet. Важно отметить, что наш сайт адекватно отображается и в других браузерах. Однако, на наш взгляд, сторонники Mozilla Firefox и Opera являются энтузиастами и знатоками передового программного обеспечения, а поэтому не нуждаются в советах по его настройке.

Всплывающее окно ("Pop-up") - это дополнительное окно браузера (как правило, по размеру меньше чем основное), появляющееся поверх или позади просматриваемого окна. Они могут открываться самопроизвольно при начале загрузки какой-либо из страниц посещаемого Вами сайта. Такой подход используется при рекламе товаров и услуг. Именно такие "pop-up" - окна многих раздражают . Другими всплывающими окнами пользователь может управлять сам - открывать и закрывать их. Например, можно щелкнуть по ссылке с небольшим изображением, чтобы увидеть его увеличенную копию в новом, всплывающем окне.

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

Браузер Internet Explorer из поставки Windows XP Service Pack 2 (SP2) позволяет предотвратить появление большинства окон, всплывающих поверх страниц во время работы в Интернете. При установке SP2 блокирование всплывающих окон в Internet Explorer включается и настраивается на средний уровень безопасности. Это означает, что заблокированы будут большинство автоматических всплывающих окон. Настройки по умолчанию блокирования всплывающих окон позволяют увидеть всплывающие окна, которые открываются, если щелкнуть ссылку или нажать кнопку на веб-узле. При блокировании всплывающего окна также будет раздаваться звуковой сигнал и появляться сообщение на панели информации. Можно настроить параметры, чтобы блокирование всплывающих окон работало так, как вам удобно.

Мы используем всплывающие окна для работы "Системы интерактивной помощи" и при построении нашего каталога продукции.

Стандартные настройки Microsoft Internet Explorer для управления всплывающими окнами (если не установлен Windows XP Service Pack 2)

Войдите в меню "Сервис" ("Tools") навигационной панели Microsoft Internet Explorer, а затем выберите пункт "Свойства обозревателя..." ("Internet Options...") .

Настройка Microsoft Internet Explorer для управления всплывающими окнами (если у Вас установлен Windows XP Service Pack 2) Войдите в меню "Сервис" ("Tools") навигационной панели Microsoft Internet Explorer, а затем выберите пункт "Свойства обозревателя..." ("Internet Options...") .

В Windows XP Service Pack 2 есть возможность разрешить всплывающие окна для отдельных сайтов .

Войдите в меню "Сервис" ("Tools") навигационной панели Microsoft Internet Explorer, а затем выберите пункт "Свойства обозревателя..." ("Internet Options...") .

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

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

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

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

Модальность

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

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

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

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

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

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

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

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

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

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

В заключение

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