7 советов, как создавать всплывающие окна, которые не раздражают

Всплывающим окнам не повезло с репутацией — их считают одним из самых навязчивых видов рекламы. Как сделать так, чтобы поп-апы меньше бесили посетителя сайта?

Всплывающие окна хоть и раздражают, но зато работают. Их коэффициент конверсии может доходить до 9%, согласно исследованию Sumo. Поэтому так важно тщательно продумать дизайн поп-апов, чтобы понравиться пользователю и убедить его совершить целевое действие.

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

1. Рассмотрите все виды дизайна всплывающих окон

Самый распространенный вариант — квадратный поп-ап в центре экрана. Он появляется прямо перед глазами пользователя и закрывает нужный контент. Это неплохой вариант, но это не значит, что его следует использовать везде и всегда.

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

Поп-апы могут появляться в любом месте экрана — все зависит от того, что вы хотите сообщить посетителю сайта. Стандартное расположение строго по центру обычно используют, чтобы рассказать что-то важное: о горящих акциях или необходимости оплатить контент (допустим, в онлайн-медиа).

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

Всплывающее окно также может появляться сбоку или в углу страницы. Это самый ненавязчивый способ, и обычно его используют для дополнительного контента, например для инструкций и советов.

Еще один важный аспект дизайна — анимация. То, как всплывающее окно появляется на экране, может значительно влиять на его восприятие. Например, постепенное увеличение изображения намного приятнее для глаз, чем когда оно резко перекрывает контент на странице. При этом буквально «выпрыгивающие» и «отскакивающие» поп-апы кажутся забавными и привлекают внимание. Более сложные и креативные дизайны, например, когда разные части рекламы отображаются с помощью необычных видов анимации, позволяют воспринимать поп-апы не просто как рекламу, а как интерактивный элемент сайта.

2. Следите за тем, чтобы всплывающие окна соответствовали общему стилю бренда

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

Подобные тактики напоминают поп-апы из 90-х с контрастными цветами и мигающим текстом. На самом деле, они были настолько плохими, что их создатель уже принес извинения всему миру. Ведь суть всплывающего окна в том, что оно перехватывает внимание пользователя за счет неожиданности и своего расположения на странице. И этого вполне достаточно.

Помните также, что поп-апы используют не только бренды. Это любимый арсенал мошенников, которые громкими текстами и яркими баннерами пытаются заставить вас скачать вредоносную программу или перейти на подозрительный сайт. Лучше избегать ассоциаций с такой рекламой, верно?

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

Здесь поп-ап оформлен в стиле сайта и благодаря этому воспринимается как его элемент и не так отвлекает внимание. Дизайн Алекс Бернштейн на Dribbble
Несмотря на то, что здесь преобладают серые тона, получилась чистая и одновременно сложная композиция, которая соответствует бренду. Дизайн Анастасии на Dribbble

3. Эффективно используйте язык цвета и формы

Текст всплывающего объявления должен убеждать пользователя совершить действие. Но слова не единственный инструмент, с помощью которого можно сообщить что-то пользователю. Элементы визуального дизайна, такие как цвет и форма, помогут воздействовать на пользователя на эмоциональном уровне.

Если вы хотите, чтобы ваши всплывающие окна не вызывали раздражение, выбирайте спокойные цвета: синий, зеленый, или мягкие пастельные тона. Белый поможет вызвать ощущение чистоты и лаконичности, особенно в сочетании с большим пространством между элементами. Что касается формы, всплывающее окно, как и любое окно компьютера, по умолчанию имеет прямоугольную или квадратную форму. Если убрать острые края и сделать его более округлым, то дизайн будет казаться дружелюбнее.

Скругленные края делают вашу рекламу более «дружелюбной». Дизайн Элисон Дэнис на Dribbble

Мягкие цвета, такие как зеленый и желтый, имеют успокаивающий эффект. Дизайн Синди Ван на Dribbble

Помните, что любая форма и цвет передают определенный смысл и вызывают какие-то ассоциации на подсознательном уровне.

Необычные формы и элементы могут сильно влиять на восприятие всплывающих окон. Дизайн ROY.L на Dribbblе

4. Следите, чтобы текст всплывающего окна легко считывался

В любой рекламе довольно сложно убедить посетителя кликнуть на кнопку с CTA, а у всплывающих окон особенно мало времени. Они мешают изучать контент, и самая первая реакция на них — закрыть как можно скорее. Чтобы ничего не отвлекало от основного сообщения, лучше отдать предпочтение минималистичному дизайну. Призыв к действию должен четко считываться, даже при беглом чтении.

