Главная  /  Все  / 5 способов заставить всплывающие окна отлично выглядеть на мобильном устройстве (для вашего адаптивного веб-сайта)

5 способов заставить всплывающие окна отлично выглядеть на мобильном устройстве (для вашего отзывчивого…

Мобильные всплывающие окна

Наш мир официально стал мобильным. Анализируя долю цифровых минут, потраченных пользователями в США на разных устройствах, на долю смартфонов пришлось 62 процентов за ними следуют настольные компьютеры с долей 29 процентов и планшеты с долей 9 процентов.

Стимулируя движение к мобильной эре, Google объявил о внедрении индексации с приоритетом мобильных устройств по умолчанию для всех веб-сайтов, начиная с 1 июля 2019 года. Все эти факторы сделали обязательным использование методов адаптивного дизайна при разработке веб-сайтов и веб-приложений. все.

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

2. Следите за целью касания

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

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

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

3. Ограничивайте размер всплывающего окна

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

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

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

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

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

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

5. Поймите цель и обеспечьте ценность

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

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

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

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

Рахул Варшнея — сооснователь и президент компании Аркенея. Рахул упоминался как лидер в области технологий на многих медиаканалах, таких как Bloomberg TV, Forbes, HuffPost, Inc и других.