Все о бизнесе
и маркетинге
Навигация по статье
Уменьшите время загрузкиИзучите девайсы пользователейДобавьте на страницу корзинуРасположите главные кнопки правильноПрикрутите клавиатуру к формамСделайте выгодное предложениеПродумайте дизайн мобильного лендингаВыделите призыв к действиюЗакрепите хедер и футерПоместите предложение над сгибомПоместите текст и изображения в одну колонку

Мобильный лендинг: 11 советов для улучшения пользовательского опыта

13955

65% цифрового рынка – мобильные пользователи. 50% хватаются за смартфоны сразу после пробуждения. Необходимость мобильных лендингов не подлежит обсуждению.

В этой статье – 11 советов как улучшить пользовательский опыт владельцев девайсов. 

Уменьшите время загрузки

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

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

Данные о скорости загрузки страниц можно получить в Google Analytics, отчеты «Поведение» – «Время загрузки страниц»:

Мобильный лендинг — отчет о скорости загрузки

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

Мобильный лендинг — страницы, которые долго загружаются согласно отчету Google Analytics

В интернете много инструментов, которые помогут оценить время загрузки и скорость: Google PageSpeed Insights, Mobitest и другие.

Что еще сделать, чтобы ускориться:

  • Почистить код;
  • Минимизировать использование сторонних скриптов
  • Использовать сжатие GZIP
  • Убрать редиректы
  • Уменьшить изображения и использовать для загрузки сеть доставки контента (сервера, которые ускоряют доставку контента пользователям).

Изучите девайсы пользователей

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

Ищите отчеты в разделе «Аудитория» – «Мобильные пользователи»:

Мобильный лендинг — отчет по аудитории мобильных пользователей

Здесь конкретные марки устройств:

Мобильный лендинг — список марок мобильных устройств

И данные по разрешению экрана:

Мобильный лендинг — данные по разрешению экрана мобильных устройств

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

Добавьте на страницу корзину

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

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

Расположите главные кнопки правильно

Как мы держим гаджеты и какие пальцы используем для навигации?

Мобильный лендинг — какие пальцы мы используем для навигации в мобайле

В 49% случаев смартфон лежит в левой руке, а большой палец правой перемещается по экрану. 

А так с годами менялось расположение большого пальца на айфонах:

Мобильный лендинг — использование большого пальца на айфонах

Учитывайте это при планировании кнопки призыва к действию.

Прикрутите клавиатуру к формам

Нужно заполнить форму? Предложите пользователю клавиатуру:

Мобильный лендинг — синхронизация клавиатуры

Помогут вставки в код:

Мобильный лендинг — вставка в код для синхронизации клавиатуры

Такой шаг ускорит конверсию.

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

Мобильный лендинг — нужное расстояние между полями в формах

Вариант слева короче, потому и предпочтительнее.

Сделайте выгодное предложение

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

Неплохо сыграть на страхе упустить выгоду (FOMO) – предложите купон на скидку с ограниченным сроком действия, например, вот так:

Мобильный лендинг — пример срочного предложения

«Подпишитесь на мобильные уведомления и получите скидку 20%. Отправьте SMS с текстом Save01 на короткий номер и получите скидку».

Кстати, можно применить мобильный поп-ап. Главное, чтобы предложения (скидка, акция) были стоящими.

Мобильный лендинг — пример всплывающего окна с предложением скидки

«Каждый день скидки до 70%! Подпишитесь и будьте в курсе наших акций».

Уникальное торговое предложение: Как обойти конкурентов?

Продумайте дизайн мобильного лендинга

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

На скриншоте – оптимизированный и не оптимизированный под мобайл сайт:

Мобильный лендинг — оптимизированный и неоптимизированный сайт

С каким вариантом проще и приятнее работать? Ответ очевиден.

Выделите призыв к действию

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

Чтобы «приковать» их внимание к кнопке CTA (призыва к действию), используйте контрастный цвет. Не знаете, какой выбрать – обратитесь к колесу цветов:

Мобильный лендинг — колесо цветов для выбора цвета кнопки CTA

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

На что еще обратить внимание?

  • Текст на кнопке. Используйте простой и понятный язык. Не «Загрузите», а «Получите бесплатную книгу». Не «Отправить», а «Попробовать бесплатный тариф». Не «Купить сейчас», а «Добавить в корзину со скидкой 25%».

Мобильный лендинг — правильные призывы к действию

 

  • Расположение кнопки. Не бойтесь опускать её ниже сгиба, но не помещайте туда, где и так много элементов.
  • Размер кнопки. Apple рекомендует 44х44 пикселей, на основании юзабилити и среднего размера пальца. В 57 пикселей прекрасно вписывается указательный палец:

Мобильный лендинг — рекомендуемый Apple размер кнопки CTA

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

Закрепите хедер и футер

Особенно, если лендинг длинный и нужно скролить вниз. Исследование журнала Smashing Magazine показало, что «липкие» хедер и футер повышают скорость навигации на 22%. Как это выглядит:

Мобильный лендинг — липкие хедер и футер

На изображении – навигация при закрепленном хедере. Главное – не перегружайте его элементами и опциями.

Поместите предложение над сгибом

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

Мобильный лендинг — ценностное предложение на первом экране

Поместите текст и изображения в одну колонку

Посмотрите на два экрана:

Мобильный лендинг — текст и изображения в одну колонку

На левом – простыня с картинками. Много элементов, внимание рассеивается, непонятно, что делать дальше. Так делать не стоит. На правом легко найти нужное. 

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

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

Статья подготовлена по материалам klientboost.com.

13955
5.0 из 5
5 голосов
Читайте ещё статьи по этой теме

Google Analytics 4: инструкция по применению Лонгрид

Google обновил версию аналитики до Google Analytics 4 (GA4). По уверениям разработчиков – чтобы было проще «оптимизировать рекламные инвестиции в долгосрочной перспективе», чем в текущей Universal Analytics.

Секреты потребительской психологии в онлайне Лонгрид

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

12 лучших фильмов про маркетинг и рекламу Лонгрид

В этой статье – подборка фильмов о маркетинге и рекламе на любой вкус. Рецензии & трейлеры.
Примеры роста конверсий, заказов и прибыли