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

10 проблем попапов и как их решить

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

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

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

Взаимодействие с контентом на фоне всплывающего окна

• Модальное окно: пользователь не может взаимодействовать с контентом на фоне всплывающего окна
• Немодальное: пользователь может взаимодействовать с контентом на фоне всплывающего окна (например, выбирать ссылки или нажимать на кнопки), если оно остается видимым

Затемнение фона

• Если фон затемнён, всплывающее окно называется лайтбоксом
• Если нет, специального названия для всплывающего окна не существует

Хотя во многих случаях лайтбоксы считаются модальными окнами, это не так.

Анатомически модальные окна отключают весь контент на фоне, немодальные — дают пользователям возможность взаимодействовать с фоновым контентом, а лайтбоксы затемняют фоновый контент

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

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

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

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

Альтернатива попапу: Придержите представление контента во всплывающем окне, пока он не станет контекстно релевантным для пользователя. Используйте принцип взаимности: дайте посетителям ценность, прежде чем просить их о чем-либо, будь это запрос адреса электронной почты или действие по отклонению всплывающего окна. Проведите тестирование с пользователями, чтобы понять, какой контекст соответствует контенту, который вы планируете отобразить во всплывающем окне. Найдите лучший способ показа этого контента. Зачастую его можно разместить вне всплывающего окна. Единственный случай, когда допустимо отображение всплывающего окна до загрузки содержимого страницы — это когда ваш сайт обязан запрашивать у пользователей согласие на использование файлов cookie или подтверждение возраста. Хотя нам бы хотелось, чтобы ЕС и другие регулирующие органы приняли менее раздражающее отображение уведомлений, которые GDPR* и подобные регламенты требуют показывать.

*Примечание переводчика: GDPR (General Data Protection Regulation) — Общий регламент по защите данных

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

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

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

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

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

Запрос адреса электронной почты до начала взаимодействия

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

Например, одной женщине не понравилось, что когда она зашла на сайт Uncommon Goods, перед ней сразу открылось модальное окно. Оно содержало просьбу оставить электронную почту для предоставления ей доступа к секретным распродажам. Она сказала: «Меня раздражает, когда подобные вещи появляются сразу, как только я зашла на сайт и ещё ничего там не сделала. Откуда мне знать, хочу ли я подписаться на рассылку по электронной почте, если я только что пришла сюда? Я бы предпочла получить такой запрос немного позже».

Пользователя раздражал сайт Uncommon Goods. Как только она зашла на сайт, перед ней сразу появилось модальное окно с запросом адреса её электронной почты

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

Альтернатива попапу: Вместо того, чтобы показывать всплывающие окна с запросом электронной почты в самом начале, подумайте о том, когда пользователям будет удобнее оставить свой e-mail. Например, они просматривают категорию, для которой у вас есть для них промокод. Или, может быть, они только что прочитали (или просмотрели) целую статью в блоге. Эти действия могут стать подходящими триггерами для появления ненавязчивого немодального оверлея. Разместите его в правом верхнем или нижнем углу и сделайте так, чтобы он занимал разумное количество экранного пространства. Предложите пользователям что-то ценное и осязаемое в обмен на адрес их электронной почты. Не ждите, что они так просто вам его дадут.

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

Просьба оставить отзыв до того, как люди сделали что-то на сайте

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

Получение содержательной обратной связи от пользователей в нужный момент позволяет понять, с какими трудностями и препятствиями они столкнулись. Но если вы попросите оставить отзыв слишком рано, вы рискуете не получить его в самый важный момент. Например, на сайте ATT.com участница исследования была расстроена тем, что модальное окно с просьбой оставить отзыв появилось в тот момент, когда она перешла к оплате счета. Она сказала: «Я бы оставила отзыв после оплаты счета, но меня раздражает это окно, ведь я еще ничего не сделала, чтобы дать обратную связь».

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

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

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

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

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

В приложении United модальное окно появлялось в самый важный для пользователя момент — в процессе получения им посадочного талона

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

Компания Nestle не использовала модальное окно с просьбой оставить отзыв, чтобы не отвлекать посетителей сайта, а включила ссылку для обратной связи в подвал сайта На сайте British Airways кнопка с надписью «Обратная связь» находится в правой части всех страниц

Отображение нескольких всплывающих окон подряд

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

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

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

