Как создать действительно хорошее всплывающее окно: формула
Как будто делает дизайн всплывающего окна действительно крутым? Так точно, сейчас вы наверняка подумали, что это оксюморон – подобно ((тому) как) поп-апы вообще могут кому-то улыбается мысль что-то сделать)? Но здесь, как и в любом аспекте веб-дизайна, шабаш кроется в деталях, а еще магическом умении соединить уникальную идею бренда с дизайном взаимодействия.
Когда вы, услышав словосочетание «всплывающее окно», вспоминаете одну с этих уродливых стандартных WordPress-штук с большими зелеными галочками разве рамку Джонсона, то вы совершенно правы – сие настоящее уродство.
Вообще создать привлекательное всплывающее отверстие несложно, особенно если знать, какие аспекты дизайна брать в соображение. Оли Гарднер, сооснователь Unbounce, разработал «уравнение восхитительности всплывающих окон». Давайте рассмотрим его подробнее.
Уравнение
Само уравнение разбито сверху семь принципов: ясность, контроль, креативность, релевантность, чарование, ценность и уважение. Для каждого принципа есть квитанция-лист из нескольких вопросов, по которым выставляется эвальвация от 0 до 1 (при желании можно передать оценку 0,5). Максимальное количество баллов, которое может надергать поп-ап, равно 7. После этого оценки после всем принципам объединяют и высчитывают общий процент.
Яко показывают принципы:
- Ясность демонстрирует, насколько понятен оффер духовное лицо-апа. То есть насколько быстро его (бог) велел прочесть и осознать, что написано. Также учитывается реальность изображения и то, как оно способствует визуальной коммуникации.
- Наблюдение демонстрирует способность посетителя сайта управлять ситуацией. Так есть насколько легко ему принять предложение закачаешься всплывающем окне (кликнуть «согласен», перейти в нужный раздел сайта), откреститься от него или вовсе закрыть окно.
- Креативность. По образу и при любом другом типе маркетинговых коммуникаций, креативный пресвитер-ап имеет больше шансов быть хорошо принятым.
- Уместность. Если поп-ап нерелевантный, то и конверсия закругляйтесь низкой. Здесь уместно вспомнить о конгруэнтности – равенстве двух различных экземпляров в чем дело?-либо, их согласованности.
- Очарование. Вы наверняка никак не раз встречали действительно хорошие рекламные объявления, коньки и баннеры и узнаете, если встретите еще. То а самое и со всплывающими окнами. Если поп-ап заставил вам улыбнуться и вам хочется кому-нибудь его оказать, то вы нашли что-то очаровательное.
- Многоценность. Какие-то поп-апы содержат только информацию, какие-ведь – скидки, другие – запрашивают ваши личные данные в свопинг на бонусы. Принцип ценности базируется на справедливом обмене, так есть насколько справедливо будут вознаграждены усилия пользователя, разве он согласится с условиями, предлагаемыми всплывающим окном.
- Решпект. Этот принцип базируется на «ответственном использовании технологии». И самым большим нарушением на этом месте будет «Согласие на унижение». Представьте себе всплывающее апертура с двумя кнопками, одна из которых – это отрешение. Ant. принятие, но поданный в форме оскорбительной фразы, например, «нет, я без- хочу заработать».
А теперь самое время разобрать удачные упражнения.
Tim Ferriss
Это полноэкранное всплывающее окно, которое появляется, когда-когда вы хотите покинуть сайт. Такие вещи раздражают около заходе, но поместить его на выходе – отличная эрфикс. Дизайн простой и понятный. А теперь оценки:
Ясность: после этого оценка 0,75, так как у пользователей уходит некоторое п(р)ошедшее на понимание написанного. Но фото автора возьми заднем плане немного проясняет ситуацию.
Контроль: 0,8. Свет клином сошелся минус здесь – невозможность закрыть окно с помощью фоно Esc на клавиатуре.
Креативность: 1. Дизайн в порядке. И визуальная степень кнопок выглядит замечательно – яркое и заметное согласие и не в такой мере броская отмена.
Очарование: 0,5. Определенно, да.
Ценность: 1. Сие двухэтапная форма (нужно ввести свой email потом нажатия на кнопку согласия). Вполне честная фрахтование.
Уважение: 1. «Нет, спасибо, мне не интересно» в (обмен кнопки отказа – удачная идея. Никакого унижения.
Только (лишь): 83%.
Leesa Mattress: таймер с обратным отсчетом
Довольно скучнейший поп-ап, хотя решение с таймером можно подсчитывать удачным. Стоит признать, что ни одно изо фундаментальных правил он также не нарушил.
Чёткость: 1. Тут все легко.
Контроль: 1. У нас есть совершенный контроль.
Креативность: 0,83. Изначальная оценка была не в таком роде высокой, но таймер добавил несколько дополнительных очков.
Уместность: 1. Все четко и понятно.
Очарование: 0. Текст мог взяться и лучше. Как, впрочем, и визуальная часть.
Уважение: 1. Туточки проблем нет.
Всего: 80%
Tasting Table
Вопросительный вокабула – отличное решение. Он помогает сразу отсеять нерелевантную аудиторию.
Светлость: 1. Все понятно – нам предлагают получать рассылку о еде.
Инспекция: 0,8. Кнопка Esc не поможет закрыть поп-ап.
Креативность: 0,17. Хоть поставить несколько очков за принадлежность бренду. Небось, это все.
Релевантность: 1. Тут тоже все ведренно.
Очарование: 0. Но есть потенциал.
Ценность: 1.
Уважение: 1. И старый и малый отлично.
Всего: 71%
GetResponse
Немного странное всплывающее перерыв, хотя и простое. Однако оно выдало потрясающие результаты, эдак как не нарушило фундаментальных правил. Оно хотя (бы) выглядит игриво. Если бы этот маленький иностранец был еще и анимированным, то результат получился бы идеальным.
Рельефность: 1. Все понятно, но на чтение милой приписки уходит один-два лишних секунд.
Контроль:1. Контроль полный.
Креативность: 0,67. Проектирование неидеальный, но очень забавный.
Релевантность: 1. Нам предлагают даром протестировать программное обеспечение. Все абсолютно релевантно.
Обвораживание: 1. Здесь хорошо все – и дизайн, и текст.
Ценность: 1. Нас просят демократично кликнуть по кнопке, так что это вничью не отличается от любой другой кнопки подписки нате сайте. Все честно.
Уважение: 1. Да.
Всего: 95%
А тут. Ant. там мы немного прервем вас, чтобы показать, (то) есть выглядит плохой пример:
Никогда так не делайте.
How-To Geek
Сие всплывающее окно набрало 77%. Наверняка вы без- ожидали такого результата. А причина в том, что основные правила тут не нарушены, хотя креативность с очарованием и хромают.
Разборчивость: 1. Тут все супер очевидно.
Контроль: 1. И работает шабаш как надо.
Креативность: 0,17. Да, есть связь с брендом, так больше ничего интересного с творческой точки зрения.
Уместность: 1. Здесь вопросов нет.
Очарование: 0,25. Поп-ап получает домашние очки благодаря маленькому парню-ботанику.
Ценность: 1. Обычное предписание подписаться на рассылку.
Уважение: 1. Все хорошо.
Только (лишь): 77%.
Lemonstand
Это было бы самое обычное всплывающее отверстие, если бы не анимация. Она привлекает сосредоточенн.
Ясность: 1. Речь об электронной книге, и нам ее демонстрируют. И старый и малый понятно.
Контроль: 1. Контроль полный.
Креативность: 0,67. Очки вслед за GIF-изображение и принадлежность бренду.
Релевантность: 1. Все отлично.
Чарм: 0,25. Ситуацию спасает только анимированное изображение.
Ценность: 1. Однако честно.
Уважение: 1. Никакого «согласия на унижение» после этого нет.
Всего: 85%
PetSmart
Самый простой пример изо всех представленных. Но он призван продемонстрировать, словно иногда оффер – это просто дополнительная информация, и до сего времени.
Ясность: 1. Кристально ясно.
Контроль: 1. Все работает ровно нужно.
Креативность: 0. Здесь креативностью даже не пахнет.
Уместность: 1. Нам говорят о доставке на ecommerce-сайте. Аминь сходится.
Очарование: 0. Вот если бы добавили котят!
Сверхценность: 1. Определенно есть.
Уважение: 1. Все хорошо.
Всего: 71%
Анастасея и Настасея Шестова, руководитель направления поискового продвижения ИнтерЛабс
Правда, часто pop-up отвлекает и раздражает пользователей. При этом делать что добавляется назойливость, это прямая потеря подписчиков и возможных клиентов. Да и то всплывающие окна не так уж и плохи, если нет их грамотно применять.
Разумеется, нет универсальных правил, подходящих ко во всем pop-up, но есть ряд моментов, которые стоит принять в соображение.
• Максимально простая форма и предложение получить что-ведь ценное в обмен на почту или телефон.
• Уместность предложения – только то, что интересно вашим пользователям с учетом пути за сайту и проведенного времени. При этом оптимально эксплуатировать разные виды всплывающих окон и указывать, сколько пользователей поуже воспользовалось, это вызывает доверие.
• Мини-персонализация – однократная демонстрирование формы пользователям, автоматическое заполнение данных форм, разве что раньше они были введены на сайте.
• Временное рекуперация – не стоит использовать одни и те же pop-up денно и нощно, лучше сразу определить временной промежуток применения с конкретной целью.
• Приличность отказа от предложения – не стоит прятать основы управления окном, иначе пользователь вместо закрытого pop-up уйдет с сайта в принципе. При этом лучше использовать нейтральное «Нет, спасибо», выделенное больше спокойным фоном, чем оценочные суждения вида «Нет, меня устраивают мои средние возможности».
Подле этом оптимально тестировать различные варианты pop-up. Основной минута, который следует учитывать, – как соотносятся эффективность и ругательный пользовательский опыт. И также нужно следить за тенденциями, на выдержку, что Яндекс против агрессивной рекламы.
Мне запомнился высокопро pop-up на российском сайте Puma — https://ru.puma.com/. Занимает около 1/4 экрана, заполнение простой формы дает неплохую скидку 10% бери первый заказ:
А что насчет вас?
Мы показали вы несколько удачных примеров. Теперь ваша очередь! Делитесь вариантами, которые вы нравятся (или наоборот), в комментариях.
Источник: Unbounce
Источник:
нет комментариев