Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная » Полезные статьи » 11 советов для улучшения мобильного лендинга
11 советов для улучшения мобильного лендинга
400
25 апреля 2017

11 советов для улучшения мобильного лендинга

Лендинги играют крайне важную роль при узнаваемости бренда и продажах товаров. А хорошо сделанный сайт и грамотно продуманный интерфейс – это залог успеха любого дела.

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

Сократите время загрузки

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

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

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

 

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

 

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

Вот что можно делать для того, чтобы ускоряться: 

Подчистить код; Свести к минимуму работу со сторонними скриптами; Работать со сжатием GZIP;  Избавиться от редиректов; Сделать изображения меньше в размере и работать с серверами, что ускоряют доставку контента пользователю.

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

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

Отчеты вы найдете в разделе «Аудитория» - «Мобильные пользователи»: 

 

Можете проанализировать марки устройств: 

 

Также и данные о разрешениях экрана: 

 

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

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

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

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

Как мы держим свои устройства и какими пальцами чаще всего работаем? 

 

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

А вот как в течение долгих лет менялось расположение большого пальца на iPhone. 

 

Примите эту информацию во внимание во время планирования кнопки призыва к действию. 

Прикрутите панель с клавиатурой к формам

Необходимо заполнить форму? Предложите это сделать при помощи клавиатуры: 

 

В этом вам могут помочь вставки в код: 

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

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

 

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

Предложите хорошую сделку

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

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

 

К тому же, можно применять мобильный поп-ап. Главное в этом деле – это настоящая ценность предложения.

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

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

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

 

Призыв к действию должен быть выделен

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

 

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

Вот еще ряд факторов, на которые стоит обратить внимание: 

Текст на кнопке. Работайте с простым и понятным языком. Лучше не «Загрузить», а «Получить книгу бесплатно». Не «Отправить», а «Протестировать бесплатный тариф». И так далее.

 

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

 

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

Хедер и футер важно закрепить

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

 

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

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

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

 

Разместите текст и картинки в одной колонке

Взгляните на 2 экрана: 

 

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

Работайте над своими сайтами, тестите разные варианты дизайна и не бойтесь нововведений.

Успешных вам конверсий!