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

Задачи пользователя

По данным StoneTemple, 55,79% трафика приходит с мобильных устройств. При этом статистика отказов на 40% выше, чем в десктопной версии, а просмотренных страниц и времени, проведенного на сайте — в 2-3 раза меньше (в зависимости от отрасли). Например, категория «красота и фитнес» собирает с мобильных 63,6% трафика. При этом среднее время просмотра тематических сайтов с десктопа — 5,05 минут, а с мобильного — всего 3,32. Тенденция сохраняется независимо от тематики. Есть только одно исключение: на сайтах, посвященных книгам и литературе, мобильные пользователи проводят больше времени, чем те, кто предпочитает десктопную версию.

Какой вывод стоит из этого сделать? При переходе на сайт с десктопной версии и смартфона пользователь преследует разные цели. С персонального компьютера удобно серфить, долго сравнивать и выбирать, прицениваться — а значит, вы можете заточить главную версию сайта именно на вовлечение и удержание потенциального покупателя, завоевывать его доверие и «прогревать».

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

Оптимизация

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

1. Пользователи мобильных чаще используют короткие запросы, состоящие из 1-3 слов. Это позволяет без вреда для SEO делать короткие заголовки, которые лучше воспринимаются с экрана с небольшой диагональю.
2. Скорость работы очень важна. 29% мобильных пользователей моментально переключаются на другой сайт или приложение, если не получают ответа на свой вопрос или слишком долго ожидают загрузки. Кроме того, скорость работы сайта влияет на позиции в органическом поиске. Вебмастера предполагают, что Google отдает предпочтение страницам AMP, а не просто оптимизованным под мобильную выдачу.
3. Мобильная версия чаще всего размещается на поддомене. Изменения, которые вносятся в десктопную версию, ее не затрагивают, если не сделать синхронизацию. Если для двух версий у вас разный контент, позаботьтесь о синхронизации: тогда вы сможете обновлять ассортимент, наличие товара, цены, скидки, информацию об акциях и прочие важные моменты одновременно на обеих версиях сайта.
4. Технология Flash, которую многие еще применяют у себя на сайтах, в мобильной версии не поддерживается. Если видео необходимы — встраивайте их с помощью более продвинутой технологии HTML5.
5. Приготовьтесь к тому, что результаты мобильной выдачи могут быть лучше или хуже, чем у основного сайта.

Наполнение и дизайн

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

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

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

1. Сделайте фото с максимальной детализацией, желательно с разных ракурсов и на белом фоне. Пусть при просмотре они отображаются на полную ширину экрана. Под фото можно поставить емкое описание, состоящее из пары-тройки предложений.
2. Все модификации и цвета товара помещайте в одну карточку, чтобы клиент мог легко выбрать нужный ему вариант, а не скроллил огромный каталог, половину которого составляют вариации одних и тех же товаров.
3. Кнопку “заказать” сделайте крупной — 7-10 мм в высоту и контрастного цвета.
4. Корзину упростите до минимума и добавьте возможность заказа без регистрации. Для начала вполне достаточно имени и номера телефона, все остальные данные узнает при общении ваш менеджер.
5. Отзывы — один из ключевых факторов принятия решения о покупке. Оставляйте их в карточке. Хорошо для мобильной версии работает “звездный” рейтинг и указание количества отзывов.
6. К описаниям можно подойти с двух сторон. Вариант А: дублируйте контент из десктопной версии, но сократите его по максимуму. Вариант Б: уникализируйте тексты — внесите изменения или напишите свежие.
7. Используйте подвал мобильного сайта на 100%. Помогайте покупателю найти интересующий товар и подталкивайте к спонтанным покупкам. Разместите внизу гиперссылки на разделы с акциями и популярными товарами, корзину и службу поддержки, условия оплаты и доставки. Разделы типа “Вакансии”, “О нас”, карту сайта оставьте для десктопной версии.

Реклама и аналитика

70% мобильных пользователей заявили о неприятии рекламы на своих устройствах, и число их с каждым годом растет на 90% (то есть почти в 2 раза!). Экран смартфона намного меньше, объявления очень сильно бросаются в глаза. Если реклама необходима, сократите ее к минимуму – максимум 1 шт. на экран. При этом нужно придерживаться допустимых форматов. С января 2017 года Google строго наказывает за назойливую рекламу и pop-up окна, понижая в выдаче отдельные страницы.

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

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

Подведем итог

Неважно, чем вы занимаетесь в интернете — продаете одежду, проводите курсы, предлагаете услуги по ремонту бытовой техники, ведете блог и зарабатываете на нативной рекламе, etc. — если у вашего сайта еще нет удобной и красивой мобильной версии, пришло время это исправить. Для решения этой задачи вы можете как улучшить существующую мобильную версию, поработав над дизайном, юзабилити и технической стороной, так и создать новую — в том числе с помощью конструктора Flexbe. И пусть ваши сайты продают!