12 рекомендаций по дизайну всплывающих окон, которые вам нужно знать (для мобильных и настольных компьютеров)

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

Конечно, если вы собираете хорошие всплывающие окна.

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

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

В этом руководстве вы узнаете:

• Факторы того, что делает всплывающее окно «хорошим» для ПК или мобильных устройств (с тринадцатью примерами)
• Три основные ошибки, которые могут снизить производительность многообещающего всплывающего окна
• Пять бонусных примеров дизайна всплывающих окон для расширения списка адресов электронной почты

С этим, давайте погрузимся!

Хотите создавать эффективные всплывающие окна, которые находят отклик у ваших посетителей? Загрузите наш контрольный список всплывающих сообщений и увеличьте коэффициент конверсии всплывающих окон в 3 раза!

Если ваша цель — привлечь больше подписчиков непосредственно с вашего веб-сайта, всплывающее окно электронной почты может помочь.

Ниже приведены некоторые принципы повышения коэффициента конверсии всплывающих окон на компьютере. (Кроме того, они работают и с мобильными посетителями.)

1. Привлеките внимание посетителей яркими цветовыми сочетаниями.

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

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

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

Например, эта бело-черная цветовая схема от Thredup.com проста, но стильна и ярка.

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

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

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

Сделайте акцент на:

• Делайте всплывающие окна краткими: думайте, что «меньше значит больше» и избегайте стен текста.
• Напишите мощные заголовки с броскими фразами, такими как «бесплатно», «сейчас» или «сохраните», чтобы сразу подчеркнуть преимущества вашего предложения.
• Разделите текст всплывающего окна на четкие разделы (подумайте: заголовок → основной текст → кнопка призыва к действию (CTA)), чтобы направить ваших читателей к подписке.

Ниже приведен отличный пример предложения от Trade Coffee, которое следует рекомендациям по дизайну всплывающих окон, отмеченным выше.

3. Представьте свои всплывающие окна как персонализированное предложение (подсказка: не реклама)

В идеале ваши всплывающие окна не должны восприниматься как реклама.

Мы понимаем: многие потребители не в восторге от всплывающих окон. Годы и годы надоедливой рекламы оставили всплывающие окна с плохой репутацией.

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

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

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

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

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

Вот еще один пример от Uniqlo. Обратите внимание, как само сообщение выглядит как рука помощи («помогите нам адаптировать сообщения для вас»):

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

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

4. Свяжитесь с потенциальными клиентами через разговорную копию

Укрепление доверия — это решающий фактор для ваших всплывающих окон.

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

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

Это всплывающее окно от Quip — отличный пример того, о чем мы говорим. Дружелюбный и приветливый, без жаргона и «деловой речи».

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

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

На самом деле, иногда тонкость может иметь большое значение для составления вашего списка.

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

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

Посмотрите пример от Free People ниже:

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

Кроме того, эти всплывающие окна с меньшей вероятностью нарушат поток или эстетику вашего сайта.

6. Убедитесь, что ваше всплывающее окно доходит до людей в нужный момент

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

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

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

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

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

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

7. Поощряйте посетителей действовать быстро, делая текст кратким.

Быть экономным в своих словах — безопасная ставка для всплывающих окон.

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

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

Например, это всплывающее окно подписки по электронной почте от Casetify сразу переходит к делу.

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

8. Сделайте ваши всплывающие окна максимально удобными для нажатия

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

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

Слишком много мест, чтобы нажать. Запутанные цвета. Бесполезная прокрутка. У этого списка нет конца.

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

• Определенные кнопки (как для входа , так и для выхода, если необходимо)
• Четкий заголовок и четкая копия, идеально подходящие для одной страницы (прокрутка не требуется).
• Цвета, которые разделяют различные элементы вашего всплывающего окна

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

Например, это предложение от Skechers понятно и легко ориентируется независимо от того, заинтересован он в этом или нет.

То же самое для этого мобильного всплывающего окна от Pura Vida:

9. Сделайте свои предложения легкими и требующими меньше полей формы

Не случайно для всех примеров мобильных всплывающих окон в этом посте требуется только адрес электронной почты для подписки.

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

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

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

Фразы CTA являются важной частью оптимизации конверсии.

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

CTA от Nectar Sleep («Сэкономьте 399 долларов») обещает огромную экономию и делает их предложение более ценным.

Просто просить посетителей сайта «щелкнуть здесь» — это упущенная возможность подчеркнуть преимущества.

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

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

Нашему мозгу легче обрабатывать числа, чем читать текст. Обратите внимание, как много мобильных всплывающих окон полагаются на «СКИДКА 10 $» или «СОХРАНИТЕ 10%» в качестве основного элемента своего предложения?

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

12. Дважды проверьте, что ваши всплывающие окна удобны для Google

Хотя всплывающие окна не влияют напрямую на позицию вашего сайта в Google, поисковая система заняла позицию в отношении «навязчивого» контента .

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

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

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

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

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

1. Распространение нерелевантного или ненужного контента

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

2. Выгодное предложение

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

Получите стимулы для творчества и мозгового штурма, которые выходят за рамки базовых обновлений или скидки 5 %.

3. Полагаться на олдскульные спам-дизайны всплывающих окон

Здесь, в OptiMonk, мы ведем крестовый поход против плохих всплывающих окон.

Занятый. Спам. Продажи. Вы знаете, о которых мы говорим.

Хорошие новости? Создание стильных, кликабельных всплывающих окон возможно для любого бренда благодаря таким инструментам, как OptiMonk.

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

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

1. Тентри

Это дополнительное сообщение от Tentree — яркий пример ненавязчивого всплывающего окна.

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

2. ЧЕРНЫЙ и ЖИРНЫЙ

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

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

3. Байи

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

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

4. Возьмите зеленый дом

Это еще один пример простого, но эффективного всплывающего окна, которое помогает расширить список адресов электронной почты.

Разговорный язык («Хотите специальное предложение на первый заказ?») и призыв к действию («ДА, ПОЖАЛУЙСТА») демонстрируют, как основные варианты текста могут убедить посетителей предоставить свою информацию.

5. Волшебная ложка

В идеале ваше всплывающее окно должно говорить само за себя. Эта реклама от Magic Spoon обещает что-то большое с шансом выиграть бесплатные хлопья в течение месяца, используя ясный язык и сильные слова («бесплатно», «выигрыш»), чтобы заявить о себе.

И на этом мы завершаем наш гайд!

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

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

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