Контекст всплывающего окна: не препятствуйте переходам на другие страницы и доступу к контенту

Показ модального окна перед переходом пользователя на новый поддомен или внешний сайт

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

Во время одного из сеансов юзабилити-тестирования перед участником, который искал работу на сайте HSBC, появлялось два разных модальных окна, которые предупреждали его о переходе на другой сайт. Чтобы выполнить задачу, ему пришлось посетить 3 отдельных сайта. Он сказал: «Ничего себе, меня постоянно перебрасывает на другие сайты, я даже не знаю, где я нахожусь. Если процесс приема на работу настолько сложный, то я не думаю, что это хорошее место. На сайте бардак, независимо от того, насколько красиво он выглядит».

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

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

Сайт Eli Lilly: Пользователям показывали информативную всплывающую подсказку, которая давала им понять, что они переходят на другой сайт. Подсказка помогала людям вспомнить, где они находятся и куда направляются

Приостановка доступа к контенту посредством модальных окон

Модальное диалоговое окно, которое появляется сразу после загрузки статьи или другого длинного текстового контента (например, того, который обычно находится на сайтах в разделах О нас или Новости), создает впечатление, что сайт закрывает доступ к этому контенту. В таком контексте модальное окно вызывает сильное раздражение, поскольку снижает доверие к сайту. Пользователь мобильного приложения CNN расстроился, когда сразу после перехода на статью, которую он хотел прочитать, перед ним появилось модальное окно. Он сказал: «Это выглядит подозрительно. Не спрашивайте мой e-mail и не просите подписаться на что-либо прямо сейчас».

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

Альтернатива попапу: Не отвлекайте пользователей от просмотра контента. Замените всплывающее окно еле заметным, ненавязчивым баннером в верхней части страницы. Эта альтернатива всплывающему окну позволит пользователю самостоятельно решить, хочет он подписаться на рассылку новостей или нет, и не помешает ему выполнять основную задачу — сканировать контент.

На сайте журнала Conde’ Nast Traveller предложение подписаться на рассылку выглядело как ненавязчивый баннер, который находится под навигацией. Такой дизайн позволял заинтересованным пользователям подписаться на рассылку, но не отвлекал тех, кто просто хотел изучить контент сайта

Контент в попапе: модальное окно не доносит информацию до пользователя

Использование модальных оверлеев для уведомлений о GDPR и cookie

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

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

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

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

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

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

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

На сайте Wayfair пользователей отвлекало появление модального окна. Оно содержало призыв загрузить мобильное приложение компании. Пользователи предполагали, что им придется приложить много усилий, чтобы начать выполнение задачи заново на другом канале и при этом они не получат ощутимой выгоды Сайт Macy’s — пример хорошей работы по призыву загрузки мобильного приложения с мобильного сайта. Немодальное окно в нижней части страницы содержит стимул для перехода на канал в виде скидки 25% на первый заказ в приложении и отображает рейтинг приложения

Заключение

Поп, поп, поп не знает слова стоп. Это неприемлемый опыт взаимодействия с пользователями, поэтому прекратите использовать попапы.

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

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

Способы создания окон PopUp

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

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

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

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

Вконтакте

Facebook

Twitter

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

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

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

Решение

Способ 1

Результат:

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

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

Способ 2

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

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

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

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

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

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

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

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

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

Результат

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

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

Всплывающие окна (поп-апы): какими они должны быть, и какие есть альтернативы

Анна Черная Редакция «Текстерры»

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

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

Если хотите, чтобы все вас любили, не ставьте поп-апы

В 2017 году опубликовали исследование о самых раздражающих видах рекламы, в котором участвовали 452 взрослых респондента из США. Им показали 23 варианта рекламы для компьютеров и мобильных устройств. Участникам опроса нужно было ответить, какие варианты им понравились, а какие – нет.

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

Источник: nngroup.com. Модальные окна – самый раздражающий вид рекламы в интернете

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

Если не хотите, чтобы вашу рекламу блокировал Google Chrome, не ставьте поп-апы

Либо делайте это очень осторожно.

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

Всего Google вместе с Coalition for Better Ads (CBA) выявил 12 видов некачественной рекламы.

• рекламные всплывающие окна;
• объявления с обратным отсчетом времени, блокирующие немедленный доступ к сайту;
• видео с автоматическим воспроизведением и звуком;
• баннеры, закрепленные внизу страницы, которые занимают более 30 % экрана.

