Хорошие и неудачные примеры, а также практические советы по дизайну, копирайтингу и таргетингу, которые помогут создать эффективное всплывающее окно, — в материале digital-маркетолога сервиса 13Chats Юлии Примы.

Юлия Прима Юлия Прима Digital-маркетолог 13Chats, копирайтер

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

 

Ошибки в дизайне попапов

Неадаптивный дизайн

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

Хорошо: минимум текста, одно поле и кнопка — рецепт качественного всплывающего окна, которое одинаково хорошо смотрится и на десктопах, и на смартфонах.

Поп-ап на сайте
Источник: Хорошоп
Поп-ап смартфоне
Источник: Хорошоп

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

Пап-ап на сайте тренингового центра
Источник: Тренинговый центр Ярослава Самойлова

Дизайн, не соответствующий фирменному стилю сайта

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

Хорошо: простой и небрежный попап с текстом о cookie органично сочетается с общим дизайном.

Поп-ап на сайте финансовая культура
Источник: Финансовая культура

Плохо: яркий градиент попапа идет вразрез со строгим оформлением сайта.

Пап-ап на сайте Cases.Media
Источник: Cases.Media

Перегруженность иконками, цветами, стилями и шрифтами

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

Хорошо: интернет-магазин использует один шрифт в разных размерах, цвета в заголовке, на кнопке и картинке перекликаются.

Поп-ап на сайте интернет-магазина Цитрус
Источник: Цитрус

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

Поп-ап на сайте SpaceLevel
Источник: SpaceLevel

Текст плохо читается из-за пестрого фона

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

Хорошо: заголовок попапа размещен на однотонном фоне, а информация о скидке — на контрастной подложке.

Поп-ап на сайте A-Fitness
Источник: A-Fitness

Плохо: заголовок с жирным начертанием читается плохо, а белый тонкий шрифт вовсе растворяется в картинке под ним.

Поп-ап на сайте YogaMarket
Источник: YogaMarket

Незаметная или неактивная кнопка закрытия всплывающего окна

Не вынуждайте пользователя подписаться, чтобы получить доступ к контенту. Так удастся только уничтожить лояльность и собрать базу тех, кто ненавидит разработчиков вашего сайта.

Кнопка закрытия попапа должна быть достаточно большой для использования на мобильных, заметной и кликабельной с первых секунд появления всплывающего окна. Обычно ее оформляют в виде крестика в правом верхнем углу попапа или размещают на уровне с основным CTA-элементом, чтобы дать явный выбор между «Подписаться» и «Отказаться».

Хорошо: серый крестик на белой однородной подложке хорошо заметен, расположен в привычном месте и активен с первой секунды отображения попапа.

Поп-ап на сайте Rozetka
Источник: Rozetka

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

Поп-ап на сайте Plerdy
Источник: Plerdy

Больше трех полей в форме

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

Хорошо: компания запрашивает необходимый минимум данных — email и имя для персонализации рассылок.

Поп-ап на сайте Телеканала Еда
Источник: Телеканал Еда

Плохо: академия сомелье предлагает перезвонить пользователю и подарить скидку 5%, но, кроме номера телефона, запрашивает email и предлагает оставить сообщение.

поп-ап на сайте winetime academy
Источник: Winetime Academy

Поля без подсказок, валидации и маски ввода номера телефона

Чтобы упростить заполнение формы и снизить процент ошибок, добавьте плейсхолдеры (подсказки внутри поля формы) и маски ввода, которые будут исчезать при клике на соответствующее поле. Например, подсказку [email protected], если запрашиваете email, или «+7 (9__) ___-__-__» для ввода номера телефона.

Хорошо: поля содержат полезные подсказки, которые исчезают, как только человек начинает вводить свои персональные данные.

Поп-ап на сайте CoralTravel
Источник: CoralTravel

Плохо: поле для ввода электронной почты теряется на фоне остальных элементов формы и не помогает посетителю сайта ввести email в правильном формате.

Поп-ап на сайте магазина Oh My Look
Источник: Oh My Look

«‎Битые» картинки или ошибки в коде

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

Хорошо: все элементы попапа на месте.

Поп-ап на сайте Yakov Osipenkov
Источник: Yakov Osipenkov

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

Поп-ап на сайте Envybox
Источник: Envybox

Отсутствие CTA-элемента

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

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

Хорошо: кнопка качественно интегрирована в дизайн формы: акцентирует внимание и перекликается с другими элементами сайта.

 

Поп-ап на AdMe
Источник: AdMe

Плохо: всплывающая форма без кнопки привлекает внимание, но не перенаправляет трафик на целевую страницу.

Поп-ап на сайте Идеи по развитию России
Источник: Идеи по развитию России

Фейковый обратный отсчет

Чтобы не вызывать раздражение у посетителей сайта, убирайте анимацию обратного отсчета сразу после того, как таймер дойдет до нуля. И, конечно, не рискуйте репутацией, когда клиент заходит на сайт повторно через несколько дней — и видит знакомую надпись «До конца распродажи остался 1 день».

Хорошо: таймер активный, указана дата, до которой можно получить скидку.

Поп-ап на сайте Genius Marketing
Источник: Genius Marketing

Плохо: таймер дошел до нуля, но продолжает висеть в шапке сайта даже после того, как завершилось событие.

поп-ап на сайте Лаборатория онлайн-бизнеса
Источник: Лаборатория онлайн-бизнеса

Стоковые картинки

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

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

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

Поп-ап на сайте Агентства интернет-маркетинга Малевич
Источник: Агентство интернет-маркетинга Малевич

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

