Ecom Today | 18 декабря, 2020

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

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

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

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

Что такое pop-up?

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

Для чего использовать pop-up?

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

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

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

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

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

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

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

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

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

Принципы создания попапа

Принципы создания попапа

Правило #1: Попап должен просто закрываться

Согласитесь, крайне нервирует, когда в процессе чтения статьи или скроллинга ленты вам «выпадает» попап, закрыть который становится задачей сродни поиску клада.
Правило #1: Попап должен просто закрываться
Согласитесь, крайне нервирует, когда в процессе чтения статьи или скроллинга ленты вам «выпадает» попап, закрыть который становится задачей сродни поиску клада.
Всплывающие окна (pop-up) – это элементы пользовательского интерфейса, которые отображаются поверх веб-страницы в браузере.
В данном примере всплывающего окна еще много несовершенств, но ключевое – отсутствие кнопки «закрыть». Если вы будете предлагать пользователю зарегистрироваться подобным образом, то вероятнее всего вместо желаемого действия, он просто покинет сайт.
В данном примере всплывающего окна еще много несовершенств, но ключевое – отсутствие кнопки «закрыть». Если вы будете предлагать пользователю зарегистрироваться подобным образом, то вероятнее всего вместо желаемого действия, он просто покинет сайт.

Правило #2: Попап должен выглядеть просто

Один из секретов «мэтров копирайтинга» звучит как keep it simple, или чем проще, тем лучше. Это правило применимо и к попапам. Сделайте так, чтобы всплывающее окно выглядело лаконично, а посыл был читабельным. Добавьте одно изображение, небольшой текст, поле для ввода email-адреса и кнопку.
Правило #2: Попап должен выглядеть просто
Один из секретов «мэтров копирайтинга» звучит как keep it simple, или чем проще, тем лучше. Это правило применимо и к попапам. Сделайте так, чтобы всплывающее окно выглядело лаконично, а посыл был читабельным. Добавьте одно изображение, небольшой текст, поле для ввода email-адреса и кнопку.
Правила создания идеального попапа (pop-up)
Чем меньше информации вы попросите у пользователя на первом этапе, тем с большей вероятностью он пройдет через всю «воронку». Первый шаг знакомства с брендом должен быть самым простым. Сначала, он оставит адрес электронной почты, а через какое-то время более расширенную информацию, которая вам необходима.
Чем меньше информации вы попросите у пользователя на первом этапе, тем с большей вероятностью он пройдет через всю «воронку». Первый шаг знакомства с брендом должен быть самым простым. Сначала, он оставит адрес электронной почты, а через какое-то время более расширенную информацию, которая вам необходима.
Правила создания попапа (pop-up) в Shopify магазине
Когда в строке более одного поля для ввода, пользователю сложнее заполнять форму. По этой системе работают крупнейшие IT-гиганты, когда при регистрации вместо анкеты просят пользователя ответить, например, на один вопрос, ответ на который подразумевает простое «Да / Нет». Об этом расскажем в одной из следующих статей.
Когда в строке более одного поля для ввода, пользователю сложнее заполнять форму. По этой системе работают крупнейшие IT-гиганты, когда при регистрации вместо анкеты просят пользователя ответить, например, на один вопрос, ответ на который подразумевает простое «Да / Нет». Об этом расскажем в одной из следующих статей.

Правило #3: Не используйте несколько всплывающих окон

Несколько всплывающих окон на сайте могут быть интерпретированы пользователем как спам. И логичным решением пользователя будет либо выход с сайта, либо менее категоричное – недоверие к содержанию.
Правило #3: Не используйте несколько всплывающих окон
Несколько всплывающих окон на сайте могут быть интерпретированы пользователем как спам. И логичным решением пользователя будет либо выход с сайта, либо менее категоричное – недоверие к содержанию.
Каким не должен быть pop-up (всплывающее окно) в интернет-магазине
Подобных исходов можно избежать, придерживаясь простого правила: одна страница – один попап. Прекрасно будет, если это всплывающее окно еще и не будет вводить в раздражение, как пример из следующего пункта.
Подобных исходов можно избежать, придерживаясь простого правила: одна страница – один попап. Прекрасно будет, если это всплывающее окно еще и не будет вводить в раздражение, как пример из следующего пункта.

Правило #4: Дайте пользователю время