На смартфонах и планшетах:

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

Аналогичное исследование в декабре 2017 года опубликовал комитет по улучшению рекламы IAB Russia. Рекомендации использует «Яндекс.Браузер».

Поп-апы и другие виды назойливой рекламы с сайтов уже убрали Forbes, Los Angeles Times, Chicago Tribune, In Touch Weekly и другие англоязычные сайты. У них можно подсмотреть, что точно допускает к показу Chrome.

Люди готовы терпеть поп-апы, если сайт приносит пользу

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

В январе я проводила небольшой опрос про отношение пользователей к всплывающим окнам, в нем поучаствовали 109 человек. В первом вопросе нужно было оценить личную ненависть к поп-апам по 10-балльной шкале, где 1 – «люблю поп-апы», а 10 – «ненавижу больше всего на свете». Средний балл – 7,6, а десятку поставили 30 % респондентов. То есть 30 % – это люди, которые с наибольшей вероятностью перестанут посещать сайт, где часто всплывают окна.

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

1. Всегда. Я люблю поп-апы/я часто узнаю важные моменты именно из поп-апов
2. Всегда. Я не люблю поп-апы, но понимаю, что сайт на этом зарабатывает
3. Когда мне хотят дать что-то бесплатно (все равно, что)
4. Когда мне хотят бесплатно дать что-то полезное
5. Когда мне хотят дать скидку
6. Когда меня хотят предупредить, что товар быстро раскупают, или срок акции заканчивается
7. Когда информационный сайт или СМИ предлагает оформить подписку
8. Когда сайт хочет, чтобы я дал оценку услуге/товару/статье/ответу техподдержки
9. Когда сайт хочет, чтобы я ответил на вопрос или заполнил опрос
10. Когда сайт хочет прорекламировать выгодное предложение, и оно относится к теме, которую я смотрю
11. Когда сайт хочет прорекламировать выгодное предложение, но оно не относится к моей теме
12. Когда сайт высвечивает проплаченную рекламу партнеров
13. Никогда

В вопросе про действия, на которые подтолкнул поп-ап, 8 % респондентов признались, что делали заказы. 16 % готовы делиться с поп-апом своими контактами или заполнить опрос. Так они попадают в базу потенциальных клиентов.

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

Как сделать поп-ап бесплатно: быстрый и простой способ

Что учитывать при создании всплывающих окон

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

1. Проверьте поп-ап на соответствие указаниям Coalition for Better Ads

На них теперь опирается Google Chrome, когда решает, показывать рекламу пользователю или нет. Если ваша реклама не вписывается в стандарты, Chrome может заблокировать всю рекламу на сайте, включая допустимую. Данные «Яндекс.Радара» на начало 2018 года говорят, что в России Chrome используют 40 % пользователей. Поэтому игнорировать нововведения невыгодно.

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

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

Можно показывать, когда пользователь:

• решил покинуть страницу; например, вводит другой адрес в строке (но не мешайте ему это сделать легко);
• неактивен больше 30 секунд на странице, где нет видео;
• подошел к концу первой статьи;
• перешел на другую вкладку, а затем вернулся на ваш сайт.

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

2. Сделайте текст на поп-апе максимально коротким и емким

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

Пример: Lemonstand. Перевод: Расширенный маркетинг электронной коммерции. Бесплатная электронная книга. Продвинутые советы по электронной коммерции для создания лучшей стратегии, увеличения количества подписчиков, повышения коэффициентов конверсии и другое

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

При регистрации на конференцию в 2017 году сайт IGCONF предлагал получить бесплатно видеозаписи прошлого года

Чтобы избавиться от лишних слов на поп-апе, можете прогнать текст через «Главред». Так вы освободите место для самого важного.

3. Будьте вежливы и не держите пользователей за идиотов

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

Пример: Popudomination. Перевод: Вы бы хотели более высокие конверсии? Я могу вам помочь. Да, я хочу доминировать с помощью Поп-апов / Нет, я предпочитаю сидеть без подписчиков

Даже если на вашу психологическую уловку попадутся, это не лучшее начало сотрудничества.

4. Если у пользователей стоят ад-блоки, не старайтесь их обойти

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

5. Не перегружайте сайт поп-апами

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

