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

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

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

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

Если вы, услышав словосочетание «всплывающее окно», вспоминаете одну из этих уродливых стандартных 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
Как выбрать CMS для интернет-магазина
Колян Гусляков
2
комментария
0
читателей
Полный профиль
Колян Гусляков - Если же у вас не получилось решить данную проблему, предлагаю воспользоваться авторской сборкой от neoseo. neoseo.ru/internet-magazin-seo-magazin-model. Они предоставляют дополнительные модули для работы и взаимодействия с вашим сайтом, современный дизайн, качественную оптимизацию и продвижение. Советую попробовать, не пожалеете.
«Юзабилити-лаборатория»: оставляйте заявку на участие!
Анна Макарова
0
комментариев
0
читателей
Полный профиль
Анна Макарова - Антон, добрый день! Ваш сайт не попал в основную выборку для юзабилити-анализа, но эксперты постараются сделать по вашему сайту видеоразбор (ю-ревью). Будем держать вас в курсе )
Тест по SEO – проверь свой уровень знаний
Артем Дорофеев
8
комментариев
0
читателей
Полный профиль
Артем Дорофеев - Полный текст вопроса со скриншотом панели прикладываю. Итого, что имеем: - на скриншоте отмечено, что это фильтр МПК - сайт коммерческий - рекламы на сайте нет С вероятностью 95% это ошибка (которая уже дважды случалась в Яндексе), когда они случайно "закосили" неповинные сайты. Тогда по запросу Платону фильтр быстренько снимали. Но вопрос даже не на знание этого нюанса. В любой непонятной ситуации, прежде чем что-либо предпринимать (особенно переписывать весь контент на сайте или менять дизайн, как указано в других вариантах) - фильтр следует подтвердить. Правильный ответ: "Написать письмо в техподдержку Яндекса".
Выбираем CMS для сайта с точки зрения SEO: базовые требования
SEO.RU
6
комментариев
0
читателей
Полный профиль
SEO.RU - Спасибо за замечание, действительно была допущена неточность - возможно информация была не так давно обновилась. Данные в статье поправим на актуальные.
100+ ресурсов по SEO для изучения поисковой оптимизации с нуля
Марина Ибушева
0
комментариев
0
читателей
Полный профиль
Марина Ибушева - Спасибо за добавление. Мы уже работаем над отдельным материалом про курсы, потому что одной статьи мало, чтобы охватить все крутое по обучению)
7 способов увеличить авторитетность сайта «в глазах» поисковых систем
Grigo5
4
комментария
0
читателей
Полный профиль
Grigo5 - Понятно.
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
Digital-marketing: как выжить в кризис. Опыт реальной компании
Maks
1
комментарий
0
читателей
Полный профиль
Maks - Спасибо за опыт Вашей компании, Иван Папусь. Интересно получилось! Желаю Вашему бизнесу стабильности и успешно пережить все кризисы))
SEO must go on! Почему в кризис нельзя останавливать продвижение сайта
everystraus
37
комментариев
0
читателей
Полный профиль
everystraus - Мы даже варианты не рассматривали. Если проект неустойчив, сразу предлагали сбавить обороты до минимума, но и так, чтоб не свалиться в штопор. Именно по СЕО чаще всего.
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Дмитрий Купцов
1
комментарий
0
читателей
Полный профиль
Дмитрий Купцов - 40$ за дизайн и 60$ за вёрстку под ключ? Мне кажется там ещё по нолику должно быть...
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
380
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
112
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
89
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

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