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

Posted on by riasevastopol

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

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

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

Просматривайте кроме этого: Что такое мобильные лендинги и для чего они необходимы

Функциональность Мысль №1: Пристально относитесь ко времени

Не нужно забывать, что мобильные пользователи всегда торопятся. Убедитесь в том, что загрузка вашего лендинга происходит достаточно скоро. По данным Kinsta, 74% пользователей мобильных устройств сразу же закрывают страницу, в случае если на ее загрузку уходит более 5 секунд.

Обладатели мобильных устройств в среднем выполняют 1,4 часа в сутки, просматривая страницы в сети. 74% пользователей мобильного интернета закрывают страницу, в случае если на ее загрузку уходит больше 5 секунд.31 Идея для мобильных лендингов, которые стоит взять на вооружение. часть 1

Расширить скорость загрузки лендинга возможно, воспользовавшись следующими несложными рекомендациями:

  • почистите код;
  • сведите к минимуму применение HTML и CSS;
  • применяйте сжатие GZIP;
  • уменьшите количество редиректов;
  • измените размещение скриптов;
  • уменьшите количество плагинов WordPress;
  • сделайте апдейт собственного хостинга;
  • измените размер изображений либо применяйте инструменты их сжатия;
  • для размещения изображений применяйте Content Delivery Network (CDN).

Мысль №2: Звонок в качестве CTA

Вы имеете возможность перевоплотить CTA в кнопку «Позвоните нам». Так, вашим потенциальным клиентам будет намного легче связаться с вами. Согласно расчетам специалиста Search Marketing Expo, продажи через подобные кнопки достигнут количеств в 2 триллиона долларов к 2019 году:

Ниже представлено пара примеров того, как может смотреться кнопка «Позвоните нам» на мобильном лендинге:

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

Мысль №3: Геолокация

HTML5 разрешит вам применять Geolocation API. Благодаря данной функции визитёры вашего лендинга смогут сказать совокупности о собственном расположении. Так они будут получать более релевантные предложения, что положительно скажется на пользовательском опыте.

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

Согласно данным Search Engine Watch 50% пользователей мобильных устройств сохраняют надежду заметить в поиске предложения местных компаний. 61% таких запросов заканчивается приобретением. Вследствие этого, не следует упускать возможность расширить коэффициент конверсии при помощи геолокации.

Мысль №4: Разные типы устройств

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

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

Просматривайте кроме этого: Желаете повысить конверсию? Начните с этих 4 метрик Гугл Analytics

Мысль №5: SEO для мобильных лендингов

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

В отчете возможно заметить следующие эти:

  • показатель mobile friendly;
  • дешёв ли сайт для индексации Гугл;
  • скорость загрузки сайта на мобильных устройствах;
  • редиректы;
  • заголовки HTTP для мобильной версии;
  • и т.п.

Мысль №6: Функция «Отложить товар»

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

Дабы сделать мобильный пользовательский опыт более действенным, добавьте на собственный сайт возможности совершить приобретение позднее и отложить понравившийся товар. Это особенно релевантно для сферы электронной коммерции.

Мысль №7: Размещение элементов на экране

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

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

Помимо этого, в соответствии с итогам изучения Стива Хубера, 49% пользователей держат телефоны в правой руке.

Ниже возможно заметить тепловую карту передвижений громадного пальца по экрану сотового телефона:

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

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

Мысль №8: Пользовательский опыт

Протестируйте собственный лендинг при помощи инструмента наподобие Mobile Phone Emulator. Тестирование возможно проводить в портретном либо пейзажном режиме. Это окажет помощь вам осознать, как дешёвы страницы вашего сайта для пользователей.

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

Эксперты Mozilla Developer Network советуют проверить следующие параметры:

  • цвет – контраст цветов обязан соответствовать требованиям WCAG 2.0 AA level;
  • видимость – убедитесь в том, что невидимые элементы вправду скрыты от глаз пользователя;
  • фокус – все активные элементы, такие как ссылки, кнопки, лид-формы, должны легко обнаруживаться;
  • текстовые эквиваленты – создавайте текстовые эквиваленты для нетекстовых элементов. Это особенно релевантно для мобильных приложений.

Помимо этого, для мобильной версии сайта вам стоит применять HTML5, jQuery, JPG и GIF. Но направляться отказаться от применения фреймов, Flash-анимации и устаревших плагинов.

Совет №9: Применение клавиатуры

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

Дабы указать необходимый тип клавиатуры, применяйте HTML5:

Просматривайте кроме этого: Чек-лист для логина и форм регистрации на мобильных

Неповторимое торговое предложение Мысль №10: Ориентация на клиента

Дабы «достучаться» до каждого клиента, вам нужно персонализировать собственный неповторимое торговое предложение. Добиться этого вы сможете, узнав потребности и «болевые точки» аудитории, и выяснив положение пользователя в воронке конверсии:

Цикл осуществления, либо воронка конверсии:

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

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

Мысль №11: анализ и Сегментация источников трафика

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

Источники трафика слева направо: медийная реклама, видео, соцсети, поисковые совокупности.

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

«Холодный» трафик: купоны, чек-страницы, пакет программ, календарь, подкасты, направления, обучающие файлы, инфографика, статистика;
«Теплый» трафик: викторины, купоны, видео-направления, демо-версия онлайн, билеты, электронные книги, футболки, вебинары, пробная версия;
«Тёплый» трафик: консультация, приобретение, демо-версия, тестовый период.

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

Просматривайте кроме этого: Сегментирование трафика на отдельные целевые страницы для поднятия конверсии

Мысль №12: Эксклюзивность

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

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

При применении мобильной версии вы экономите 20%. Мы вышлем вам промо-код, что даст вам скидку на приобретение при помощи сотового телефона.

Эта компания применяет кроме этого средства смс-маркетинга, дабы завлекать больше визитёров.

Мысль №13: Сокровище вашего предложения

Кроме того, что вам необходимо быть лаконичным при описании вашего предложения, необходимо попытаться донести его сокровище до потребителей. На мобильной целевой странице вам нужно будет коротко и емко раскрыть преимущества вашего товара перед потенциальными клиентами. В чем неповторимая сокровище вашего предложения и как ваши услуги окажут помощь визитёру лендинга улучшить его жизнь? Ниже возможно заметить пример того, как необходимо и как не требуется оформлять собственный УТП на мобильном лендинге:

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

Мысль №14: Лаконичность

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

Следующие показатели были лучше у версии слева:

  • количество просмотров – на 16% больше;
  • количество поисковых запросов – на 14% больше;
  • коэффициент отказов – на 22% ниже.

Версия справа весьма неудобна для пользователя. Ему тяжело перемещаться по странице и он не видит главного, поскольку оффер «утопает» в изобилии лишнего контента.

Просматривайте кроме этого: Истоки минимализма в веб-дизайне

Мысль №15: Маленькие заголовки, ориентированные на воздействие

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

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

  • вопросы – 11%;
  • простые заголовки – 15%;
  • заголовки начинающиеся со слова «как» – 17%;
  • заголовки, направленные к читателю – 21%;
  • числа – 26%.

Мысль №16: Отсутствие «лишних» слов

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

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

В следующей части мы поболтаем об идеях для дизайна мобильных посадочных страниц.

Высоких вам конверсий!

По данным: klientboost.com

Случайные статьи:

Дизайн мобильного приложения под разные размеры экранов


Подборка похожих статей:

riasevastopol

More Posts