Стратегия

Как оптимизировать мобильную версию сайта и увеличить конверсию

Время чтения: 9 минут
Поделитесь ссылкой в социальных сетях, чтобы не потерять:

Вам когда-нибудь приходилось делать жесть «pinch to zoom» (это когда контент на экране можно масштабировать двумя пальцами разводя или сводя их), чтобы изменить размер текста или изображения во время просмотра страниц на вашем телефоне?

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

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

Зачем оптимизировать сайт?

Согласно информации на сайте Statista, в 2015 году в США более 120 миллионов покупателей сделали покупку с мобильных устройств. К 2019 году это число увеличится до 162 миллионов.

В исследовании поведения покупателей с мобильных устройств IAcquire и Survey Monkey обнаружили:

  • 70% мобильных поисковых запросов приводят к действию на сайте всего за час;
  • 40% пользователей перейдут на другой результат, если их первый выбор не оптимизирован для мобильных устройств.

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

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

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

Как именно вы оптимизируете мобильную версию вашего сайта для увеличения количества конверсий?

Предлагаем начать с основ, реализованных экспертами в мире цифрового маркетинга. 

1. Оптимизируйте скорость загрузки страницы

Медленная загрузка может легко утомить пользователя. Но вы ведь хотите моментально привлечь внимание к своему предложению. Поэтому нужно максимально сократить время, необходимое для загрузки сайта. Даже секундная задержка может оказать серьезное негативное влияние на ваши мобильные конверсии. Это доказано в тематическом исследовании, проведенном Soasta. Обнаружилось, что страницы со средней скоростью загрузки 2,4 секунды имели коэффициент конверсии 1,9%. Это отличный показатель, учитывая, что количество конверсий с компьютера составляет 2-3%. Страницы, загружающиеся одну секунду медленнее теряли 27% конверсий.

Существует несколько способов увеличить скорость вашего сайта. Можете начать с оптимизации изображений (масштабировать их до размера, который не будет замедлять работу страницы). Также можно уменьшить HTML и CSS-файлы, включив сжатие, которое уменьшит их размер на 50-70%.

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

Ваша цель: уменьшить размер сайта настолько, чтобы он весил не больше 20 килобайт.

2. Минимизируйте отвлекающие факторы

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

Помните: все внимание пользователей должно быть сосредоточено на кнопке CTA (call to action — призыв к действию) и заголовке, поэтому оставьте их минималистичными. Для страниц с тяжелыми изображениями также может потребоваться больше времени на загрузку, что делает это еще одним недостатком. Посмотрите на пример SquareSpace.

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

Это то, что называется умелым использованием пространства без отвлекающих факторов. Пользователи видят заголовок и четко выделенную кнопку CTA. Таким образом, человек точно знает, куда ему двигаться дальше.

3. Напишите сильный и короткий заголовок

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

Заголовок должен сразу говорить о том, что представляет собой ваш продукт. Отличный пример – мобильная версия сайта Motorola Moto 360.

Здесь сохранен заголовок из 5 слов, оставлены только самые важные детали: название продукта и цена.

Кнопка CTA четко отображается и рассказывает пользователям о продукте немного больше. «Build Yours» предполагает, что часы — это то, что вы можете настроить под себя.

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

4. Сделайте свой номер телефона кликабельным

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

Хоть добавление интерактивной гиперссылки уже упрощает работу, все равно есть вероятность неправильно кликнуть на строку текста. Поэтому попробуйте сделать свой контактный номер в форме кнопки, которая добавит дополнительные объем вокруг интерактивного элемента.

В качестве примера:

5. Оптимизируйте призыв к действию (CTA)

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

Посмотрите на пример страницы Shyp. Кнопку CTA видна сразу и выделена темным фоном. Хоть заголовок также заметен, основное внимание уделяется призыву к действию.

6. Тестируйте мобильные версии

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

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

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

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

Теперь взгляните на приведенный ниже вариант, где кнопка CTA была увеличена и перенесена в верхнюю часть экрана, а также изменено отображение продуктов. Эта оптимизация, проведенная для пользователей с мобильных устройств, была протестирована против оригинала, изображенного выше, и увеличила доход с каждого посетителя на 28,1%.

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

Вывод

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

У вас есть советы, которые можно добавить в этот список? Не стесняйтесь делиться и оставляйте комментарии ниже.

Отставить комментарий

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *

Подпишитесь на ежемесячную рассылку блога increase

Получайте уведомления с анонсами свежих материалов блога!

  • уже подписались: 0