Всем привет! На связи Дима Смирнов из 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.
Я могу выделить в виде исключений только проекты, где клиент вынужден использовать ПК в силу особенностей продукта, который доступен ему только с ПК, например сфера обучения ПК-софту. Все остальное — в большинстве мобильное.
Сейчас мы остановимся на банальных вещах, но это важно рассмотреть:
1. Экраны. У мобильных устройств небольшая площадь экрана относительно ПК — очевидная особенность. Минусы — ограниченная контентная область, плюсы — пользователь легче на ней фокусируется.
2. Нестабильный интернет. У мобильных интернет может быть нестабильным, что ухудшает скорость загрузки страниц. Это означает, что идеальная сессия пользователя звучит как "меньше действий — больше профита".
3. Особенности ввода. Клики меняются на тапы и свайпы. Любой инпут (поле ввода) вызывает виртуальную клавиатуру, закрывающую половину экрана, и т.д. Это важно учитывать при проектировании динамических элементов.
4. Особенности браузеров и ОС. Браузеры и операционные системы мобильных устройств имеют разные интерфейсы, например, кнопка "назад" в браузере Safari на iOS присутствует, а в Google Chrome на Android может как присутствовать, так и отсутствовать полностью в зависимости от устройства (а не версии браузера).
Думаю, отличий наберется достаточно, но это основные, чтобы понять, с чем мы имеем дело.
Бывает так, что трафик преобладает с мобильного, а конверсии в большой степени генерируют ПК-юзеры и наоборот.
Если вы столкнулись с такой ситуацией, то стоит выяснить: это особенности продукта/аудитории или пользователю банально неудобно делать заказ на сайте с мобильного из-за сложности.
Теперь стоит разобраться с целями пользователей, которые пришли на ваш сайт, и сгруппировать их согласно выводам. Это называется 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) по причине улучшению поведенческих и коммерческих факторов.
Хочется подвести итоги статьи и выделить основные мысли.
Скоро мы свяжемся с Вами и все расскажем
