15 ошибок мобильной версии вашего сайта

Print Friendly, PDF & Email

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

Более 50% пользователей интернета посещают web-страницы с мобильных устройств. И это без учета YouTube, Instagram, Facebook и других ресурсов, имеющих отдельные приложения. Если ваш сайт не адаптирован под такие девайсы, вы просто теряете клиентов на ровном месте.

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

1. Неоптимизированные формы заказов

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

Как, например, это сделано в Rozetka:

Розетка

Особенно плохо к большим формам относятся мобильные пользователи. На сенсорных экрана в 4-6 дюймов заполнять поля крайне неудобно. Поэтому многие потенциальные клиенты бросают дело на полпути.

На первом этапе заполнения предложите пользователю заполнить только самую нужную информацию:

Форма заказа

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

В первом случае, по факту, ничего не меняется. Человек заполняет то же количество полей. Но разделитель в виде новой страницы действует совершенно по-другому. Процесс делится на этапы. И заполнять форму, кажется, гораздо легче. Понятно, что это только кажется. Но бросить уже проделанный путь пользователям будет намного сложнее, если они перейдут ко 2-му или 3-му шагу.

2. Контакты, которыми нельзя воспользоваться сразу

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

Вы точно слышали о популярности мессенджеров во всем мире. Пользователи массово устанавливают Viber, Telegram, Facebook Messenger. Вычислите, какие именно приложения пользуются спросом у вашей аудитории. И разместите на мобильной версии сайта кнопки для мгновенной связи в выбранных мессенджерах.

Это может выглядеть так:

Мессенджеры для связи

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

3. Контент, невоспроизводимый на мобильных устройствах

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

Например, учитывайте, что iPhone и другие мобильные “яблочные” устройства не поддерживают Flash-анимацию. Вместо полезной информации по продукту или триггера влияния пользователь видит такое окно:

Ошибка

Согласитесь, не самое приятное зрелище.

Добавляйте обычную текстовую информацию, JPEG и PNG файлы. Flash-анимацию меняйте на GIF. Вместо навороченного анимированного меню добавьте обычное – просто кнопки или текстовые ссылки. Да, ваш сайт будет выглядеть не так круто на мобильных девайсах. Но это куда лучше, чем страница, наполненная окнами ошибок. К тому же, упрощая сайт, вы значительно улучшает скорость его загрузки.

Об этом, кстати, стоит поговорить отдельно.

4. Неоптимизированные отдельные виджеты на сайте

Эти инструменты помогают повысить конверсию. Вы можете установить на сайт виджет для мгновенной связи с консультантом или pop-up, который на автомате делает дополнительное предложение. Но если эти приложения не адаптированы под мобильные, конверсия, наоборот, пойдет вниз. Окна будут перекрывать полезный контент, формы заказа и другие важные элементы. Или просто “растягивать” страницу, выходя за рамки адаптивной версии.

Обязательно тестируйте сайт на всех платформах перед запуском. Проверяйте буквально каждую функцию. То, что идеально работает на компьютере, может вообще не отображаться на смартфоне или даже планшете. Пробуйте настроить виджеты, чтобы улучшить ситуацию. Если сайт нужно запустить вчера (как это часто бывает в новых проектах 😉 ), убирайте виджеты и ставьте на их место обычные элементы.

Но обязательно доработайте страницу в дальнейшем!

5. Нечитабельный шрифт

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

Несколько рекомендаций:

  1. Используйте шрифты без “закарлючек”

Arial – хорошо. Times New Roman – плохо. Вам ведь не нужен сайт из 90-х? Поэтому применяйте обычные строгие шрифты без лишнего графоманства.

  1. Добавляйте не более 3-х шрифтов на одну страницу

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

  1. Придерживайтесь оптимального размера текста

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

  1. Соблюдайте межстрочный интервал

Оптимальный показатель – 1px. Главное, чтобы текст не сливался в одно сплошное полотно, где разглядеть хотя бы слово невозможно.

  1. Добавьте отступы

Не допускайте, чтобы текст сливался с краями экрана. Добавьте отступы справа и слева хотя бы в 15px.

6. Неудобные для touch-скрина кнопки или гиперссылки

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

Теперь представьте: потенциальный клиент заходит на ваш сайт. Читает описание, смотрит видео и решает совершить заказ. Нажимает кнопку “Купить” и… Ничего не происходит. Клик пришелся куда-то мимо кнопки. Он жмет еще раз. Опять ничего. После 5-ти таких нажатий пользователь просто закроет вашу страницу. Возможно, с матом. Вам ведь это не нужно?

Тогда соблюдайте стандарты размеров для кликабельных элементов:

  • минимальный – 26px
  • оптимальный – 34px
  • идеальный – 44px

Стандарты выведены компаниями Apple и Microsoft. Этим данным точно можно доверять. Не тратьте время на поиск подходящего именно вам показателя. Используйте уже готовые наработки.

7. Низкая скорость загрузки страницы

3 секунды!

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

Есть интересная статистика:

  • 1 секунда задержки загрузки сайта уменьшает конверсию на 3-7%;
  • 10 секунд – на 20-40%.

Вы теряете клиентов, пытаясь сделать ресурс красивее. Так вам важна красота или результат?