Один из секретов «мэтров копирайтинга» звучит как keep it simple, или чем проще, тем лучше. Это правило применимо и к попапам. Сделайте так, чтобы всплывающее окно выглядело лаконично, а посыл был читабельным. Добавьте одно изображение, небольшой текст, поле для ввода email-адреса и кнопку.
Правило #4: Дайте пользователю время
Один из секретов «мэтров копирайтинга» звучит как keep it simple, или чем проще, тем лучше. Это правило применимо и к попапам. Сделайте так, чтобы всплывающее окно выглядело лаконично, а посыл был читабельным. Добавьте одно изображение, небольшой текст, поле для ввода email-адреса и кнопку.
Всплывающее окно на странице сайта должно выглядеть лаконично и быть читабельным
Вы спросите: а что если за это время пользователь решит покинуть страницу? В данном случае можно прибегнуть к такому типу всплывающих окон как exit-intent или попап выхода. Окно появляется, когда пользователь принимает решение покинуть страницу. Механизм отслеживает движение мыши посетителя, и когда курсор выходит за верхнюю границу страницы, отображает всплывающее окно.
Вы спросите: а что если за это время пользователь решит покинуть страницу? В данном случае можно прибегнуть к такому типу всплывающих окон как exit-intent или попап выхода. Окно появляется, когда пользователь принимает решение покинуть страницу. Механизм отслеживает движение мыши посетителя, и когда курсор выходит за верхнюю границу страницы, отображает всплывающее окно.

Правило #5: Пусть попап соответствует вашему бренду

Крайне часто всплывающее окно на сайте выбивается из общего интерфейса и выглядит, как «атавизм» во всей экосистеме. Чтобы не допускать подобную ошибку, мы рекомендуем следить за тем, чтобы дизайн всех элементов на сайте был созвучен друг с другом.
Правило #5: Пусть попап соответствует вашему бренду
Крайне часто всплывающее окно на сайте выбивается из общего интерфейса и выглядит, как «атавизм» во всей экосистеме. Чтобы не допускать подобную ошибку, мы рекомендуем следить за тем, чтобы дизайн всех элементов на сайте был созвучен друг с другом.
Правило #5: Пусть попап (pop-up) соответствует вашему бренду
То же самое касается tone of voice (тональность, которой придерживается бренд в коммуникации со своим потребителем). Тщательно продуманный тон и стиль повествования и сочетающиеся элементы дизайна будут формировать у посетителей сайта положительное впечатление, чтобы последние с большей вероятностью совершили целевое действие.

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

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

Правило #6: Оптимизируйте попап под мобильные устройства

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

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

В одной из последних статей мы делились свежей статистикой о продажах во время Q4, а также доле мобильного трафика в продажах. Так, например, мобильная реклама продемонстрировала 15% увеличение вовлеченности пользователей.
Оптимизация pop-up (всплывающее окно) в Shopify магазине под мобильные устройства
Позаботьтесь о том, чтобы всплывающее окно на вашем сайте отлично выглядело и работало как на десктопах, так и на мобильных устройствах.
Позаботьтесь о том, чтобы всплывающее окно на вашем сайте отлично выглядело и работало как на десктопах, так и на мобильных устройствах.

Правило #7: Положение на сайте – важно

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

Правило #8: Предлагайте что-нибудь полезное

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

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

  • Промокода за подписку;
  • Полезного контента / подарка за подписку;
  • Расширенного пробного периода.
Запомните, что бы вы ни предлагали, делайте это качественно!

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

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

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

    • Промокода за подписку;
    • Полезного контента / подарка за подписку;
    • Расширенного пробного периода.
    Запомните, что бы вы ни предлагали, делайте это качественно!

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

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

    Понравилась статья? Поделитесь ей с друзьями

    Удобный поиск по сайту

    Введите интересующий вас вопрос, название услуги или статьи
    Удобный поиск по сайту
    Введите интересующий вас вопрос, название услуги или статьи
    Полезные ссылки

    ru.ecomlife.pro/services – дропшиппинг-бизнес под ключ, готовые дропшиппинг-магазины, аудит и разработка интернет-магазинов на платформе Shopify, создание креативов, реклама и другие услуги.

    @shopifypro – cамое быстрорастущее сообщество о Ecommerce и Dropshipping.

    @ecomtoday – информационный канал со статьями и актуальными новостями.

    @ecomlifebot – официальный бот сообщества.

    Больше интересного контента в нашем Instagram-аккаунте.
    Полезные ссылки

    ru.ecomlife.pro/services – дропшиппинг-бизнес под ключ, готовые дропшиппинг-магазины, аудит и разработка интернет-магазинов на платформе Shopify, создание креативов, реклама и другие услуги.

    @shopifypro – cамое быстрорастущее сообщество о Ecommerce и Dropshipping.

    @ecomtoday – информационный канал со статьями и актуальными новостями.

    @ecomlifebot – официальный бот сообщества.Больше интересного контента в нашем Instagram-аккаунте.

    Больше интересного контента в нашем Instagram-аккаунте.

    В нашем Ecommerce Community мы объединяем всех тех, кто интересуется продажей товаров в интернете с помощью платформы Shopify, а также стремится расширять свой кругозор в этой сфере
    В нашем Ecommerce Community мы объединяем всех тех, кто интересуется продажей товаров в интернете с помощью платформы Shopify, а также стремится расширять свой кругозор в этой сфере