Вот примерная структура всплывающего окна:

  • Заголовок с предложением или темой рекламы
  • Подзаголовок, разъясняющий ценность предложения
  • Изображение
  • CTA — призыв к действию на кнопке
  • Кнопка, чтобы закрыть окно

Некоторым поп-апам могут понадобиться дополнительные элементы, например поле ввода для адреса почты. В других случаях, наоборот, лучше убрать некоторые элементы, например подзаголовок или изображение. Выбор зависит только от того, поможет ли выбранный дизайн достичь ваших целей. Удерживает ли он пользователя и помогает ли совершить целевое действие?

Минималистичный дизайн тоже может быть заметным и привлекать внимание. Дизайн Пола Флавиуса Нечиты на Dribbble

5. Не убирайте кнопку закрытия всплывающего окна

Цель всплывающей рекламы — конверсия в желаемое действие. Конечно, так и хочется не дать пользователю закрыть объявление без совершения этого действия. Но с точки зрения пользовательского опыта кнопка закрытия необходима. Для этого достаточно разместить Х в правом верхнем углу. Да, это не самый оригинальный вариант дизайна, но самый естественный для пользователя — именно там он и будет искать эту кнопку.

Многие дизайнеры «прячут» кнопку закрытия серым цветом, и это неплохая тактика — возможность выхода хоть и есть, но не сильно заметна на фоне других элементов при первом взгляде.

Незаметного X серого цвета в правом верхнем углу обычно достаточно. Дизайн Елены Акимовой на Dribbble

Есть и другие варианты. Например, разместить кнопку закрытия рядом с CTA в такой же прямоугольной форме. Да, это отвлекает от призыва к действию и подчеркивает возможность выбора. Но можно скреативить и разместить на кнопке текст с посылом, что пользователь что-то упускает. Например: «Я не хочу экономить 15 %», как на иллюстрации ниже. Текст можно сделать шрифтом меньшего размера, чем призыв к действию.

Текст на кнопке закрытия может указывать на упущенную возможность. Дизайн Дага Марго на Dribbble

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

6. Адаптируйте всплывающие окна под мобильную версию

Мобильная версия — это не просто дизайн меньшего размера. Мобильный интерфейс кардинально отличается от десктопного.

Мобильная версия поп-апов должна быть удобной для чтения в вертикальной ориентации. Дизайн Анны Лазарёвой на Dribbble

Помимо размера нужно учитывать соотношение сторон: у экранов мобильных телефонов портретная ориентация, а у экранов компьютеров — альбомная. Поэтому рисунки текст, должны хорошо читаться в более вытянутом окне. Кроме того, на мобильных устройствах пользователь обычно пользуется одной рукой и большим пальцем. Поэтому поля формы, которые в декстопной версии должны быть достаточно небольшими, для пользователя мобильного делают намного больше. Учитывайте также, что всплывающие окна, которые появляются ближе к нижней части экрана, удобнее для пользователя — их можно достать большим пальцем.

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

Пример использования свайпинга в дизайне всплывающих окон. Дизайн ROY.L на Dribbble

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

7. Тестируйте ваши всплывающие окна и меняйте их дизайн

Как и любой дизайн, всплывающее окно требует творческого подхода. Но при его создании ориентироваться нужно в первую очередь на эффективность. Единственный способ оценить эффективность вашего дизайна — это выяснить, привлекает ли он клиентов.

Поэтому самое важное в процессе создания поп-апов — это тестирование и анализ. После того как вы оцените, помогает ли дизайн достичь поставленных целей (для этого вы можете использовать прошлые конверсии вместе со средним коэффициентом конверсии), вы сможете изменить или подправить дизайн.

Самый распространенный способ тестирования — это A/B-тест, когда вы помещаете две версии дизайна перед двумя сегментами пользователей, чтобы увидеть, какая из них работает лучше.

Расскажите в комментариях, какие всплывающие окна вам не нравятся? А какие нравятся? Какие еще советы можно дать дизайнерам?

Источник: 99designs.com

0
4 комментария
La Noche Oscura

Мне не нравятся всплывающие окна априори, не важно красивые они, дружелюбные или угрожают мне. Не помню, чтобы хоть раз я оформил подписку на сайт или указал контактные данные во всплывающем окне.

Ответить
Развернуть ветку
Александр Албул
Но можно скреативить и разместить на кнопке текст с посылом, что пользователь что-то упускает. Например: «Я не хочу экономить 15 %», как на иллюстрации ниже.

Не учите, пожалуйста, людей говну. Такие манипуляции не этичны по отношению к пользователю

Ответить
Развернуть ветку
Егор Карпов

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

Ответить
Развернуть ветку
Fedor Khomyuk

может просто пора отказаться от этого дерьма?!

Ответить
Развернуть ветку
Читать все 4 комментария
null