Когда на каждом шагу преследует однотипная реклама, это раздражает. Запоминайте действия пользователя и не показывайте повторы. Если на рассылку уже подписались, то не нужно предлагать это делать еще раз. Чтобы избежать дублей, придется работать с cookie.

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

6. Создавайте поп-апы, которые сочетаются с сайтом

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

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

Если боитесь, что окно сольется с остальной информацией, просто затемните или высветлите фон. Когда booking.com предупреждает пользователя, что он может упустить выгодное предложение, он показывает поп-ап в одном стиле с сайтом, а фон затемняет:

7. Проверьте на себе

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

Популярный спортивный портал sports.ru предлагает мне поделиться с миром тем, что я не смотрела фильм «Движение вверх»

8. Если собираете данные о пользователе, не забывайте предупреждать об обработке данных

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

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

9. Не прячьте крестик и кнопку «закрыть»

Без крестика и кнопки «закрыть» окно как бы намекает: «Делай, что мы написали, или умри». Не надо так.

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

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

10. Говорите правду

Не ставьте в окно счетчик «акция закончится через 50. 49. 48 секунд», если акция продлится еще год. Самое ужасное, если при перезагрузке страницы отсчет запустится заново.

11. Когда информации много, делайте два поочередных поп-апа

Если вы понимаете, что сложно вместить предложение в несколько строк, а еще надо бы добавить форму для сбора контактов, разделите все на два окна. Пример Convince&Convert:

На первом окне пользователь решает, нужна ли ему книга

На втором пользователь вводит электронную почту

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

12. Дайте человеку понять, что его действия с поп-апом сработали

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

Загадочное молчание – не то, чего ждет пользователь. Поп-ап должен подтвердить, что все хорошо: письмо отправлено, опрос заполнен, личные данные получены. Можно обойтись фразой «Спасибо за. ». Но еще лучше объяснить человеку, что его ждет. Примеры:

• Мы отправили вам письмо на указанный адрес. Оно должно прийти в течение 10 минут.
• Спасибо! Мы позвоним вам в течение 5 минут, чтобы обсудить проект.
• Ваша скидка активирована. При оплате заказа с общей суммы мы автоматически снимем 10 %.
• Скачивание файла начнется через 10–15 секунд. Если скачивание не началось, нажмите на ссылку.

13. Проверяйте поп-апы на всех устройствах

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

Responsinator показывает, как сайт с поп-апом выглядит на айфоне. При прокрутке вниз показываются другие устройства. Каждый вид подписан внизу

В quirktools даже можно посмотреть, как сайт будет выглядеть на экране телевизора

14. Анализируйте результаты

Вы не сможете понять, получаете ли вы максимум конверсии от поп-апа или других инструментов, если вам не с чем сравнивать. Запускайте А/Б-тесты, меняйте поп-апы на другие виды рекламы и анализируйте результаты.

Чек-лист

Проверяем, все ли мы предусмотрели:

• доступный текст, который объясняет, что вы предлагаете и что вы хотите взамен;
• место для ввода контактов (если вы их собираете);
• кнопка с призывом к действию;
• крестик или кнопка «закрыть»;
• обратная связь на действие пользователя;
• информация об обработке персональных данных (если вы их собираете);
• поп-ап корректно отображается на всех устройствах;
• соответствует указаниям Coalition for Better Ads.

• строчка «не показывать больше»;
• информация о защите от спама;
• социальное доказательство (например, «нас читают уже 15 000 предпринимателей»).

Чем заменить классические поп-апы

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

1. Небольшие всплывающие окна, которые минимально перекрывают контент

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

Примеры. Окно может всплывать в любом месте и быть любой формы. Слева и наверху тоже можно

На десктопе проследите, чтобы они занимали не более 30 % от страницы, а в мобильной версии отключите. Добавьте в углу крестик или кнопку «закрыть».

Leadmachine: лаконичное предложение в одну строчку поставили сбоку. Оно не мешает пользователю читать статью

LaModa: предложение перекрыло чат-окно, но все еще не мешает смотреть сайт

Пример Airbaltic. В маленьком окошке предложение подписаться на рассылку и летать дешевле

2. Статичная строка вверху (hello-bar) или внизу страницы

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

• висеть на сайте сразу при открытии страницы;
• наезжать поверх на страницу;
• сдвигать контент вниз/вверх.

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

