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

Pop-up: что это, зачем бизнесу и какие бывают всплывающие окна

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

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

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

Что такое попапы и их польза для бизнеса

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

Пример Pop up window

Зачем нужны попапы:

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

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

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

Донесение информации. Pop up это способ рассказать об изменениях в работе компании, технических работах на сайте и так далее. С попапом информация точно дойдёт до клиентов, а компания не получит негатив от тех, кто «ничего не знал» про изменения.

Проведение опросов и тестов. Через поп ап окно делают A/B-тестирование вариантов офферов, дизайна рекламы и так далее. Также через всплывающие окна проводятся опросы.

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

Как создать попап правильно

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

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

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

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

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

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

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

Умеренность. Не стоит «доставать» пользователя разными попапами каждые несколько секунд и на каждой странице.

Универсального решения для времени, оформления и размещения попапов нет. Тестируйте, тестируйте и ещё раз тестируйте.

Какие бывают pop-up

По расположению различают всплывающие окна, которые появляются:

• в центре страницы (закрывают весь экран или только часть);
• расположены сбоку и следуют за прокруткой;
• сверху и снизу (часто в виде небольшой полоски).

Попап на всю страницу

Попап сбоку страницы

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

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

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

Примеры pop-up

Промо

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

Простая попап-полоска с общей информацией о скидках

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

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

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

Информация о доставке в попап

Рекламные popup могут предлагать конкретный продукт. Так онлайн-кинотеатр рекомендует посмотреть фильм, а для этого нужна будет подписка.

Рекомендация конкретного продукта в pop-up окне

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

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

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

Попапы с лид-магнитами

Дарят бесплатный материал за контакты пользователя. Такой приём повышает показатель подписки в среднем на 155%.

Предложение бонуса в попап-окне

Или бесплатные шаблоны для письма, сайтов, чек-листы, книги и так далее.

Бесплатный шаблон для письма при оставлении email-адреса

Даже программа развития подойдёт для лид-магнита.

Программа развития в pop-up окне

Или готовые комплекты игр. Небанальность — плюс для лид-магнита.

Небанальный лид-магнит в попап окне

Подарить пробный период — тоже вариант получить контакты пользователя.

Предложение попробовать бесплатный период

Вместо контента используют бесплатное мероприятие. Ограничение по времени получения бонуса замотивирует зарегистрироваться быстрее.

Информация о бесплатном мероприятии в pop-up окне

Опросы

Используют для изучения аудитории или как приём для вовлечения.

Так ненавязчиво «Почта России» предлагает пройти опрос в попапе сверху страницы. Такое окно появляется в первые секунды посещения сайта.

Предложение пройти опрос в попап окне

А это пример опроса для вовлечения. Сначала в попапе появляется вопрос.

Информационные

Рассказывают об изменениях в работе компании, доставки, технических работах и прочем. Сюда можно отнести отзывы — редкий и оригинальный приём. Например, попап с видеоотзывом.

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

Ограничения по возрасту в попап-окне

Подписка на рассылку

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

Подборка статей из блога в обмен на email-адрес

Предложение рассылки со скидками в pop-up окне

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

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

Подписка необязательно должна быть на email-рассылку. Иногда попап ведёт на другие ресурсы. Например, в Telegram-канал бренда.

Pop-up предлагает подписаться на telegram-канал бренда

Запрос звонка

Такие попапы «хватают» клиентов сразу. С одной стороны, собирают контакты, а с другой — облегчают путь клиента: не всем комфортно звонить первыми.

Запрос на звонок в попап окне

Удобно, когда указано время, через которое поступит звонок.

В попапе указали время поступления звонка

Pop-up окна в Altcraft Platform

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

Редактор pop-up в Altcraft Platform

Pop-up окно создаётся в визуальном редакторе. Перейдите в раздел «Веб-слой», выберите «Попапы» и создайте новый. Вам будет доступно несколько типов попапа:

1. Модальное окно. Появляется в центре экрана и привлекает внимание пользователя. Как правило, нужно для сбора email адресов.

Создание модального окна в Altcraft Platform

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

Создание плавающей панели в Altcraft Platform

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

Создание выпадающего окна в Altcraft Platform

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

Создание полноэкранного типа попапа в Altcraft Platform

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

В разделе «Действия» настраивается импорт пользователей, заполнивших форму попапа, в базу профилей.

Код готового поп-апа вы можете разместить на страницах сайта самостоятельно либо более простой вариант — использовать Tag Manager.

В Altcraft Platform доступен раздел аналитики попапов

Резюме

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

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

Подписывайтесь на наш Telegram-канал. Там вы найдёте самые интересные тренды и новости в сфере digital-маркетинга и технологий. Подписывайтесь и будьте в теме вместе с нами!

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

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

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

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

При нажатии на кнопку Настройки в информационной панели или соответствующий значок в адресной строке появляется меню со следующими пунктами:

• Разрешить/Заблокировать всплывающие окна для адрес веб-сайта>
• Управление настройками всплывающих окон…
• Не показывать это сообщение при блокировке всплывающих окон
• Показать веб-адрес всплывающего окна>

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

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

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

