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

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

Еда

Domino’s Pizza

Domino’s Pizza занимается доставкой пиццы. Цель окна – узнать, какой способ получения пиццы удобнее для потенциальных клиентов.

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

Откоробки.ru

Откоробки.ru занимается доставкой продуктов. Цель попапа  – узнать город для доставки. Здесь самое важное – это информация, так что нет нужды в дополнительных деталях.

Детские товары

Детский мир

Детский мир — магазин товаров для детей.  Цель попапа – информировать пользователя об использовании cookie-файлов. Яркое всплывающее окно с небольшой иллюстрацией мультяшного персонажа – хороший выбор.

Mothercare

Mothercare –  интернет-магазин детских товаров. Цель – получить разрешение на уведомления от пользователя взамен на специальное предложение. Попап простой, с использованием текста в цвете сайта.

Дочки-сыночки

Дочки-сыночки – магазин товаров для детей. Цель – информировать пользователя о скидках. В окне используется привлекательная для пользователей сайта картинка.

Lego

Lego – фирменный магазин лего. Цель – опросить потенциальных клиентов. Здесь используется картинка по тематике самого магазина, кнопки тоже соответствуют стилю. 

Товары для дома

Askona

Askona занимается производством товаров для сна. Цель – собрать емейлы клиентов.

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

Маркет Света

Маркет Света – интернет-магазин светильников. Его цель – собрать базу подписчиков.

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

AliExpress

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

4. Одежда и обувь

KUPIVIP

KUPIVIP – интернет-магазин модных распродаж. Цель – информировать пользователя о скидках. Используется  интересная и красочная картинка. Также вы можете приурочивать крупные распродажи к какому-нибудь празднику и оповещать об этом своих клиентов. Например, этот мы отловили перед 8 марта.

Modis

Modis – магазин одежды. Цель – проинформировать пользователя о предложениях. Используется не только картинка, но и паттерн. Смотрится интересно!

Повторяющиеся картинки на фоне

Gloria Jeans

Gloria Jeans – магазин одежды. Цель – узнать регион для доставки.

Gloria Jeans заботится о пользователях и предлагает сразу выбрать город. Такой попап не нуждается в дополнительных деталях, потому что тут акцент на уточнении информации, а не привлечении пользователя к скидкам и акциям. Если вам нужна конкретная информация от пользователя, то этот попап идеально подойдёт.

Lamoda

Lamoda – магазин одежды. Использует собирающий попап, его цель – дать скидку в 10% за подписку на новости . Это стандартное всплывающее окно часто встречается на сайтах. Правда, оно подойдёт не для каждого сайта, так как может быть незаметным, как в примере.

Nike

Nike – интернет-магазин спортивных товаров. Использует всплывающее окно в стиле минимализм. Цель – собрать базу подписчиков.

В примере попап идеально подобран под стиль сайта: простой, строгий, со всей необходимой информацией.

Ювелирные изделия

Sokolov

Sokolov – магазин ювелирный изделий. Цель этого попапа – оповестить пользователя о подарках и собрать емейлы клиентов.

Используется всплывающее окно в стиле минимализм. Выглядит стильно и просто!

Также Sokolov использует ещё одно всплывающее окно.  В данном случае цель – оповестить пользователя о подарке. Используется стильная, яркая картинка для привлечения внимания.

585

585 – магазин ювелирный изделий. Цель – собрать емейлы клиентов. В попапе используется  картинка в стиле минимализм. Для гармонии красный цвет используется ещё и в кнопке. Выглядит привлекательно.

Подарки и игрушки

Цветы для всех

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

Гранд Каприз

Гранд Каприз – цветочный магазин. Цель – проинформировать пользователя о скидке. Попап сам по себе простой, использованы стандартный красный цвет и белая ленточка.

Банки

Открытие

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

У банка простое окно: текст и кнопка. Если не хотите использовать картинку или иллюстрацию, но хотите чтобы ваш попап выделялся, то этот вариант прекрасно подойдёт вам. Достаточно добавить яркий цвет, чтобы привлечь внимание пользователя. Но, если боитесь, что он будет сильно выбиваться, можно использовать цвета вашего сайта –  просто и стильно.

Авангард

Банк Авангард. Цель – оповестить пользователя о выгодных вкладах.

В попапе интересно взаимодействуют текст и картинка. Картинка очень динамично смотрится из-за того, что свинки-копилки изображены так, словно движутся из-за угла. Также есть забавный момент: свинья смотрит прямо на кнопку «Выбрать вклады», ненавязчиво намекая: «Жми!»  Цвет взят тоже не случайно, он соответствует корпоративным цветам банка.

Медицина

CM-Клиника

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

Медси

Медси – частная сеть медицинских клиник. Цель попапа – собрать персональные данные, чтобы проконсультировать пользователя. В окне используется картинка с затемнением, чтобы текст был читабельным для пользователя. Цвет кнопки подобран под логотип клиники.

Династия

Династия – стоматологическая клиника. Цель – проинформировать пользователя о скидках и упростить запись к врачу. Простой текстовой попап, соответствует цветовой гамме сайта.

Обучение

TexTerra

TexTerra – агентство комплексного интернет-маркетинга. Цель всплывающего окна – проинформировать пользователя и позвать на онлайн-курс.

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

D`SKUL

D`SKUL проводит обучающие курсы. Используются аж два всплывающих окна. Цель первого – проинформировать пользователя и позвать на бесплатный курс. Цель второго – собрать персональные данные. У обоих попапов цвет красиво гармонирует с их сайтом.

Альпина Паблишер

Альпина Паблишер – интернет-магазин книг. Цель –  проинформировать пользователя о скидках. В баннере всплывающего окна используется иллюстрация, которая соответствует книжному магазину.

Разные сферы бизнеса используют различные всплывающие окна: 

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

В дизайне попапов чаще всего встречаются: 

• Картинки 
• Фотографии
• Иллюстрации (рисунок, гравюра или другое изображение, поясняющее текст)
• Анимация 
• GIF-изображения

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

В enPop очень гибкая настройка показов. При такой ни один пользователь с криками «Как достали эти попапы!» не закроет страницу сайта. (боковая ссылка на статью про то, как создавать попапы) А ещё там галерея красивых шаблонов, которые постоянно пополняются. Напишите нам и проверьте сами 🙂