×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
0 11804

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

Если вы, услышав словосочетание «всплывающее окно», вспоминаете одну из этих уродливых стандартных 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

(Голосов: 1, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Что скрывает «Прогноз бюджета Яндекс.Директ»?
Михаил Мухин
15
комментариев
0
читателей
Полный профиль
Михаил Мухин - Здравствуйте! 1-2. Считает стенд. Ссылка на него дана, но могу повторить: online.p-c-l.ru/competition/task/card/id/106. Нажмите на кнопку "Начать" и заранее приготовьте прогноз бюджета Яндекс. Суть расчета: перебор комбинаций всех ставок на всех фразах, построение бюджетных когорт - бюджетов с одинаковым СРС, отбор в каждой когорте бюджета с максимальным количеством кликов и ..., да упорядочивание этих бюджетов по мере возрастания СРС, причем берем не все, а с фиксированным шагом. 3. Гугл считается через поправочные коэффициенты. Мы перевариваем океан данных и представляем их. На удивление, получается не менее, хотя и не более точно, как и прогноз Яндекс. Конечно, нужно понимать, что это очень примерные прикидки, фактически перевод неточного прогноза Яндекс в удобочитаемую форму, не больше. Самое интересное начинается, когда применяешь метод бюджетных когорт к измерению показателей фраз на реальной рекламной кампании в режиме 48х7. Первые результаты очень хорошие. Если хотите присоединиться к бесплатному тестированию, напишите Эльвире r-support@r-broker.ru. В теме укажите "хочу присоединиться к тестам Умного управления рекламой"
Ссылочное продвижение локальных сайтов: ТОП худших SEO-методов
demimurych
8
комментариев
0
читателей
Полный профиль
demimurych - о господи. это для регионального сайта? в яндексе? где у сайта по региону конкурентов меньше чем выдачи на двух страницах из которых перваш это реклама москвы? потешно ей богу. ктото чего то не понеимает.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
Зачем подменять контент на сайте: разбираем инструмент и развенчиваем мифы
Дмитрий Сульман
4
комментария
0
читателей
Полный профиль
Дмитрий Сульман - Все верно, об этом я и говорю. У крупных компаний есть много данных и они имеют доступ к дорогим технологиям и решениям для персонализации контента. Топовые западные сервисы для персонализации, такие как RichRelevance или Dynamic Yield, стоят от нескольких тысяч до десятков тысяч долларов в месяц. Понятно, что малый бизнес не может себе этого позволить. Да даже если бы чисто теоретически и мог, то это вряд ли бы имело хоть какой-то смысл. Во-первых, у малого бизнеса недостаточно данных, чтобы подобные алгоритмы персонализации начали эффективно работать, а во-вторых, тот профит, который МСБ получит от персонализации, никогда не покроет таких расходов. Мы же предлагаем решение, доступное как раз для малого и среднего бизнеса. При этом наше решение комплексное: МультиЧат - это одновременно и инструмент для персонализации, и для коммуникации.
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
Digital-разговор: Михаил Шакин про SEO, Google и заработок в интернете
Анна Макарова
368
комментариев
0
читателей
Полный профиль
Анна Макарова - Подготовим ) Пока предлагаю почитать интервью с Денисом Нарижным из той же серии. Там стенограмма =) www.seonews.ru/interviews/digital-razgovor-denis-narizhnyy-pro-ukhod-iz-seo-i-zarabotok-na-partnerkakh/
Как удвоить выручку за счет продвижения в поиске. Кейс coffee-butik.ru
Максим Боровой
3
комментария
0
читателей
Полный профиль
Максим Боровой - Последний вопрос (извиняюсь за количество) - почему на "В корзину" стоит Nofollow. Осознанно для распределение весов?
Кейс Hansa: как увеличить органический трафик в 1,5 раза
Алексей Порфирьев
3
комментария
0
читателей
Полный профиль
Алексей Порфирьев - Спасибо за замечание, о данной проблеме известно, но она не стоит в порядке приоритетных. Вопрос, на самом деле, дискуссионный. В тематике конкуренция не настолько велика, а в топе выдачи часто встречаются сайты с более серьёзными техническими проблемами. По этому, именно в статьях, более важно работать над релевантностью контента, отношением времени пользователя на странице к уровню доскрола, и различным пользовательским функционалом (рейтинг материала, просмотры и т. п.).
Автоматические SEO-аудиты: как напугать некорректными выводами
SEOquick
38
комментариев
0
читателей
Полный профиль
SEOquick - Парсинг сайтов – это самый лучший способ автоматизировать процесс сбора и сохранения информации. Конкурентов всегда нужно мониторить, а не сравнивать свой сайт через автоматический аудит анализатора.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
368
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
139
Комментариев
121
Комментариев
108
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
85
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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