1. На Панели меню в верхней части экрана нажмите Firefox и затем выберите Параметры или Настройки в зависимости от вашей версии macOS. Нажмите кнопку меню и выберите Настройки .
2. Выберите панель Приватность и защита .

• Прокрутите до разделаРазрешения.

1. • Снимите флажок рядом с Блокировать всплывающие окна, чтобы полностью отключить блокировку всплывающих окон.
   • Щёлкните по кнопке Исключения… справа от Блокировать всплывающие окна, чтобы открыть диалоговое окно для выбора сайтов, которым разрешено отображать всплывающие окна.

   

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

• Введите или вставьте адрес или веб-сайт и щёлкните по кнопке Разрешить , чтобы добавить его в список сайтов, для которых разрешены всплывающие окна.
• Выберите веб-сайт в списке и щёлкните по кнопке Удалить веб-сайт , чтобы удалить его из списка исключений.
• Щёлкните по кнопке Удалить все веб-сайты , чтобы удалить все веб-сайты из списка исключений.

Щёлкните по кнопке Сохранить изменения , чтобы применить ваши изменения.

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

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

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

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

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

1. На Панели меню в верхней части экрана нажмите Firefox и затем выберите Параметры или Настройки в зависимости от вашей версии macOS. Нажмите кнопку меню и выберите Настройки .
2. Выберите панель Приватность и защита и перейдите в раздел Разрешения.
3. Убедитесь, что отмечен флажок Блокировать всплывающие окна поставлен.
4. Справа от надписи Блокировать всплывающие окна нажмите кнопку Исключения. . Откроется диалоговое окно со списком сайтов, которым разрешено отображать всплывающие окна.
5. Если сайт, который открывает всплывающие окна, находится в этом списке, выберите его и щёлкните по Удалить веб-сайт .
6. Нажмите Сохранить изменения , чтобы сохранить изменения.
7. Закройте страницу Настройки . Любые внесённые изменения будут сохранены автоматически.

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

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

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

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

Опросы Mozilla

При посещении веб-сайта Mozilla вы иногда можете увидеть всплывающее окно с просьбой принять участие в опросе. Единственная сторонняя компания, которую Mozilla использует для проведения опросов — Alchemer (бывш. SurveyGizmo). Она была проверена командами наших юристов и специалистов по приватности. Firefox не блокирует такие всплывающие окна.

Эти прекрасные люди помогли написать эту статью:

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

#9 – Всплывающие окна (alert, prompt, confirm)

В языке JavaScript есть несколько встроенных функций, что обеспечивают создание всплывающих окон. За урок мы рассмотрим три функции, что предоставляют возможность реализации всплывающих окон с разным набором действий. Мы изучим методы: alert, confirm и prompt.

Видеоурок

Для работы с пользователем в JavaScript предусмотрено несколько интерактивных функций:

• функция alert() позволяет выводить информацию во всплывающем окне;
• функция confirm () позволяет спрашивать соглашение во всплывающем окне;
• функция prompt() получает данные от пользователя во всплывающем окне.

Функция alert позволяет вывести какую-либо информацию во всплывающем окне в браузере. К таким окнам нельзя добавить стили и разукрасить их.

alert("Просто вывод информации");

Тест функции alert

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

Функция confirm открывает всплывающее окно с определенным вопросом и двумя кнопками: Ок и Отмена . Полученные данные из окна можно проверить в условном операторе и в зависимости от них выполнить код.

Пример вызова окна:

var result = confirm("Вы согласны с confirm?"); // Если ок, то result будет true // Если отмена, то result будет false

Тест функции confirm

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

Метод prompt получает информацию от пользователя. Полученные данные можно поместить в переменную.

var info = prompt("Сколько вам лет?", 25); // Второй параметр это значение по-умолчанию // Его можно и не добавлять

Тест функции prompt

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

Весь код будет доступен после подписки на проект!

Всплывающие окна: 10 проблемных тенденций и их альтернативы

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

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

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

1. Имеет ли пользователь возможность взаимодействовать с остальной частью страницы:

• Модальный попап: содержимое на странице недоступно для пользователя до тех пор, пока он не будет явно взаимодействовать с оверлеем.

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

2. Затемнён ли фон:

• Если фон затемнен, всплывающее окно называется лайтбоксом.

• Специального названия для случая, когда фоновое содержимое визуально не затемнено, не существует.

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

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

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

Распределение попапов: Не показывать до взаимодействий пользователя с сайтом или в процессе выполнения задач.

1. Отображение всплывающего окна до загрузки содержимого главной страницы: Независимо от используемого варианта, никогда не показывайте оверлей, пока пользователи не нашли необходимую для себя информацию на вашем веб-сайте или в приложении. Эта тенденция очень навязчива, потому что ещё до того, как попасть на страницу, пользователь видит раздражающее окно. Всплывающие окна, которые появляются перед загрузкой страницы, заставляют сайт выглядеть ужасным, а пользовательский интерфейс — безумным. Кроме того, сайты, которые игнорируют чрезмерное использование попапов, рискуют получить низкий рейтинг в результатах поисковых систем, поскольку Google наказывает сайты, которые используют методы, делающие контент менее доступным для пользователей, особенно на мобильных устройствах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

British Airways показывает кнопку обратной связи на правой стороне всех своих страниц.

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

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

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

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

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

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

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

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