Юзабилити

Эффективные и актуальные всплывающие окна: 9 рекомендаций

Автор: Денис Давыдов09.09.2015

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

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

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

Один из самых известных и красноречивых примеров, подтверждающих исключительную ценность всплывающих окон – это оптимизация сайта WPBeginner, чьи маркетологи разработали всплывающее окно, которое демонстрировалось посетителю в том момент, когда он собирался уйти с сайта (о чем свидетельствовал ряд характерных действий, включая движение курсора). В результате количество подписчиков сервиса выросло на 660% всего лишь за один месяц. Показатели действительно впечатляющие – после внедрения на сайт всплывающего окна количество подписчиков в сутки изменилось с 70-80 до 445-470 пользователей. Стоит ли после таких примеров сохранять предубеждения на счет всплывающих окон?

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

То самое симпатичное и простое всплывающее окно на сайте WPbeginner.com, обеспечившее феноменальную конверсию.

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

Как заставить всплывающие окна работать

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

  1. Дайте пользователю время и не будьте настойчивыми

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

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

  1. Сосредоточьте все внимание пользователя

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

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

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

Огромное всплывающее окно на kissmetrics.com и классическое затемнение оставшегося пространства.

  1. Правильно составленный заголовок

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

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

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

Подарок от Made.com в виде сертификата на €10 – достаточно весомая причина для того, чтобы указать свой email.

  1. Исчезающий текст – не лучшее решение

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

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

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

  1. СТА-элемент должен располагаться после текста

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

  1. Возможность легко закрыть окно

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

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

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

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

  1. Изучение аудитории, таргетинг и релевантность

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

  1. Всплывающее окно должно быть привлекательным

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

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

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

 

  1. Корректно работающий скрипт

Еще один нюанс, снижающий риск отказа – качественный скрипт всплывающей страницы, работающий быстро и корректно. Неуклюжее всплывающее окно, которое долго загружается – это весомая причина для того, чтобы незамедлительно покинуть сайт. Как правило, владельцы сайтов, желающие видеть на своих страницах всплывающие окна, обращаются к готовым решениям, которые предлагают такие сервисы как popupdomination.com, pippity.com, optinmonster.com и многие другие. Приобретая качественный поп-ап у опытных разработчиков, вы можете сэкономить деньги и время,  не подвергая своих пользователей негативному опыту, связанному с некорректно работающей всплывающей страницей.

Реакция на статью
поделюсь
0%
интересно
300%
полезно
100%
не уверен
0%
скучно
0%
где автор?
0%
Денис Давыдов
Всем привет! Я Денис Давыдов – автор статей о юзабилити, интерфейсах и интернет-маркетинге. Будучи энтузиастом в сфере электронной коммерции и UX, сотрудничаю с различными российскими компаниями, предоставляя качественный контент и публицистику для веб-проектов. Изучаю актуальную культуру и политику, пишу очерки по мотивам наиболее острых и любопытных феноменов современности.
Комментарии
Оставить отзыв

You must log in to post a comment