Анатомия конвертирующего мобильного лендинга

Posted on by riasevastopol

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

1. Имеете возможность ли вы светло растолковать, чем занимаетесь?

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

И это, непременно, требует пространства и большего количества слов.

В действительности узнаваемый предприниматель Нил Патель (Neil Patel) уже проводил тесты по этому поводу на сайтах Neilpatel и CrazyEgg. На основной странице neilpatel.com долгая статья (1292 слов) преобразовала на 7,6% лучше, чем маленький пост (488 слов). А на CrazyEgg лендинг, в 20 раз превышающий длину контрольной страницы, продемонстрировал рост конверсии в 363%.

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

Учитывайте кроме этого да и то, что средняя длительность сессии на смартфоне равна всего лишь 72 секундам.

Исходя из этого, человеку вряд ли захочется скролить страницу более нескольких раз (к примеру, PayPal применяет 11 экранов на своем мобильном сайте).

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

Главные слова, покупательский цикл и вопросы. Осведомленность (Из-за чего я обязан брать у вас?)Интерес (Из-за чего я обязан выбрать вас?)Желание (Из-за чего я обязан совершить воздействие?)Воздействие (Как я извлеку из этого максимум пользы?)Удовлетворенность (Стоит ли мне делиться моим опытом?).

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

Часть мобильных транзакций в третьем квартале 2015 года. Слева — все транзакции, справа — кросс-платформенные транзакции

Вам необходимо достигнуть верного баланса между:

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

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

1. Избавьтесь от таких слов, как «весьма» и «лучший»

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

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

Не следует недооценивать эффект, что одно слово может произвести на ваши результаты. Veeam совершили сплит-тест со ссылкой «запросить цену» (контрольный вариант).

Новая фраза — «запросить прайс»:

Да, было поменяно всего лишь одно слово, но понимаете, как это сказалось на CTR (click through rate)? Этот показатель вырос на 166,66% (с 0,54% до 1,40%), наряду с этим статистическая значимость составила 99,99%.

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

2. Доносите сокровище вашего оффера как возможно четче

Вы должны так обрисовать собственный предложение, дабы устранить болевые точки ваших клиентов сначала. Как пример, взглянуть на нижеприведенный лендинг сайта Blah Blah Car. С логотипом, социальным доказательством и CTA-элементами все в порядке, но где ценностное предложение и заголовок?

Да, быть может, реклама, которая вынудила пользователей перейти на эту страницу, и высказывала оффер, но как говорит CRO-специалист Брайан Айзенберг (Bryan Eisenberg):

«Вы должны напомнить людям о ценности на вашей целевой странице, не учитывая то, что случилось ранее».

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

На приведенном ниже примере буллеты в секции «Преобразуйте ваш маркетинг» (Transform your marketing) и описания в разделе «Оцените эффект» (See the impact) чуть заметны.

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

Гугл рекомендует применять базисный размер шрифта 16 пикселей CSS. На базе этого вы имеете возможность подобрать размер шрифта ваших H1 и H2 заголовков.

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

  • Секреты контент-маркетинга: правила создания читабельных текстов
  • Как типографика воздействует на коэффициент конверсии и юзабилити?
  • Из-за чего текст обязан прекрасно контрастировать с фоном лендинга?

Вы кроме этого имеете возможность протестировать ваш мобильный сайт на наличие неточностей в поисковой оптимизации при помощи особого SEO инструмента на сайте varvy.com/mobile. Легко введите адрес вашего ресурса и надавите кнопку «Тест».

«Удостоверьтесь в надежности веб-страницы на наличие SEO просчетов»

Проверив одну из мобильных страниц собственного сайта, Нил Патель заметил следующие результаты:

Его страница взяла 74 балла по эффективности и 100 баллов за пользовательский опыт. Прокрутив отчет вниз, вы получите более детальные результаты по вашему файлу robots.txt, окну просмотра (viewport), мобильных редиректах и т. д. Кроме этого, этот инструмент кроме этого предоставляет подсказки чтобы повысить эффективность.

Устранение этих неприятностей должно расширить его показатель:

