Как создать действительно хорошее всплывающее окно: формула

Россия+7 (495) 960-65-87
Шрифт:
0 7685

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

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

Вообще создать привлекательное всплывающее окно несложно, особенно если знать, какие аспекты дизайна учитывать. Оли Гарднер, сооснователь Unbounce, разработал «уравнение восхитительности всплывающих окон». Давайте рассмотрим его подробнее.

Уравнение

Само уравнение разбито на семь принципов: ясность, контроль, креативность, релевантность, очарование, ценность и уважение. Для каждого принципа есть чек-лист из нескольких вопросов, по которым выставляется оценка от 0 до 1 (при желании можно выставить оценку 0,5). Максимальное количество баллов, которое может получить поп-ап, равно 7. После этого оценки по всем принципам объединяют и высчитывают общий процент.

Что показывают принципы:

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

s1.png

  • Контроль демонстрирует способность посетителя сайта управлять ситуацией. То есть насколько легко ему принять предложение во всплывающем окне (кликнуть «согласен», перейти в нужный раздел сайта), отказаться от него или вовсе закрыть окно.

s2.png

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

s3.png

  • Релевантность. Если поп-ап нерелевантный, то и конверсия будет низкой. Здесь уместно вспомнить о конгруэнтности – равенстве двух различных экземпляров чего-либо, их согласованности.

s5.png

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

s6.png

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

s7.png

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

s8.png

А теперь самое время разобрать удачные примеры.

Tim Ferriss

s10.jpg

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

Ясность: здесь оценка 0,75, так как у пользователей уходит некоторое время на понимание написанного. Но фото автора на заднем плане немного проясняет ситуацию.

Контроль: 0,8. Единственный минус здесь – невозможность закрыть окно с помощью клавиши Esc на клавиатуре.

Креативность: 1. Дизайн в порядке. И визуальная иерархия кнопок выглядит замечательно – яркое и заметное согласие и менее броская отмена.

Очарование: 0,5. Определенно, да.

Ценность: 1. Это двухэтапная форма (нужно ввести свой email после нажатия на кнопку согласия). Вполне честная сделка.

Уважение: 1. «Нет, спасибо, мне не интересно» вместо кнопки отказа – удачная идея. Никакого унижения.

Всего: 83%.

Leesa Mattress: таймер с обратным отсчетом

s11.jpg

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

Ясность: 1. Тут все легко.

Контроль: 1. У нас есть полный контроль.

Креативность: 0,83. Изначальная оценка была не такой высокой, но таймер добавил несколько дополнительных очков.

Релевантность: 1. Все четко и понятно.

Очарование: 0. Текст мог быть и лучше. Как, впрочем, и визуальная часть.

Уважение: 1. Тут проблем нет.

Всего: 80%

Tasting Table

s12.jpg

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

Ясность: 1. Все понятно – нам предлагают получать рассылку о еде.

Контроль: 0,8. Кнопка Esc не поможет закрыть поп-ап.

Креативность: 0,17. Можно поставить несколько очков за принадлежность бренду. Пожалуй, это все.

Релевантность: 1. Тут тоже все ясно.

Очарование: 0. Но есть потенциал.

Ценность: 1.

Уважение: 1. Все отлично.

Всего: 71%

GetResponse

s13.jpg

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

Ясность: 1. Все понятно, но на чтение милой приписки уходит несколько лишних секунд.

Контроль:1. Контроль полный.

Креативность: 0,67. Дизайн неидеальный, но очень забавный.

Релевантность: 1. Нам предлагают бесплатно протестировать программное обеспечение. Все абсолютно релевантно.

Очарование: 1. Здесь хорошо все – и дизайн, и текст.

Ценность: 1. Нас просят просто кликнуть по кнопке, так что это ничем не отличается от любой другой кнопки подписки на сайте. Все честно.

Уважение: 1. Да.

Всего: 95%

А здесь мы немного прервем вас, чтобы показать, как выглядит плохой пример:

s14.jpg

Никогда так не делайте.

How-To Geek

s15.jpg

Это всплывающее окно набрало 77%. Наверняка вы не ожидали такого результата. А причина в том, что основные принципы тут не нарушены, хотя креативность с очарованием и хромают.

Ясность: 1. Тут все супер очевидно.

Контроль: 1. И работает все как надо.

Креативность: 0,17. Да, есть связь с брендом, но больше ничего интересного с творческой точки зрения.

Релевантность: 1. Здесь вопросов нет.

Очарование: 0,25. Поп-ап получает свои очки благодаря маленькому парню-ботанику.

Ценность: 1. Обычное предложение подписаться на рассылку.

Уважение: 1. Все хорошо.

Всего: 77%.

Lemonstand

lemonstand-popup-good-exit-squishy-animation.gif

Это было бы самое обычное всплывающее окно, если бы не анимация. Она привлекает внимание.

Ясность: 1. Речь об электронной книге, и нам ее демонстрируют. Все понятно.

Контроль: 1. Контроль полный.

Креативность: 0,67. Очки за GIF-изображение и принадлежность бренду.

Релевантность: 1. Все отлично.

Очарование: 0,25. Ситуацию спасает только анимированное изображение.

Ценность: 1. Все честно.