Проанализируйте ваш сайт. Если скорость загрузки превышает 5 секунд – улучшайте показатель. 10 секунд – ситуация критична.

Тестирование здесь не может дать точный результат. Каждое устройство индивидуально. Поэтому используйте специальные сервисы:

  1. Which Loads Faster?

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

  1. Pingdom

Покажет скорость загрузки и вес страницы. Вы поймете, что конкретно нужно заменить, чтобы сократить время.

  1. Load Impact

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

  1. Neustar

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

  1. Google PageSpeed Insights

Отображает результат анализа страницы в баллах, учитывая стандарты. Сервис русскоязычный.

Читайте здесь, как правильно проверять страницу на скорость загрузки.

8. Невозможность перехода на полную версию сайта в один клик и неправильная переадресация

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

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

Почему так произошло?

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

Правильно настройте редирект. С любой платформы посетитель должен попадать на ту страницу, которая ему нужна.

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

9. Отсутствие автозаполнения полей

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

Человек, пользующийся мобильным девайсом регулярно, точно уже заполнял где-то информацию, которая вам нужна. Это, по сути, стандартные данные – имя, e-mail, номер телефона, адрес или даже платежные данные.

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

Чтобы настроить автозаполнение, пропишите в HTML-код:

HTML-коды

10. Ошибка 404 с мобильных устройств

Вспомните… Вы переходите по какой-то ссылке или вводите ее сами в браузерную строку, и видите ошибку 404. Раздражает, правда? А для ваших клиентов это еще один повод просто закрыть страницу и навсегда забыть о вашем сайте.

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

Ошибка 404

Поместите на ней лид-магнит. Если вдруг человек ошибется адресом, вы вовлечете ее в воронку.

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

Проверьте ссылку на десктопный вариант. Если смартфон распознает ее как ошибку, перестройте алгоритмы. Сделайте все, чтобы каждый посетитель без каких-либо проблем переходил на разные версии сайта по своему желанию.

11. Отсутствие аналитики мобильных пользователей

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

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

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

Для таких целей отлично подходит, например, Google Analytics или Яндекс.Метрика, если она работает в вашей стране 😉

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

Не знаете, что конкретно использовать? Тогда это вам поможет:

ТОП-10 инструментов для отслеживания поведения пользователей на сайте

12. Неправильно настроенный мета-тега viewport

Этот инструмент определяет выравнивание сайта на разных экранах. Главная ошибка – фиксированный мета-тег viewport для определенной диагонали. Так, например, зафиксировав тег для стандартного ноутбука (15.6 дюймов), вы провоцируете некорректное отображение десктопной версии на мониторах с большой диагональю.

То же касается и мобильных девайсов. У каждого производителя свои стандарты. На рынке есть смартфоны с экранами от 4-х до 7-ми дюймов. Планшеты от 8-ми до 12.9-ти дюймов. И угадать, с какого именно устройства зайдет ваш клиент, невозможно.

Поэтому делайте сайт “гибким”. Настройте viewport так, чтобы ресурс адаптировался под любые экраны. Создайте отдельные стандарты для маленьких, средних и больших диагоналей. И настройте отображение под каждый из них.

13. Непродуманный дизайн мобильной версии

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

Есть 2 варианта:

  • заказать отдельный дизайн для мобильных платформ;
  • изменить существующий для корректного отображения.

Жертвуйте любыми элементами, которые можно редактировать. Правильно структурируйте контент, триггеры и другие продающие элементы. Возможно, внешний вид сайта от этого пострадает. Зато конверсия повысится. А это главное, не так ли?

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

14. Неоптимизированный мультимедийный контент

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

Не перегружайте страницу! Оптимизируйте каждый элемент.

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

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

Используйте сервис Optimizilla.

15. Отсутствие мобильной версии сайта

Адаптивная и мобильная версия – разные вещи. Запомните это. Ресурс, адаптированный под телефоны, просто корректно отображается на маленьком дисплее с другим соотношением сторон. Мобильная версия полностью отличается от полной. Это, по сути, другой сайт по той же ссылке, который НЕ отображается на компьютерах.

У этой версии сайта есть 2 основных преимущества:

  1. Высокие позиции в поисковых системах

Google понимает, удобно ли будет просматривать ваш сайт пользователю с мобильной платформы. И поднимает вас выше, если ресурс удобнее, чем у конкурентов. К тому же, возле вашей ссылки появляется пометка “Для мобильных”. Еще до перехода пользователь понимает, что сайт нормально отобразится на его девайсе.

  1. Универсальность, независимость от конкретного устройства

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

Тестируйте готовую мобильную версию самостоятельно. В интернете есть много сервисов для модуляции экрана смартфона. Но лучше проверить все на настоящем девайсе и убедиться в работоспособности.

Заключение

Мобильный рынок развивается с сумасшедшей скоростью. Недавно выпущенные iPhone 8 и iPhone X создали неимоверный ажиотаж вокруг Apple. А еще ведь есть Samsung со своими Galaxy S8 и Galaxy Note 8, Google с Pixel 2 и десятки других достойных флагманов.

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

Жмите “Мне нравится”, если понимаете, что ваша аудитория тоже активно пользуется смартфонами, и собираетесь влиять на ситуацию.

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