Формы поп-ап: 10 проблемных тенденций и альтернатив

Дата публикации: 05.08.2024

 

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

 

В этой статье рассмотрим:

 

Виды форм поп-ап

Проблемные формы поп-ап и альтернативные решения

Выводы

 

 

 

 

Виды форм поп-ап

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

 

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

 

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

 

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

 

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

 

 

Проблемные формы поп-ап и альтернативные решения

Рассмотрим 10 пунктов.

 

1. Форма, которая появляется перед загрузкой страницы

 

Не показывайте поп-ап до того, как пользователи зашли на сайт. Это очень раздражает. 

 

Что сделать вместо этого? 

 

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

 

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

 

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

 

2. Модальная форма, которая появляется сразу после входа на страницу

 

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

 

Что сделать вместо этого? 

 

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

 

Ненавязчивая немодальная форма в почтовом сервисе Gmail появляется после того, как пользователь начнет взаимодействие с папкой «Входящие», а не сразу после входа в систему. Источник

 

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

 

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

 

Что сделать вместо этого? 

 

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

 

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

 

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

 

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

 

Если попросить отзыв слишком рано, есть риск не получить его вовсе:

 

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

 

Что сделать вместо этого? 

 

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

 

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

 

Источник

 

5. Поп-ап с просьбой оставить отзыв во время выполнения важных задач

 

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

 

 Приложение United показывает модальную поп-ап-форму (оверлей) во время выполнения важной задачи — получения посадочного талона. А это плохая идея. Источник

 

Что делать вместо этого?

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

 

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

 

Еще один хороший пример: 

 

Компания British Airways разместила кнопку «Оставить отзыв» в правой части страницы. Источник

 

6. Появление нескольких форм поп-ап одновременно

 

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

 

Что делать вместо этого?

 

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

 

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

 

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

 

А вот хороший пример, как решить подобную задачу: 

 

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

 

7. Модальный поп-ап, который появляется перед переходом пользователя на внешний сайт 

 

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

 

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

 

Источник

 

Что нужно сделать вместо этого?

 

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

 

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

 

8. Модальная поп-ап-форма, которая прерывает доступ к контенту 

 

Если модальный поп-ап появляется сразу, как только пользователи загрузили статью или другой объемный контент (например, то, что находится в разделах «О нас» или «Новости»), создается впечатление, что им хотят ограничить доступ к этому контенту.

 

Мобильное приложение CNN показало модальную поп-ап-форму (оверлей), когда пользователь перешел на страницу, чтобы прочитать статью. Сделать это оказалось проблематично, поскольку пользователь не был подписан на новостную рассылку CNN. Источник

 

Что можно сделать вместо этого?

 

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

 

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

 

9. Модальные поп-ап-формы для информирования о GDPR и файлах cookie

 

Не стоит использовать модальные поп-ап-формы для передачи важной информации, связанной с GDPR или использованием файлов cookie.

 

Что делать вместо этого?

 

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

 

NNgroup.com использует немодальную поп-ап-форму (оверлей) с понятными формулировками об использовании файлов cookie. Подробно описывается, для чего собираются данные пользователей и как они будут использоваться. Источник

 

10. Модальные поп-апы, которые переводят в другие каналы без указания конкретной выгоды

 

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

 

Что можно сделать вместо этого?

 

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

 

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

 

Рассмотрим более удачный пример:

 

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

 

Выводы

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

 

Подытожим наши советы: 

 

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

 

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