включите кэширование браузера;
уменьшите время отклика сервера;
минимизируйте javascript;
ограничьте рендерное блокирование Javascript и CSS в контенте выше линии сгиба.

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

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

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

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

Для примера, посмотрите, как iPhone 6S применяет расширяемые «гармошки» в разделе FAQ и на странице политики конфиденциальности. За счет таких меню вы приобретаете полное представление о приобретениях на iPhone, программе обновления телефона и многом втором.

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

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

  • PPC трафик — Что ищут эти люди? Как довольно часто они конвертируются если сравнивать с органическим трафиком? Какие конкретно типы изображений увеличивают возможность их конвертации?
  • Email-трафик — В случае если ваши email-рассылки генерируют клики, разбирайте эту группу с опаской. Выясните, что ведет к наивысшим показателям отказа? Определите, повышает ли конверсию контент, ориентированный на email клики?
  • Органический поисковой трафик — Данный тип трафика кроме этого может распределяться. Какие конкретно поисковые запросы привели пользователей на сайт? Где находятся эти люди? Они заходят на ваш десктопный сайт либо мобильный? В отчете от Marketing Sherpa Marriott Vacations протестировали собственный лендинг для iPhone и нашли методики, благодаря которым их уровень конверсии вырос с 5% до 7%.

Совет №2. В случае если ваша целевая страница через чур громадная и требует прокрутки, тогда не забудьте дать вашим визитёрам соответствующие визуальные подсказки. Как пример, посмотрите на окно просмотра Creative Circle.

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

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

В другом случае они попросту надавят кнопку «назад» и покинут ваш лендинг.

  • 6 способов достигнуть «ясности» лендинга и повысить конверсию

2. И вы ожидаете, что ваши визитёры заполнят эти 10 полей?

Представьте, что вам понравилась PPC-реклама маркетингового инструмента и вы кликнули по ней c вашего сотового телефона. Вы в первый раз решили ознакомиться с сервисом, но когда сайт загрузился, вам внесли предложение заполнить лид-форму с 10 полями.

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

Нижеперечисленные 5 советов разрешат вам оптимизировать опыт при сотрудничестве с формами на мобильных устройствах:

1. Не пугайте пользователей. Сосредоточьтесь на главном и запрашивайте у людей лишь email (либо самую нужную информацию). Визитёры оценят то, что вы избавили их от лишних упрочнений, и в случае если ваш бизнес им понравится, они с удовольствием предоставят вам необходимые сведения в будущем.

2. Если вы не имеете возможность сократить количество полей, по очень мере, воспользуйтесь автозаполнением. Браузеры Chrome и Safari поддерживают эту функцию, в случае если пользователь включил ее в настройках собственного телефона.

Для включения автозаполнения в поле email а вам потребуется данный HTML код: . Помимо этого, вы кроме этого имеете возможность постараться задействовать камеру смартфона, GPS, контакты и голосовое управление, дабы заполнить поля формы для пользователя.

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

Для примера, посмотрите на мобильный лендинг degoo с ненужным пространством между полями формы.

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

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

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

Для примера, взглянуть на сообщение от Mailchimp. Они размещают его на известный месте, конкретно над полем формы, и предлагают пользователю помощь в восстановлении его логина.

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

В соответствии с изучению от UX Matters, пользователи держат смартфоны 3 главными методами:

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

Посмотрите, как Amazon размещает собственные кнопки в легкодоступной территории. В красной секции они покинули лишь собственный логотип.

  • Как разрабатывать дизайн для мобильного UX

3. На дворе не 2010 — вы должны заинтересовать вашу аудиторию за 2 секунды

Как много дизайнерских элементов вы применяли, дабы создать ваш лендинг? Любой дополнительный компонент отражается на эффективности вашей страницы и злит визитёров.

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

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

В отечественном блоге имеется большое количество статей о увеличении скорости загрузки сайта за счет сетей доставки контента (CDN) и браузерного кэша, но мы желаем сосредоточиться на двух вещах. Тогда как CDN, ориентированные на мобильные устройства, разрешат вам сэкономить секунду на рендеринге в телефоне, они смогут не обеспечить вам должного ROI (return of investment) кроме того при внушительных вложениях.

