8 принципов создания идеального попапа для интернет-магазина

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

Как найти золотую середину? Стоит ли вообще использовать всплывающие окна? Если да, то для каких целей? На эти вопросы мы ответим в статье.

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

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

Попапы помогают увеличить продажи, так как концентрируют внимание целевой аудитории в направлении конверсионного действия, что подтверждается множеством практических кейсов. В среднем, коэффициент конверсии подписки на email-рассылку посредством попапов составляет от 1,95% до 2,9%. Это означает, что из 100 человек, которые увидят всплывающее окно на вашем сайте, вы можете получить 2-3 адреса электронной почты.

Несомненно, есть и более впечатляющие примеры. Некоторым удавалось поднять продажи на 162% посредством попапов (случилось это, правда, в 2005 году). А в 2012 году один из клиентов AWeber в результате экспериментов со всплывающими окнами получил + 1,375% подписок.

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

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

Согласитесь, крайне нервирует, когда в процессе чтения статьи или скроллинга ленты вам «выпадает» попап, закрыть который становится задачей сродни поиску клада.

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

Один из секретов «мэтров копирайтинга» звучит как keep it simple, или чем проще, тем лучше. Это правило применимо и к попапам. Сделайте так, чтобы всплывающее окно выглядело лаконично, а посыл был читабельным. Добавьте одно изображение, небольшой текст, поле для ввода email-адреса и кнопку.

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

Когда в строке более одного поля для ввода, пользователю сложнее заполнять форму. По этой системе работают крупнейшие IT-гиганты, когда при регистрации вместо анкеты просят пользователя ответить, например, на один вопрос, ответ на который подразумевает простое «Да / Нет». Об этом расскажем в одной из следующих статей.

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

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

Один из секретов «мэтров копирайтинга» звучит как keep it simple, или чем проще, тем лучше. Это правило применимо и к попапам. Сделайте так, чтобы всплывающее окно выглядело лаконично, а посыл был читабельным. Добавьте одно изображение, небольшой текст, поле для ввода email-адреса и кнопку.

Вы спросите: а что если за это время пользователь решит покинуть страницу? В данном случае можно прибегнуть к такому типу всплывающих окон как exit-intent или попап выхода. Окно появляется, когда пользователь принимает решение покинуть страницу. Механизм отслеживает движение мыши посетителя, и когда курсор выходит за верхнюю границу страницы, отображает всплывающее окно.

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

То же самое касается tone of voice (тональность, которой придерживается бренд в коммуникации со своим потребителем). Тщательно продуманный тон и стиль повествования и сочетающиеся элементы дизайна будут формировать у посетителей сайта положительное впечатление, чтобы последние с большей вероятностью совершили целевое действие.

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

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

В одной из последних статей мы делились свежей статистикой о продажах во время Q4, а также доле мобильного трафика в продажах. Так, например, мобильная реклама продемонстрировала 15% увеличение вовлеченности пользователей.

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

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

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

Бесспорно, попап с подпиской на новостную рассылку – это замечательная идея, но это давно не конвертирует. Выход в данном случае – качественный лид-магнит в виде:

Запомните, что бы вы ни предлагали, делайте это качественно!

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

Сбор имейлов посредством всплывающих окон – это лишь один из этапов внедрения email-маркетинга в ваш онлайн-бизнес. Более подробно о принципах внедрения email-маркетинга в ваш интернет-магазин мы рассказали в статье «Как эффективно выстроить email-маркетинг в магазине на Shopify».

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