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

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.