Всплывающие элементы
Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии.
Как создать всплывающий элемент
Всплывающие элементы связаны с определенными элементами управления. Вы можете использовать свойство Placement для указания места отображения всплывающего элемента: вверху, слева, внизу, справа или в центре. Если выбрать полный режим размещения, приложение растягивает всплывающий элемент или размещает его в центре окна приложения. Некоторые элементы управления, например Button, содержат свойство Flyout, которое можно использовать для привязки всплывающего элемента или контекстного меню.
В этом примере создается простой всплывающий элемент, в котором отображается текст при нажатии кнопки.
Если элемент управления лишен свойства «Flyout», вы можете использовать присоединенное свойство FlyoutBase.AttachedFlyout. При этом также следует вызвать метод FlyoutBase.ShowAttachedFlyout для отображения всплывающего элемента.
В этом примере к изображению добавляется простой всплывающий элемент. Когда пользователь нажимает на изображение, приложение отображает всплывающий элемент.
В предыдущих примерах всплывающие элементы определялись внутренне. Вы также можете определить всплывающий элемент как статический ресурс и использовать его с несколькими элементами. В этом примере показано создание более сложного всплывающего элемента, в котором отображается увеличенный вариант изображения при нажатии его эскиза.
Стилизация всплывающего элемента
Для стилизации всплывающего элемента изменяется его свойство FlyoutPresenterStyle. В этом примере показан абзац создания программы-оболочки текста и делает блок текста доступным для программ чтения с экрана.
Изменение стиля всплывающих элементов для более наглядного отображения
Поведение с исчезновением
Всплывающие элементы можно закрыть с помощью таких действий исчезновения:
При закрытии касанием этот жест обычно не передается пользовательскому интерфейсу под элементом. Например, если за открытым всплывающим элементом отображается кнопка, первое касание приведет к закрытию всплывающего элемента, но кнопка при этом не будет активирована. Для нажатия кнопки нужно второе касание.
[! Примечание.] не следует указывать транзитный элемент перекрытия, который приводит к разрушительному действию. Пользователи привыкают к действиям незаметного исчезновения, которые активируют основной пользовательский интерфейс. Кнопки «Закрыть», «Удалить» или другие кнопки деструктивных действий не должны активироваться при исчезновении, так как это может стать причиной непредвиденного и ошибочного поведения.
В следующем примере будут активированы все три кнопки внутри FavoritesBar при первом касании.
Получение примера кода
Похожие статьи
Всплывающий элемент — это контейнер с возможностью исчезновения, который отображает в качестве содержимого произвольный пользовательский интерфейс. Всплывающие элементы могут содержать другие вложенные всплывающие элементы или контекстные меню.
Получение библиотеки пользовательского интерфейса Windows
Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы. Дополнительные сведения см. в разделе о радиусе угла. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows.
Выбор правильного элемента управления
Рекомендации по целесообразности использования диалоговых окон и всплывающих элементов (аналогичных элементов управления) приведены в статье Диалоговые окна и всплывающие элементы.
Что такое всплывающие окна
Создайте рассылку в конструкторе за 15 минут. Отправляйте до 1500 писем в месяц бесплатно.
Отправить рассылку
Всплывающее окно (pop-up) — это элемент интерфейса, который отображается поверх веб-страницы в браузере. Оно внезапно «всплывает» без запроса пользователя или появляется по клику.
Всплывающие окна: за и против
По данным Statista, в 2019 году примерно 25,8% интернет-пользователей блокировали рекламу на своих устройствах и, соответственно, блокировали и всплывающие окна. Ожидается, что востребованность блокировщиков будет только расти. Уже сейчас практически четверть поп-апов не достига ет своей аудитории.
Долгое время всплывающие окна слишком агрессивно использовали маркетологи. Например, окна открывались автоматически после закрытия, и их нельзя было убрать до выполнения целевого действия. Также раньше с помощью всплывающих окон мошенники внедряли вредоносные программы. Пример — вирус-вымогатель, полностью блокирующий экран.
Вредоносное всплывающее окно требует оплаты для восстановления доступа к системе
Зачем нужны поп-апы
Видов всплывающих окон очень много, и описать их все в одной статье просто невозможно. Поп-апы применяют для следующих целей:
Мы будем говорить о конверсионных всплывающих формах — тех, что предполагают совершить какое-то действие пользователям. Это может быть подписка на рассылку, заказ звонка или заполнение заявки.
Конверсионные поп-апы позволяют:
Ещё одно важное преимущество поп-апов — всплывающее окно для сайта несложно сделать самостоятельно с помощью специальных сервисов и плагинов. Об этом мы расскажем чуть ниже.
Типы поп-апов
Все поп-апы делятся на 2 основных вида: hello-board и page-stop.
Как использовать всплывающие окна
Поп-апы различаются по цели применения и условиям показа. Перечислим основные варианты их использования.
Приветственное окно (entry pop-up)
Окно-приветствие не даёт ознакомиться с контентом до своего закрытия
Окно с временной отсрочкой (timed pop-up)
Чтобы определить время отсрочки, изучите отчёты Google Analytics. Посмотрите, каково среднее время пребывания на странице и настройте появление pop-up примерно на 50% от этого времени.
Сколько времени люди проводят на странице. Отчет в Google Analytics. Считается, что если настроить время появления поп-апа на 50% от этого показателя, то окно не будет раздражать и сможет хорошо конвертировать
Окно по пролистыванию (scroll pop-up)
Руководствуйтесь статистикой о средних доскроллах страницы, чтобы определить лучшее время для показа поп-апа. Также можно использовать данные тепловизоров для сайтов (например, Вебвизор Яндекс.Метрики ), когда будете задавать условия для появления окна. С помощью тепловизоров можно посмотреть, как ведут себя посетители на сайте и до какого момента в среднем прокручивают страницу.
Вебвизор Яндекс.Метрики показывает видео поведения пользователей на странице
Окно прощания (exit pop-up)
Не лучший пример окна-выхода: не понятно, почему пользователь должен остаться
Окно со всплытием по клику (click pop-up)
Pop-up всплывает после клика по кнопке «Перезвоните мне»
Это только несколько возможных вариантов использования pop-up. Однако всплывающие окна можно применять и для иных целей. Например, после заполнения пользователем формы подписки можно показать pop-up с текстом благодарности. При выборе определённой услуги может всплывать окно с кратким рассказом о сути услуги и о текущих акционных предложениях.
Элементы всплывающего окна
Любая форма поп-апа состоит из трёх частей:
Правильная форма не оставляет вопросов о том, зачем с ней взаимодействовать
По закону в любой форме нужно брать согласие на обработку персональных данных клиентов. Визуально это может выглядеть как чекбокс со ссылкой на политику конфиденциальности. Запрашивая email для рассылки, обязательно просите подтвердить согласие на получение писем.
Нет каких-то стандартов по оформлению содержания pop-up. Есть лишь рекомендация: всплывающее окно не должно быть сложным для восприятия. Планируя создание pop-up, ответьте на следующие вопросы:
Как правильно оформить pop-up
При создании всплывающих окон главная цель — создать pop-up, который будет решать поставленные задачи и не будет раздражать.
Вот 5 правил хорошего поп-апа:
Практически в любом сервисе по созданию всплывающих окон все перечисленные требования можно настроить вручную. Если же вы ставите ТЗ на создание поп-апов верстальщику, не забудьте прописать это в требованиях.
При создании всплывающих окон нужно учитывать, что поп-апы — это форма рекламы. Поэтому, следует соблюдать требования Coalition for Better Ads — « Коалиции за лучшую рекламу », созданную ведущими международными торговыми ассоциациями и компаниями. Требованиями Coalition for Better Ads руководствуется Google Chrome, когда решает, нужно ли блокировать сайт и в каком виде его увидит пользователь.
Согласно Coalition for Better Ads нельзя:
Как создать pop-up
Для создания поп-апов можно использовать следующие способы:
Кроме того, создавать поп-апы можно с помощью различных плагинов. Например, с помощью плагинов поп-апов для WordPress:
В Unisnder все зарегистрированные пользователи могут бесплатно создавать всплывающие окна с формой подписки. Чтобы создать поп-ап, нужно:
В результате на вашем сайте появится всплывающая форма с настройками, которые вы задали в Unisender.
Как сделать поп-ап, который не раздражает, а приносит конверсии
Поп-апы — назойливая реклама или эффективный инструмент маркетолога? Сегодня рассказываю, чем они хороши и на какую конверсию можно рассчитывать, когда собираете с их помощью контактную базу. Узнаете, как правильно оформить поп-ап и как повысить эффективность такого всплывающего окна.
Что такое поп-ап
Поп-ап — это всплывающее окно (от английского pop up), которое в нужный момент появляется поверх страницы сайта. Пока пользователь не закроет это окно, он не сможет ничего делать на странице.
В основном поп-апы используют, чтобы собрать базу для email рассылки, но можно и покреативить: через всплывающее окно предлагать новый продукт или свежую статью, подписку на соцсети и так далее.
Преимущества поп-апов
По данным исследования Sumo, конверсия среднего поп-апа — 3,1%. Самые эффективные поп-апы показывают средний результат в 9,3%. Вполне неплохо: если на вашем сайте в месяц бывает 3 тысячи человек, то вы за это время получите примерно 93 новых подписчика рассылки!
Поп-апы можно гибко настроить под конкретный сайт и цель. Например, показывать:
Всплывающие окна перекрывают содержимое страницы и полностью забирают внимание.
Поп-ап — окно, которое всплывает поверх всего контента на странице. Пример с PressFeed
Структура всплывающего окна: как правильно оформить поп-ап
Разберемся по шагам, как правильно сделать поп-ап: из каких элементов он состоит и что учитывать в каждом из них.
Заголовок и текст
В поп-апе краткость — ваша лучшая подруга. Чтобы создать эффективный текст для поп-апа, сначала сформулируйте полезное для пользователя действие. Каким оно может быть:
Кратко опишите действие в тексте. Советую выделять первое предложение в качестве заголовка, ведь более крупный шрифт бросается в глаза.
Посмотрим на примере всплывающего окна от HubSpot. Заголовок выделен ярко, в нем использовано социальное доказательство. В тексте раскрыта польза предложения — получать экспертные фишки по маркетингу, чтобы стать лучшим маркетологом.
Хорошая подача пользы в тексте поп-апа от HubSpot
Изображение
Небольшое яркое изображение привлечет внимание и проиллюстрирует ваше предложение. Картинку хорошо добавлять, когда вы предлагаете лид-магнит: можно показать обложку книги или иллюстрацию к курсу. На мой взгляд, классные поп-апы с картинками делает TexTerra.
Яркая картинка в оформлении поп-апа на TexTerra
Уточняющие детали
Если вам нужно сегментировать нового подписчика, при создании поп-апа добавьте:
Не увлекайтесь уточнениями. Слишком сложная форма пугает, легче ее просто закрыть, чем заполнять. Эффективный поп-ап — простой. Завоюйте подписчика сразу, а затем сегментируйте его с помощью рассылок. Помогут в этом наши статьи: как правильно оформлять формы подписки и деликатно собирать данные о клиентах.
Например, в этом всплывающем окне явно лишнее поле «Телефон». Готова поспорить, что большая часть пользователей оставляет ненастоящий телефон, чтобы не получать SMS рекламу.
Необязательно сразу спрашивать и почту, и телефон — лучше оставьте минимум полей
Поле ввода почты
Сделайте удобное поле ввода почты в вашей всплывающей форме. Вот пример неправильного оформления всплывающего окна: поле крохотное и без подсказки-примера внутри. Да и в целом форма перегруженная, несбалансированная и с плохим текстом.
Так не надо делать поп-апы. Куча информации, слишком много акцентов, неаккуратная верстка, неинформативный текст
А вот правильное оформление всплывающего окна с удобным полем ввода почты, которое предлагает варианты доменов. Так меньше вероятность, что подписчик сделает опечатку в доменной части адреса. Обратите внимание, что польза вынесена в заголовок, а текст кратко и понятно описывает все детали предложения:
Удобное поле ввода почты подскажет, как должен выглядеть адрес. Пример поп-апа на блоге Ecwid
CTA кнопка
Формулируйте фразу на кнопке исходя из текста поп-апа, она должна быть его логичным продолжением:
В этом примере всплывающего окна заголовок с кнопкой «дружат»: «Подписаться на блог — Подпишите меня».
«Подружите» по смыслу заголовок поп-апа и CTA кнопку, как это делает Instapage
Как формулировать эффективные CTA, в том числе для продающих поп-апов, читайте в статье на нашем блоге.
Как увеличить эффективность поп-апа
Маркетологи Sumo, об исследовании которых я упоминала выше, выделили три главных критерия, чтобы сделать поп-ап эффективным. Это подходящий контекст, правильный тайминг появления, простое и полезное предложение.
Контекст
Смысл в том, чтобы поп-ап подходил к контенту, который просматривает пользователь. Тогда гораздо выше шанс, что он заинтересуется. Как отмечает исследование Sumo, конверсия поп-апа в правильном контексте превысила 40%.
В карточке книги про личную эффективность предложите подписаться на новинки книг по бизнесу и саморазвитию. В новости про экономику предложите подписку на тематическую новостную рассылку. На странице статьи про автоматизацию маркетинга — скачать исследование по похожей теме.
Компания Sumo в статье про подкасты на тему ecommerce предлагает книгу о бизнесе:
Тема поп-апа должна подходить по смыслу к странице, где он показывается. Пример с сайта Sumo
Тайминг
Дайте время познакомиться с контентом, прежде чем врываться с просьбами и предложениями. Необязательно много: за 15-20 секунд человек уже прочтет заголовок страницы и пару первых абзацев и оценит качество материала. Поп-ап в правильном месте и в правильное время принес Sumo 38,4% конверсии.
Чтобы точно продумать тайминг появления эффективного поп-апа и охватить больше посетителей сайта, нужно узнать среднее время, которое они проводят на страницах. С этим помогут инструменты аналитики — Google Analytics или «Яндекс.Метрика».
Простота и польза
Не переборщите с количеством элементов и текста. Судьбу поп-апа определяют секунды: чем проще и полезнее будет ваше предложение, тем быстрее его можно прочитать и понять. Вот правильное оформление всплывающего окна от издания «Такие дела».
Поп-ап издания «Такие дела» содержит минимум элементов, но понятно объясняет пользу подписки и вежливо предлагает больше себя не показывать
Обратите внимание на интересную кнопку «Больше не показывать». Это хороший вариант не раздражать пользователей всплывающими окнами, если вы работаете с куками на сайте. Один раз отказался — больше не показываем.
Как правильно оформить поп-ап, чтобы не отпугнуть людей
Тут три типа поп-апов, которые раздражают. Читайте внимательно, чтобы ваши поп-апы не были такими :).
Попап-молния. Окно, которое появляется поверх контента страницы сразу при входе на сайт. Я даже не успела понять, что вы предлагаете, а вы уже хотите мой адрес? Такие окна я закрываю и больше не возвращаюсь на этот сайт. Дайте пользователям сначала оценить ваш контент, и если им понравится, поп-ап сработает эффективней. Они оставят адрес добровольно и будут рады вашим письмам.
Многослойные поп-апы. Таким грешат новостные сайты, которые зарабатывают на рекламе. На странице появляется миллион всплывающих окон: разрешите уведомления, подпишитесь на рассылку, посмотрите рекламный ролик. Все это надо закрыть, чтобы добраться до контента, а через минуту окно появляется снова. Спасибо, но я лучше пойду!
Поп-апы, которые появляются регулярно. Такие можно заметить, когда задерживаешься на сайте. Окно выскакивает каждые N минут, хотя пользователь каждый раз его закрывает. Показать поп-ап можно максимум два раза за один сеанс нахождения на сайте — на случай, если пользователь случайно закрыл окно и остался подольше, надеясь, что оно появится снова.
Что еще сделать, чтобы поп-ап был эффективным и дружелюбным:
Как сделать поп-ап в SendPulse
В редакторе SendPulse вы можете создавать все виды форм, которые понадобятся на сайте:
Покажу, как создать поп-ап в SendPulse. Заходим в раздел «Формы подписки», жмем «Создать форму подписки» и выбираем вариант «Попап-окно». Можно использовать готовые шаблоны, изменяя их под свой вкус, или создать форму с нуля. На последнем этапе нужно выбрать адресную книгу, куда будут попадать данные из формы.
Первые шаги к созданию поп-ап формы в SendPulse
Теперь наполняем свою форму нужными элементами: полями, чекбоксами, радиокнопками, CTA кнопкой. Каждый элемент можно настроить в панели справа:
Настройка внешнего вида поп-ап формы
Когда внешний вид формы готов, перейдем к настройкам окна. Жмем на кнопку «Опции формы» вверху справа и последовательно заполняем все нужные поля.
Здесь мы настраиваем:
Обратите внимание, что на этом этапе можно изменить тип формы и вместо поп-апа выбрать встроенную или плавающую форму. Подробнее об этих типах вы можете прочитать в статье «Создаем форму подписки, как у известных брендов».
Настройка появления формы, подтверждающих окон и писем, статистики
Чтобы сделать эффективный поп-ап, не нужно быть крутым дизайнером или маркетологом 80 lvl. Делайте форму простой и понятной, показывайте ее в уместном контексте. Предлагайте полезные вещи и не будьте назойливыми. Остальное за вас сделает SendPulse :).
Рассказываю, как делать по-настоящему крутые email рассылки. Помогаю найти баланс между заботой о клиенте и успешными продажами.
Способы создания окон PopUp
Введение
В данном уроке я не открою тайну для матерых верстальщиков и гуру css, но данная статья будет полезна начинающим. именно здесь вы сможете узнать, как создавать всплывающие окна поверх всего сайта.
Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.
Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.
Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.
Вконтакте
Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.
Постановка задачи(ТЗ)
Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.
Решение
Способ 1
Результат:
Очень часто предлагают использовать:
Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.
Способ 2
Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.
Html (без изменений)
Результат аналогичный
Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.
Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.
Добавление магии на Jquery
Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.
Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:
Также необходимо обновить Html:
Результат
Теперь при загрузке страницы всплывающее окно PopUp скроется.
Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.