Как вы теряете лиды с ПК-ориентированным сайтом

Всем привет! На связи Дима Смирнов из vysota, и я хочу поделиться опытом в вопросе разработки сайта с преимущественно мобильным трафиком на примере проекта HIT-FITNESS, а также порассуждать, почему в 2024 году нельзя продолжать разрабатывать сайты от ПК-версии.

Данная статья — это небольшой инсайт, в том числе для нас, так что спешим поделиться — будет интересно.

За последние 10 лет соотношение ПК и мобильных в веб сильно перевесило в сторону последних (cайт gs.statcounter.com показал за 10 лет зеркальное изменение сторон).

То есть, если в 2015 году доля ПК в сети составляла более 60%, то теперь это место занимают мобильные устройства.

Вся проблема в том, что индустрия продолжает проектировать ПК-ориентированные сайты, потому что это некий классический пайплайн разработки, и это — фатальная ошибка.

Это сайты, разработанные по классическому алгоритму, когда сначала проектируется интерфейс ПК-версии, а от нее делаются версии для ноутбуков, планшетов и, главное, мобильных (называются эти версии ресайзы).

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

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

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

И все перечисленное выше вполне неплохо работает для B2B-проектов, но почти вся B2C-сфера — это значительное преобладание мобильного трафика (от 70+ %).

Анамнез проекта — небольшая сеть фитнес-клубов из Санкт-Петербурга. Всего у сети 3 клуба в торговых центрах, расположенных в Приморском районе города.

В 2015 году сайт имел примерно 55% мобильных устройств, в 2018 году — 65%, а в 2024 — 83%.

У проекта высокие показатели органического и платного трафика в рамках тематики, но в последние 4 года стоимость лида росла, поведенческие факторы, такие как время на сайте и % конверсий, падали.

При этом постоянно велась работа над улучшением рекламных кампаний и тестированием гипотез. Интерфейсы улучшались в рамках существующего сайта, появлялись лид-магниты, call to action формы, даже была сделана отдельная мобильная версия (тоже построенная от ПК-версии).

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

Гипотеза — разработать сайт по принципу mobile first, в котором изначально создается мобильная версия, а уже от нее — ПК (если она вообще вам нужна).

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

Я могу выделить в виде исключений только проекты, где клиент вынужден использовать ПК в силу особенностей продукта, который доступен ему только с ПК, например сфера обучения ПК-софту. Все остальное — в большинстве мобильное.

Сейчас мы остановимся на банальных вещах, но это важно рассмотреть:

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

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

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

Теперь стоит разобраться с целями пользователей, которые пришли на ваш сайт, и сгруппировать их согласно выводам. Это называется User Story Mapping или карта пользователей.

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

Например, для фитнес-клуба можно выделить 2 глобальные группы: действующие клиенты и потенциальные клиенты.

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

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

Все это нужно учесть, сгруппировать от важного к менее важному и учитывать при проектировании.

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

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

В отличие от ПК-сайтов, при пользовании мобильными устройствами пользователь в разы быстрее "теряется".

Настоятельно рекомендуем придерживаться правила: если трафик у проекта мобильный более чем на 70%, то первым делом проектируем "мобилку" и думаем, как этой "мобилкой" пользователь будет пользоваться, и не жалеем времени на тестирование.

Несколько важных правил для проектирования мобильных интерфейсов:

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

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

Прямые показатели:

На момент запуска, в сравнении двух аналогичных периодов за ноябрь-декабрь 2022 и 2023 годов, при незначительных изменениях бюджета был зафиксирован видимый рост конверсии продаж, составивший примерно +30-40%.

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

Косвенные показатели:

Отказы - снижение с 17.5% до 8%

Глубина просмотра увеличение с 2.18 до 2.42 (при том что кол-во страниц и уровень вложенности снизился).

Время на сайте - увеличение с 1:20 до 1:35

Отдельно стоит отметить стремительный прирост органики (SEO) по причине улучшению поведенческих и коммерческих факторов.

Хочется подвести итоги статьи и выделить основные мысли.

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