Уважение: 1. Никакого «согласия на унижение» тут нет.

Всего: 85%

PetSmart

s17.jpg

Самый простой пример из всех представленных. Но он призван продемонстрировать, что иногда оффер – это просто дополнительная информация, и все.

Ясность: 1. Кристально ясно.

Контроль: 1. Все работает как нужно.

Креативность: 0. Здесь креативностью даже не пахнет.

Релевантность: 1. Нам говорят о доставке на ecommerce-сайте. Все сходится.

Очарование: 0. Вот если бы добавили котят!

Ценность: 1. Определенно есть.

Уважение: 1. Все хорошо.

Всего: 71%

3785c8b3971fe69ac782dd380f052598.jpgАнастасия Шестова, руководитель направления поискового продвижения ИнтерЛабс

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

Разумеется, нет универсальных правил, подходящих ко всем pop-up, но есть ряд моментов, которые стоит учесть.

• Максимально простая форма и предложение получить что-то ценное в обмен на почту или телефон.

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

• Мини-персонализация – однократная демонстрация формы пользователям, автоматическое заполнение данных форм, если раньше они были введены на сайте.

• Временное использование – не стоит использовать одни и те же pop-up постоянно, лучше сразу определить временной промежуток применения с конкретной целью.

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

При этом оптимально тестировать различные варианты pop-up. Основной момент, который следует учитывать, – как соотносятся эффективность и негативный пользовательский опыт. И также нужно следить за тенденциями, например, что Яндекс против агрессивной рекламы.

Мне запомнился хороший pop-up на российском сайте Puma - https://ru.puma.com/. Занимает порядка 1/4 экрана, заполнение простой формы дает неплохую скидку 10% на первый заказ:

s18.png

А что насчет вас?

Мы показали вам несколько удачных примеров. Теперь ваша очередь! Делитесь вариантами, которые вам нравятся (или наоборот), в комментариях.

Источник: Unbounce

Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Кейс: как продвинуть сайт производителя мебели на заказ в Москве
    Art Moderator
    2
    комментария
    0
    читателей
    Полный профиль
    Art Moderator -
    Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
    «Баден-Баден»: как выйти из-под фильтра
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Здравствуйте! У меня совсем новый сайт (около месяца). Как только добавила страницы - были на 64, 45 и т.д. местах в выдаче яндекса по нч и сч запросам, но через несколько дней улетели за пределы 200. Что это баден - баден или песочница? Текст вроде не спамный, но мне трудно судить. Сайт portretnazakaz.ru
    Второе дыхание ссылочного продвижения
    Rookee.ru
    24
    комментария
    0
    читателей
    Полный профиль
    Rookee.ru - Еще лучше, когда продвижение осуществляется комплексно :)
    Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
    Анатолий Шевчик
    1
    комментарий
    0
    читателей
    Полный профиль
    Анатолий Шевчик - +1097988
    32 инструмента в помощь SEO-специалисту
    Alex Wise
    5
    комментариев
    0
    читателей
    Полный профиль
    Alex Wise - Данис, я тысячу раз извиняюсь насчёт имени! :( Хотя уверен, что лучше всех вас понимаю по этому поводу, ибо меня всегда называют "Алексеем", хотя я Александр: всё из-за сокращения Alex ;) Жду фидбека по новой версии 3.0!
    Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
    Сергей Дембицкий «Sima-Land.ru»
    22
    комментария
    0
    читателей
    Полный профиль
    Сергей Дембицкий «Sima-Land.ru» - Боже мой, неужели SEO-маги вернулись??? Открыть в роботс utm-метки для индексации и наплодить дублей...что? А расчеты в конце статьи про бюджет на SEO и контекст...откуда эти пропорции? Как по мне, SEO-магия вне Хогвартс. Спасибо, развеселили!
    Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
    Максим Мирошник
    2
    комментария
    0
    читателей
    Полный профиль
    Максим Мирошник -
    Все, что нужно SEO-специалисту. Обзор инструментов
    Администратор Сайта
    1
    комментарий
    1
    читатель
    Полный профиль
    Администратор Сайта - Шаришь в seo! Сервис реально хороший
    «Прямая линия» с Артуром Латыповым: отвечаем на вопросы
    God Koss
    1
    комментарий
    0
    читателей
    Полный профиль
    God Koss - Добрый день! Есть сайты одной компании продвигающиеся в разных странах. .ru .com .net. На российском сайте два языка ru и en, на остальных до 10 языков. Недавно сайт ru по основному брендовому запросу выпал из выдачи Яндекс но после апа вернулся на вторую позицию. На вопрос аффилирования в тех поддержку, получит ответ, что всё в порядке и сайт com не учавствует в выдаче. Но он есть и занимает 1 место. Как быть в данной ситуации? Так же, после возврата в топ 10 по этому запросу зашла еще одна внутренняя страница. Могло ли это случиться из-за каннибализации запроса? Немного изменил description на внутренней, исключил вхождения брендового запроса. Жду апа. Хотел бы услышать ваше мнение. Заранее благодарю!
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    320
    Комментариев
    262
    Комментариев
    234
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    86
    Комментариев
    80
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55
    Комментариев
    54
    Комментариев
    53

    Отправьте отзыв!
    Отправьте отзыв!