Примеры расположения строки

Не забудьте добавить крестик для закрытия и сделать строчку меньше 30 % от экрана.

Хороший вариант у «Лайфхакера». Полупрозрачная форма, которая наезжает сверху на контент. Ее можно удобно закрыть, нажав на крестик в правом верхнем углу:

3. Онлайн-чат

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

В «Текстерре» чат открывается автоматически. Если сотрудник на месте, он вам представится. Если никого нет, вы увидите приглашение отправить вопрос или отзыв. Ответ получите сразу, как появится кто-то из сотрудников

На сайте «Тинькофф» есть три варианта, как связаться с оператором. Пока не нажмете на кнопку, чат-окно не побеспокоит

4. Push-уведомления в браузере

Короткие всплывающие сообщения со ссылкой на сайт отправителя. Сообщения появляются поверх всех открытых окон. Это увеличивает переходы с уведомлений на сайт.

Так выглядит push-уведомление, которое приходит от сайта rg.ru

Ваши верные пользователи могут подписаться на них добровольно. Это обычная практика среди СМИ, блогов, интернет-магазинов и т. п.

Уведомления – отличная альтернатива рассылке. Получить разрешение от пользователя проще: чтобы подписаться через поп-ап на рассылку, человеку нужно ввести свой электронный адрес, а чтобы согласится на push – нажать одну кнопку. Настроить уведомления на сайте не сложно. Есть удобные сервисы.

Альтернативы поп-апам

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

1. Слайдер с предложениями

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

Пример: «Сбербанк». Главные предложения переключаются в верхней части сайта. Все крупным планом

2. Форма для сбора контактов и предложение, как часть страницы

Это лучшая альтернатива поп-апу, который вылетает при прокрутке страницы. Если вы и так уверены, что человек дойдет до этого момента, зачем бесить его поп-апом? Интегрируйте форму для подписки или предложение в страницу. Вот так сделали на сайте pushbooks:

Поставьте форму сбоку:

Предложите получить скидку или скачать приложение:

Пример Lamoda. Скидка и ссылка на скачивание приложения в центре страницы

Вместо формы сбора контактов дайте ссылки на соцсети и пригласите пользователя в «Телеграм». Так вы тоже останетесь с ним на связи.

Пример Digital Bandito. Вместе со ссылками владельцы сайта дают короткое описание выгоды, которую получает подписчик

3. Баннеры-небоскребы

Баннеры на всю длину или часть страницы (но не более 30 %). Обычно их ставят справа:

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

Пример: Ulmart. Информация на баннере дублируется. Клик в любом месте перенаправит пользователя на распродажу

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

В мобильной версии Ulmart баннера нет, но сайт встречает посетителя большим слайдером с информацией о распродаже

4. Нативная реклама

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

Пример Lowcarb.lv: в рецепт вставлены ссылки на продукты интернет-магазина

Пример The Village: информация о кафе в обзоре мест, где выпить кофе в турке

Выводы

• Если для вас важнее всего любовь пользователей, не ставьте всплывающие окна.
• Чтобы не попасть под блок Google Chrome, не используйте рекламу, которую пользователи считают излишне назойливой.
• Помните о пользователе. Ваш гость не любит поп-апы, но обрадуется, если получит что-то ценное.
• Тестируйте, не ограничивайтесь одним видом рекламы. Нельзя судить об эффективности, если не с чем сравнить. Экспериментируйте. Так вы найдете поп-ап или альтернативу, которая даст лучшую конверсию.
• Совмещайте на сайте 2-3 типа рекламы, но не увлекайтесь. Когда за внимание воюет сразу несколько кнопок и призывов, пользователь начнет волноваться и никуда не кликнет. Идеально, когда на странице человек видит только одно целевое действие.

• Главное: постарайтесь посмотреть на рекламу глазами пользователя, оцените полезность. Принудить человека совершить действие – не цель. Цель – заинтересовать и помочь сделать правильный выбор.

Немного доброй утопии:

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

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

win = window. open (url, name, params) , где:

• url – это адрес страницы, которая откроется в новом окне;
• Name – имя созданного окна. Может быть использовано для дальнейшей обработки в формах (параметр target );
• Params – строка параметров для нового окна. Их полный список можно узнать самостоятельно из документации по javascript.

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