Как создать действительно хорошее всплывающее окно: Формула | topinup.pro - 2018

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

Как создать действительно хорошее всплывающее окно: Формула
Что делает дизайн всплывающего окна действительно крутым? Да, теперь вы, наверное, подумали, что это оксюморон - как вы относитесь к таким людям, как кто-либо вообще? Но здесь, как и во всех аспектах веб-дизайна, все в деталях, а также магическая способность сочетать уникальную идею бренда с дизайном взаимодействия. Если вы слышите фразу «всплывающее окно», помните одну из этих уродливых стандартных песен WordPress с большими зелеными ключами или рамками Джонсона, тогда вы абсолютно правы - это настоящее уродство. В общем, нетрудно создать привлекательное всплывающее окно, особенно если вы знаете, какие аспекты дизайна должны учитывать. Оли Гарднер, соучредитель Unbounce, разработал «уравнение вкусных всплывающих окон». Давайте посмотрим поближе.

Уравнение

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

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

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

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

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

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

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

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

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

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

  • Значение. Некоторые всплывающие окна содержат только информацию, некоторые - скидки, другие - запрашивают вашу личную информацию за вознаграждение. Принцип ценности основан на справедливом обмене, то есть как справедливо вознаграждаются усилия пользователя, если он соглашается с условиями всплывающего окна.
Читайте также:   В Boston Dynamics робота научили танцевать

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

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

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

Настало время дать несколько хороших примеров.

Тим Феррисс

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

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

Clarity : Вот оценка 0,75 так как пользователям требуется время, чтобы понять, что они написали. Но фотография автора на заднем плане немного иллюстрирует ситуацию.

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

Творчество: 1. Дизайн в порядке. И визуальная иерархия кнопок выглядит замечательно - яркая и привлекательная последовательность и менее запоминающаяся девальвация.

Амулет: 0,5. Определенно, да.

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

Уважение: 1. «Нет, спасибо, меня это не интересует» вместо кнопки «Отклонить» - хорошая идея. Нет унижения.

Всего: 83%.

Матрас Лизы: таймер обратного отсчета

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

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

Ясность: 1 . Это легко.

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

Творчество: 0.83 . Первоначальный результат был не таким высоким, но таймер добавил несколько дополнительных очков.

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

Амулет: 0 . Текст может быть лучше. Как, однако, и визуальная часть.

Уважение: 1 . Здесь нет проблем.

Всего: 80%

Таблица дегустации

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

Название вопроса является отличным решением. Это помогает немедленно устранить неуместную аудиторию.

Ясность: 1 . Все ясно - мы получаем информационный бюллетень о еде.

Контроль: 0,8 . Клавиша Esc не помогает при закрытии всплывающего окна.

Читайте также:   Яндекс рассказал, как формируется рейтинг организаций в Справочнике

Творчество: 0,17 . Вы можете установить несколько моментов для бренда. Может, и все.

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

Амулет: 0 . Но есть потенциал.

Значение: 1 .

Уважение: 1 . Все в порядке.

Всего: 71%

GetResponse

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

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

Ясность: 1 . Все ясно, но для чтения сладких новостей требуется еще несколько секунд.

Контроль: 1 . Контроль завершен.

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

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

Амулет: 1 . Здесь все прекрасно - дизайн и текст.

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

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

Всего: 95%

И здесь мы немного прерываем вас, чтобы показать, как выглядит плохой пример: [s] "width =" 600 "height =" 433 ">

[19659033] Никогда не нравится.

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 . Нам сообщают о доставке на веб-сайте электронной торговли. Все сходится.

Амулет: 0 . Ну, если вы добавили котят!

Значение: 1 . Определенно там.

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

Всего: 71%

Как создать действительно хорошее всплывающее окно: Формула Анастасия Шестова Директор по поиску рекламы InterLabs
На самом деле всплывающее окно часто отвлекает пользователей и беспокоит их. В то же время, если соблюдение будет добавлено, это прямая потеря абонентов и потенциальных клиентов. Однако всплывающие окна не так уж плохи, если их использовать правильно. Конечно, нет универсальных правил, которые подходят для всех всплывающих окон, но есть много вещей, которые нужно иметь в виду. • Простейшая форма и предложение получить что-то ценное в обмен на почту или телефон. • Актуальность предложения - именно то, что вас интересует, принимая во внимание путь через веб-сайт и время, потраченное на него. Лучше всего использовать разные типы всплывающих окон и указать, сколько пользователей уже его использовали. • Мини-персонализация - как только форма отображается пользователям, автоматически заполняет данные формы, если они были ранее введены на сайт. Временное использование. Вы не всегда должны использовать одно и то же всплывающее окно, лучше сразу установить временной интервал для определенной цели. • Правильность отклонения предложения - вы не должны скрывать элементы управления окном. В противном случае пользователь покидает сайт полностью, а не закрытое всплывающее окно. Лучше использовать нейтральное «Нет спасибо», которое выделяется более расслабленным фоном, чем оценки «Нет, я доволен своими средними навыками». В этом случае оптимально тестировать различные всплывающие варианты. Самый важный момент для рассмотрения - это то, как корреляция эффективности и отрицательного пользователя. И вам тоже нужно отслеживать тенденции, например, что Yandex против агрессивной рекламы. Я помню хорошее всплывающее окно на российской стороне Puma - https://ru.puma.com/. Он занимает около 1/4 экрана, заполняя простую форму, дает 10% скидку на первый заказ:

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

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

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

Источник: Unbounce

Опубликовано topinup / Февраль 7, 2018
Рубрики: Новости
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...


Заказ сайта на WordPress

Заполните форму, и наши специалисты свяжутся с вами в ближайшее время для создания сайта на выбранной теме WordPress.

Будьте в курсе последних новостей.

Подписывайтесь на наши страницы в соцсетях и на канал в Telegram.

Заказ бесплатной консультации

Ваше имя (обязательно)

Ваш телефон (обязательно)

Ваш e-mail (обязательно)