Кент Элстед (Kent Alstad) выполнил последовательность процедур, дабы измерить эффективность сетей доставки контента для мобильных пользователей, но в его случае CDN уменьшили время загрузки меньше чем на секунду, с 7,059 секунд до 6,245.

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

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

Размер мобильного кэша

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

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

1. Выберите верный формат — JPEG, в большинстве случаев, есть самым оптимальным, поскольку он поддерживается большинством браузеров. PNG кроме этого возможно применять, но от BMP либо TIFF вы должны держаться подальше.

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

3. Сжимайте изображения — такие плагины, как WP Smush на WorpPress, трудятся превосходно и наряду с этим не ухудшают уровень качества картины.

4. Удалите каждые ненужные метаданные изображения — EXIF эти употребляются фактически во всех новых цифровых камерах для таковой информации, как дата съемки, модель устройства, вспышка, GPS положение и т. д.

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

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

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

И, наконец, вы должны войти в вашу панель управления Гугл Analytics и проверить соединения, каковые применяют ваши мобильные визитёры — эти сведенья возможно отыскать так: АудиторияТехнологииСеть. Вы кроме этого имеете возможность создать пользовательский отчет.

Если они пользуются не 4G сетью (что самый возможно), скорость загрузки вашего сайта будет еще меньшей. Так, вам необходимо учитывать 2G и 3G соединения, в то время, когда вы тестируете собственный ресурс посредством инструментов наподобие GTMetrix.

  • Скорость загрузки как ключ к оптимизации мобильного опыта

4. Кроме того не думайте, что ваши мобильные визитёры захотят выполнить два действия

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

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

1. Создайте одну громадную CTA-кнопку (удобную для нажатия громадным пальцем) с убедительным копирайтингом. В соответствии с изучениям MIT Touch Lab, средняя ширина человеческого громадного пальца образовывает 2,5 см (72 пикселя), а указательного — от 1,6 до 2 см (45-57 пикселей). Исходя из этого, полная ширина вашего CTA-элемента должна быть равна как минимум 44 пикселям.

2. Проследите за тем, дабы цвет CTA-кнопки контрастировал с другими элементами страницы.

Применение кнопок, каковые никак не выделяются на неспециализированном фоне, есть важным упущением. взглянуть на пример формы от Ideal Shape Smoothie Recipe. Потому, что тут CTA фактически сливается с окружением, пользователям вряд ли захочется надавить на него.

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

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

Посмотрите, как Mailchimp два раза напоминает вам «Подписаться безвозмездно».

4. Если вы вправду нуждаетесь в двух CTA-элементах, укажите первичное целевое воздействие в верхней части страницы, а вторичное — мало ниже.

5. Вы кроме этого имеете возможность протестировать ваш телефонный номер в качестве CTA, предпочтительно в верхней части страницы.

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

Данный подход может оказать помощь вам побороть последние сомнения клиента и предложить несложный метод оформления заказа для тех, кто не желает брать в сети. Вы имеете возможность включить эту click-to-call функцию на вашем лендинге посредством данного HTML кода, что применяет tel протокол: CTA link text.

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

  • Как дизайн CTA-кнопки может расширить конверсию?

5. Совершите окончательную диагностику

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

1. Начните с эмулятора смартфона на ПК.

Существует множество сервисов, к примеру, Screenfly от quirktools.com, где вы вбиваете адрес вашего сайта и имеете возможность взглянуть как он отображается на разных устройствах:

2. Затем вам необходимо будет покопаться в ваших отчетах Гугл Analytics, дабы отыскать самый распространенные устройства, каковые применяют ваши клиенты.

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

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

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

Все началось с оптимизации изображений и адаптации контента.

После этого они уменьшили количество полей при помощи «умного» контента.

Итог? При тестировании мобильной смарт-формы их показатель отказов снизился в среднем на 27%, а на протяжении теста оптимизированного контента данный параметр уменьшился на 10,7%.

Напоследок напомним, что каждое улучшение целевой страницы, в большинстве случаев, сводится к этим 3 факторам:

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

Вместо заключения

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

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

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

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

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

Мобильный сайт. Как создать мобильный лендинг буквально за 10 минут


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

riasevastopol

More Posts