Главное Свежее Вакансии Образование
225 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Что нужно знать о всплывающем окне чтобы повысить его конверсию и как мы воспользовались этими знаниями

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

b_58b18e934967c.jpg

Основа использования pop-up окон проста: происходит прерывание процесса контакта посетителя с сайтом, взаимодействие его с вашим сообщением и затем все снова идет своим чередом. Мы изучили разные исследования и провели опрос среди наших клиентов. И получили интересную картину. Из опроса выяснили, что 84% они раздражают, но при этом разработчики, а наши клиенты к ним и относятся, готовы их использовать. Про исследования стоит поговорить отдельно.

Что мы узнали

Прежде чем рассматривать все причины, почему всплывающие окна так часто оказываются в списках «наиболее ненавистных элементов пользовательского интерфейса», нельзя игнорировать их позитивное воздействие. На сервисе Justinmind провели онлайн-опрос «Помогают ли всплывающие окна вернуть посетителя?» 21% респондентов ответили утвердительно против 23%, которые крайне негативно к ним относились. 56% респондентов нейтрально настроены. b_58b187398011d.jpg

Нам встречались разные результаты. Например, Appsumo утверждают, что их плагин ListBuilder помог сайтам, используя виджет, собрать 110313 сообщений электронной почты в течение 30 дней. Стивен Макдональдс в User Testing.com идентифицирует свои всплывающие окна, как «третий по величине генератор лидов на сайте». В свою очередь Nielsen Norman Group во главе с Якобом Нильсенем называют их убогими шаблонами, которые используют в стиле «Пожалуйста, не уходите!» и утверждают, что на профессионально созданном сайте их быть не должно. В NNGroup считают, что всплывающие окна нарушают доверие пользователя к вашему сайту.

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

  1. Вовремя появляется.
  2. Имеет броский интересный заголовок.
  3. Предлагает то, от чего невозможно отказаться.
  4. Имеет кнопку «Закрыть» в привычном виде и месте.

То есть, главное в окне – его содержание. Логично, не правда ли? В опросе Justinmind респонденты отметили, что модальные всплывающие окна могут иметь важное значение, если:

  • содержат подсказки;
  • являются руководством для совершения сложных действий или объяснения как действовать дальше;
  • предоставляют необходимую информацию.

b_58b187804fb68.jpg

Согласно статистике 70% американских пользователей раздражают всплывающие окна с рекламой. Конечно, не все всплывающие окна - рекламные, некоторые имеют цель и разумный контент. Как указывает дизайнер Justinmind: «они идеальны, если вы хотите показать адекватный контент, связанный темой с основной страницы, сохраняя при этом пользователя на той же странице. И для дизайнера они являются отличным способом добавить целевое значение в пределах уменьшенной площади».

b_58b187be46c93.jpg

Какое окно снижает конверсию:

  • Сливается с фоном.
  • Имеет некорректный текст или текст с ошибкой.
  • Всплывает в первые 5 секунд нахождения на сайте.
  • Закрывает все окно.

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

Что делать?

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

b_58b187ec5152c.jpg

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

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

Pop-up в PIXLI – какими они должны быть?

Первое требование – простота создания. Для сложных окон есть возможность внедрения кода JavaScript на сайт. Можно использовать плагины JQuery и т.п. Весь процесс создания «родного» окна в редакторе должен занимать два, три, максимум четыре шага. Разработчик уделяет основное внимание содержанию окна, а не его настройкам.

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

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

b_58b18e5dd9d55.jpg

Что у нас получилось

Создать сайт с pop-up окном вы можете попробовать здесь. Всплывающее окно в PIXLI:

  1. Создается в четыре клика.
  2. Вызывается при нажатии на кнопку.
  3. Выглядит как оверлей.

Для создания размещаем область. Только область может быть всплывающим окном. И указываем для нее тип «Всплывающее окно». В редакторе вы сможете ее видеть и редактировать, но при просмотре страницы эта область отображаться не будет.

b_58b18875424fc.jpg

Размещаем на сайте кнопку и настраиваем ее.

b_58b1888d67be9.jpgОкно готово. Пока оно пустое и выглядит вот так.

b_58b188a8bb9f5.jpgРазместите в области блок - вам остается только заполнить его контентом, который повысит конверсию вашего сайта!

______________________________________________________________________

Материал создан агентством контент-маркетинга Текстотека.

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

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.