Поп-ап на сайте LeadGenic
Источник: LeadGenic

Слишком широкая информационная полоса

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

Хорошо: агрегатор туров выполняет требования GDPR (общий регламент защиты данных), но не отвлекает внимание от основного содержания страницы.

Поп-ап на сайте YouTravel.Me
Источник: YouTravel.Me

Плохо: оповещение о сборе и хранении cookies занимает половину экрана и мешает взаимодействовать с контентом.

Поп-ап на сайте Crave
Источник: Crave

Ошибки в текстах попапов

Грамматические ошибки и опечатки

Ошибку в слове или лишнюю запятую замечает не каждый посетитель сайта, но эти мелочи у внимательных людей снижают доверие к ресурсу, а значит, и конверсию. Чтобы избежать ошибок, доверьте проверку текстов онлайн-сервису, а лучше — редактору на фрилансе.

Хорошо: отсутствие ошибок — признак профессионального подхода к задаче.

поп-ап на сайте Completo
Источник: Completo

Плохо: слово «расылка» — не критичная ошибка, но даже такая мелочь может вселить сомнения и снизить доверие к интернет-магазину.

Поп-ап на сайте EDP™
Источник: EDP™

Отсутствие выгоды или ценности

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

Хорошо: тем, кто интересуется товарами для ремонта, сантехникой и освещением, предлагают бесплатную доставку покупок с этого раздела.

Поп-ап на сайте Rozetka
Источник: Rozetka

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

Поп-ап на сайте eTxt
Источник: eTxt

Избыток текста

Золотой стандарт оформления всплывающего окна с формой подписки — заголовок, 2–3 поля ввода и CTA-элемент. Допустимо добавить 1–2 предложения, которые расшифровывают оффер в заголовке, а также ссылки на политику конфиденциальности и обработку персональных данных.

Чем больше контента, тем профессиональнее нужно расставить в нем акценты, чтобы попап не выглядел перегруженным.

Хорошо: заголовок, дополнительный текст, три поля, кнопка и согласие на сбор и обработку персональных данных — большой объем данных, который удалось поместить на один экран без вреда для читабельности.

поп-ап на сайте Nike
Источник: Nike

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

Поп-ап на сайте InSales
Источник: InSales

Выравнивание большого блока текста по центру

Отцентрированный текст сложно читать: приходится постоянно перескакивать с одной строчки на другую, рискуя каждый раз потерять нить повествования. Лучше сократить текст или разделить его на абзацы или столбцы в 1–2 предложения с выравниванием по левому краю.

Хорошо: за счет иконок и выравнивания по левому краю текст легко читается.

Поп-ап на сайте LPgenerator
Источник: LPgenerator

Плохо: рваный край центрированного текста и отсутствие отступов между элементами маркированного списка усложняют восприятие предложения.

Попа-ап на сайте Тренинговый центр Ярослава Самойлова
Источник: Тренинговый центр Ярослава Самойлова

Курсив или имитация рукописи

Чтобы акцентировать внимание или расшифровать оффер, используйте выделение цветом. Также допустимо жирное начертание нескольких ключевых слов.

Хорошо: цветовые акценты соответствуют дизайну сайта и легко воспринимаются.

Поп-ап на сайте Envybox
Источник: Envybox

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

Поп-ап на сайте ProjectSEO
Источник: ProjectSEO

Отсутствие заголовка

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

Хорошо: емкий краткий заголовок содержит оффер и объясняет, что нужно сделать для получения выгоды.

Поп-ап на сайте Love&Live
Источник: Love&Live

Плохо: чтобы разобраться, что предлагает компания, нужно прочитать два абзаца текста с выравниванием по центру.

Поп-ап на сайте Sunlight
Источник: Sunlight

Ошибки в настройках таргетинга попапов

Быстрое и внезапное появление окна

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

Вы можете ориентироваться на среднее время на сайте: например, если пользователи проводят на страницах одну минуту, показывать персональные предложения можно через 20–30 секунд.

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

Хорошо: сразу после захода на сайт пользователя просят уточнить регион доставки, чтобы показывать актуальные предложения.

Поп-ап на сайте Азбуки Вкуса
Источник: Азбука Вкуса

Плохо: сразу после того, как загрузилась страница, появляется попап с запросом email, хотя пользователь еще не успел изучить страницу.

Поп-ап на сайте Sumo
Источник: Sumo

Больше одного всплывающего окна одновременно

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

Хорошо: внимание акцентируется на всплывающем окне; чтобы заказать обратный звонок или написать в чат, нужно активировать нужный элемент самостоятельно.

Поп-ап на сайте Академия SEO
Источник: Академия SEO

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

Поп-ап на сайте GeniusMarketing
Источник: GeniusMarketing

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

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

Хорошо: виджет онлайн-чата размещен выше длинного баннера со специальным предложением.

Поп на сайте  Милы Левчук
Источник: Сайт Милы Левчук

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

Поп-ап на сайте RussiaDiscovery
Источник: RussiaDiscovery

Текст попапа написан не на языке сайта

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

Хорошо: текст всплывающего окна написан на украинском, как и контент сайта.

Поп-ап на сайте Adidas
Источник: Adidas

Плохо: украиноязычный попап размещен на русской версии сайта.

Поп-ап на сайте Kims
Источник: Kims

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

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

Вся интернет-реклама в eLama

Один кабинет и кошелек для 13 систем и сервисов, инструменты для повышения эффективности, бесплатное обучение и помощь на всех этапах работы.

Зарегистрироваться