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

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

14359

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.

Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Опубликовано редакцией Yagla
14359
5
Читайте ещё статьи по этой теме

Маркетинговый анализ аудитории перед созданием продающего контента Статья

Привет, друзья!Меня зовут Надежда Богданова, я копирайтер-маркетолог, специалист по текстам для лендингов. Еще весной обещала рассказать, как я это делаю…Речь про маркетинговое исследование и анализ для создания продающих текстов.2

Как сделать аудит сайта своими руками Статья

Мотивирует ли ваш сайт целевого пользователя, перешедшего с контекстного объявления, на заявку / покупку, или наоборот побуждает к «бегству»? Ответ на этот вопрос дает аудит сайта. Привлекать специально обученного человека для этой задачи – немалые затраты и зачастую непредсказуемый результат.

Что делать с контекстной рекламой во время кризиса Статья

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