Хорошие и неудачные примеры, а также практические советы по дизайну, копирайтингу и таргетингу, которые помогут создать эффективное всплывающее окно, — в материале digital-маркетолога сервиса 13Chats Юлии Примы.
Юлия Прима Digital-маркетолог 13Chats, копирайтерМиллионы сайтов используют всплывающие окна, но только некоторым удается создать привлекательные и эффективные попапы, которые приносят лиды и увеличивают онлайн-продажи. Я исследовала русскоязычные сайты, чтобы выделить частые ошибки и сформулировать базовые правила создания идеальных попапов для разных бизнесов.
Ошибки в дизайне попапов
Неадаптивный дизайн
Сделайте разные попапы для десктопной и мобильной версий сайта или адаптируйте внешний вид всплывающих окон под разные устройства. Чем меньше экран, тем лаконичнее должны быть формулировки и меньше полей для ввода.
Хорошо: минимум текста, одно поле и кнопка — рецепт качественного всплывающего окна, которое одинаково хорошо смотрится и на десктопах, и на смартфонах.
Плохо: форма захвата лидов не помещается даже на экране ноутбука: невозможно оценить, какие данные запрашивает компания; чтобы заполнить все поля и отправить данные, нужно скроллить вниз.
Дизайн, не соответствующий фирменному стилю сайта
В стремлении привлечь внимание легко переступить черту и создать кричащий баннер, который будет смотреться отталкивающе и чужеродно. Яркие цвета допустимы, но только если они вписываются в общую визуальную концепцию страницы.
Хорошо: простой и небрежный попап с текстом о cookie органично сочетается с общим дизайном.
Плохо: яркий градиент попапа идет вразрез со строгим оформлением сайта.
Перегруженность иконками, цветами, стилями и шрифтами
Чтобы визуал зацепил, достаточно одного шрифта разной насыщенности и сочного визуала. Попытка привлечь внимание разномастной типографикой и радужным дизайном смотрится непрофессионально и усложняет восприятие оффера.
Хорошо: интернет-магазин использует один шрифт в разных размерах, цвета в заголовке, на кнопке и картинке перекликаются.
Плохо: пестрый фон, контрастная иконка, цвета и начертания шрифта спорят между собой и уводят внимание от кнопки — главного акцентного элемента.
Текст плохо читается из-за пестрого фона
Если текст накладывается на значимые части изображения или мелкие детали, его восприятие и читабельность усложняется.
Хорошо: заголовок попапа размещен на однотонном фоне, а информация о скидке — на контрастной подложке.
Плохо: заголовок с жирным начертанием читается плохо, а белый тонкий шрифт вовсе растворяется в картинке под ним.
Незаметная или неактивная кнопка закрытия всплывающего окна
Не вынуждайте пользователя подписаться, чтобы получить доступ к контенту. Так удастся только уничтожить лояльность и собрать базу тех, кто ненавидит разработчиков вашего сайта.
Кнопка закрытия попапа должна быть достаточно большой для использования на мобильных, заметной и кликабельной с первых секунд появления всплывающего окна. Обычно ее оформляют в виде крестика в правом верхнем углу попапа или размещают на уровне с основным CTA-элементом, чтобы дать явный выбор между «Подписаться» и «Отказаться».
Хорошо: серый крестик на белой однородной подложке хорошо заметен, расположен в привычном месте и активен с первой секунды отображения попапа.
Плохо: у пользователя нет выбора — если он не хочет подписываться, остается или ждать, пока появится возможность закрыть попап, или уходить с сайта.
Больше трех полей в форме
Формы подписки длиннее трех полей заполнять долго и сложно, поэтому их конверсия, как правило, ниже, чем у более лаконичных форм. Чтобы повысить эффективность, уменьшите количество обязательных полей и перейдите к концепции «один попап — одно действие».
Хорошо: компания запрашивает необходимый минимум данных — email и имя для персонализации рассылок.
Плохо: академия сомелье предлагает перезвонить пользователю и подарить скидку 5%, но, кроме номера телефона, запрашивает email и предлагает оставить сообщение.
Поля без подсказок, валидации и маски ввода номера телефона
Чтобы упростить заполнение формы и снизить процент ошибок, добавьте плейсхолдеры (подсказки внутри поля формы) и маски ввода, которые будут исчезать при клике на соответствующее поле. Например, подсказку address@example.com, если запрашиваете email, или «+7 (9__) ___-__-__» для ввода номера телефона.
Хорошо: поля содержат полезные подсказки, которые исчезают, как только человек начинает вводить свои персональные данные.
Плохо: поле для ввода электронной почты теряется на фоне остальных элементов формы и не помогает посетителю сайта ввести email в правильном формате.
«Битые» картинки или ошибки в коде
Тестируйте всплывающие окна на разных экранах перед публикацией, чтобы избежать проблем с отображением. Обращайте внимание на корректность показа картинок, расположение текста, работоспособность кнопок и ссылок.
Хорошо: все элементы попапа на месте.
Плохо: на всплывающем окне отображается кусок кода. Это не влияет на работоспособность формы, но может сбить с толку пользователей и снизить конверсию.
Отсутствие CTA-элемента
Попап должен содержать четкий призыв к действию, чтобы пользователям было ясно, что нужно сделать для получения обещанной выгоды.
Выделите ключевую кнопку цветом и размером — она должна отличаться от остальных элементов всплывающего окна. Обводка допустима только для прозрачных кнопок; попытка выделить и так яркий CTA-элемент усложняет восприятие.
Хорошо: кнопка качественно интегрирована в дизайн формы: акцентирует внимание и перекликается с другими элементами сайта.
Плохо: всплывающая форма без кнопки привлекает внимание, но не перенаправляет трафик на целевую страницу.
Фейковый обратный отсчет
Чтобы не вызывать раздражение у посетителей сайта, убирайте анимацию обратного отсчета сразу после того, как таймер дойдет до нуля. И, конечно, не рискуйте репутацией, когда клиент заходит на сайт повторно через несколько дней — и видит знакомую надпись «До конца распродажи остался 1 день».
Хорошо: таймер активный, указана дата, до которой можно получить скидку.
Плохо: таймер дошел до нуля, но продолжает висеть в шапке сайта даже после того, как завершилось событие.
Стоковые картинки
Люди, изображающие эмоции на камеру, уже давно не впечатляют. То же самое касается рукопожатий в бизнес-тематике или Гарольда, скрывающего боль, на сайте клиники для пенсионеров.
Выбирайте связанные с тематикой бизнеса оригинальные изображения, заказывайте уникальную графику или делайте акцент на тексте, если в проекте пока нет дизайнера.
Хорошо: интернет-агентство не побоялось разместить текст ловца лидов на однотонном фоне без картинки, чтобы не нагружать посетителей сайта и быстро сконвертировать сомневающихся.
Плохо: такой же ловец лидов, но уже со стоковой картинкой, вызывает раздражение и желание быстрее покинуть сайт.
Слишком широкая информационная полоса
Информационная полоса не должна перекрывать доступ к контенту. Размещайте на ней короткие емкие сообщения, которые не будут отвлекать внимание посетителей от страниц сайта. Если вы хотите сделать акцентное сообщение, выбирайте формат оверлея или модального окна на весь экран.
Хорошо: агрегатор туров выполняет требования GDPR (общий регламент защиты данных), но не отвлекает внимание от основного содержания страницы.
Плохо: оповещение о сборе и хранении cookies занимает половину экрана и мешает взаимодействовать с контентом.
Ошибки в текстах попапов
Грамматические ошибки и опечатки
Ошибку в слове или лишнюю запятую замечает не каждый посетитель сайта, но эти мелочи у внимательных людей снижают доверие к ресурсу, а значит, и конверсию. Чтобы избежать ошибок, доверьте проверку текстов онлайн-сервису, а лучше — редактору на фрилансе.
Хорошо: отсутствие ошибок — признак профессионального подхода к задаче.
Плохо: слово «расылка» — не критичная ошибка, но даже такая мелочь может вселить сомнения и снизить доверие к интернет-магазину.
Отсутствие выгоды или ценности
Качественный оффер легко читается, не содержит неизвестных для ЦА слов и несет явную ценность для посетителей страницы. Не всегда это скидка или подарок: в зависимости от тематики люди отлично реагируют на обучающие гайды, шутливые предсказания или доступ к свежим исследованиям.
Хорошо: тем, кто интересуется товарами для ремонта, сантехникой и освещением, предлагают бесплатную доставку покупок с этого раздела.
Плохо: предлагать кредиты тем, кто ищет способы снизить показатель отказов на своем сайте.
Избыток текста
Золотой стандарт оформления всплывающего окна с формой подписки — заголовок,
Чем больше контента, тем профессиональнее нужно расставить в нем акценты, чтобы попап не выглядел перегруженным.
Хорошо: заголовок, дополнительный текст, три поля, кнопка и согласие на сбор и обработку персональных данных — большой объем данных, который удалось поместить на один экран без вреда для читабельности.
Плохо: в дизайне не соблюдается иерархия элементов и используется один и тот же отступ между всеми фрагментами формы, поэтому окно выглядит перегруженным.
Выравнивание большого блока текста по центру
Отцентрированный текст сложно читать: приходится постоянно перескакивать с одной строчки на другую, рискуя каждый раз потерять нить повествования. Лучше сократить текст или разделить его на абзацы или столбцы в
Хорошо: за счет иконок и выравнивания по левому краю текст легко читается.
Плохо: рваный край центрированного текста и отсутствие отступов между элементами маркированного списка усложняют восприятие предложения.
Курсив или имитация рукописи
Чтобы акцентировать внимание или расшифровать оффер, используйте выделение цветом. Также допустимо жирное начертание нескольких ключевых слов.
Хорошо: цветовые акценты соответствуют дизайну сайта и легко воспринимаются.
Плохо: в случае, когда полноценный блок текста написан курсивом, а потом помещен его на фон со слабым контрастом, пользователи не будут тратить время и вчитываться.
Отсутствие заголовка
Чтобы выиграть борьбу за внимание пользователя, необходим простой, понятный и емкий заголовок, содержащий основной оффер. Если попап не зацепит за доли секунды, его закроют.
Хорошо: емкий краткий заголовок содержит оффер и объясняет, что нужно сделать для получения выгоды.
Плохо: чтобы разобраться, что предлагает компания, нужно прочитать два абзаца текста с выравниванием по центру.
Ошибки в настройках таргетинга попапов
Быстрое и внезапное появление окна
Иногда попапы появляются до того, как пользователь изучил сайт или страницу. Однако пользователи охотнее оставляют контакты, если дать им возможность ознакомиться с содержанием страницы и потом сделать персонализированное предложение.
Вы можете ориентироваться на среднее время на сайте: например, если пользователи проводят на страницах одну минуту, показывать персональные предложения можно через
Это правило не распространяется на сайты, ассортимент, цены и условия работы которых зависят от региона. Например, на сайте доставки продуктов допустимо сначала уточнить регион пользователя, а потом показать основной контент.
Хорошо: сразу после захода на сайт пользователя просят уточнить регион доставки, чтобы показывать актуальные предложения.
Плохо: сразу после того, как загрузилась страница, появляется попап с запросом email, хотя пользователь еще не успел изучить страницу.
Больше одного всплывающего окна одновременно
Появление сразу нескольких окон дезориентирует и раздражает посетителя сайта. Настройте активацию всплывающих элементов — онлайн-чата, уведомления про использование файлов cookies, кнопки обратного звонка, информационной полоски вверху сайта, попапов — в разное время. Идеально, если персональные предложения будут появляться в зависимости от поведения и действий пользователя.
Хорошо: внимание акцентируется на всплывающем окне; чтобы заказать обратный звонок или написать в чат, нужно активировать нужный элемент самостоятельно.
Плохо: с первой секунды на сайте контент перекрывает всплывающее окно, через которое просвечивает информационный баннер вверху страницы. Слишком много агрессивной рекламы для аудитории, которая впервые попала на страницу.
Всплывающие окна перекрывают друг друга
Если нет возможности показывать попапы по очереди, разместите небольшие всплывающие уведомления в разных частях окна, чтобы они не конфликтовали. И проверьте отображение на мобильных, чтобы не причинять неудобства пользователям.
Хорошо: виджет онлайн-чата размещен выше длинного баннера со специальным предложением.
Плохо: чтобы закрыть длинный попап с запросом email или подписаться на рассылку, нужно сначала свернуть онлайн-чат.
Текст попапа написан не на языке сайта
Когда сайт доступен в нескольких языковых версиях, нужно следить за выбором языка во всплывающих окнах. Если русскоязычные пользователи, возможно, и поймут украинский, то англоязычного посетителя баннер с кириллицей собьет с толку.
Хорошо: текст всплывающего окна написан на украинском, как и контент сайта.
Плохо: украиноязычный попап размещен на русской версии сайта.
Используйте попапы для лидогенерации, информирования и поддержки пользователей — люди позитивно воспринимают продуманные всплывающие окна, которые появляются по действию или поведению.
Подготовьте цепляющий дизайн, напишите емкий текст с ценным для посетителей сайта предложением, настройте таргетинг, чтобы предложение появлялось в подходящий момент.