Новости

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

Автор Дата 24.02.2018

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

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

Источник: www.seonews.ru

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *