В большинстве магазинов, с которыми мы работаем, с телефонов приходит от 60 до 80% посетителей. При этом доля заказов с мобильных почти всегда ниже доли трафика, а конверсия бывает в два раза меньше, чем на компьютерах. Отчасти это нормально: со смартфона чаще выбирают и сравнивают, а покупают потом. Но значительная часть разрыва объясняется тем, что мобильная версия сделана как уменьшенная копия десктопа, а не как самостоятельный интерфейс. Рассказываем, какие требования мы предъявляем к мобильной версии и какие ошибки встречаем чаще всего.
Мобильная версия — основная, а не дополнительная
Долгое время сайты проектировали для больших экранов, а потом «адаптировали» под телефоны: сжимали колонки, прятали блоки, уменьшали шрифты. Для магазина такой подход сегодня неприемлем. Если большинство покупателей видят сайт на экране шириной 360–430 пикселей, именно этот экран и нужно проектировать в первую очередь.
На практике это означает, что прототипы и дизайн мобильных экранов мы делаем одновременно с десктопными, а не после них. Каждый блок проверяется вопросом: как он будет выглядеть и работать на телефоне одной рукой? Если ответа нет, блок перерабатывается. Это меняет многое: от количества пунктов в меню до того, где стоит кнопка покупки.
Важно и то, что поисковые системы оценивают сайт в первую очередь по мобильной версии. Если на телефоне скрыта часть контента или навигации, это влияет на индексацию и позиции всего сайта, а не только на мобильный трафик.
Навигация и шапка сайта
На десктопе шапка магазина вмещает логотип, меню каталога, поиск, телефон, вход, избранное и корзину. На телефоне всё это не помещается, и нужно выбирать главное. Мы оставляем в мобильной шапке логотип, кнопку меню, поиск и корзину со счётчиком. Поиск лучше показывать открытым полем или заметной иконкой: в магазине с большим ассортиментом это основной вход в каталог.
Шапку на мобильных удобно закреплять при прокрутке, но в компактном виде — не выше 56–64 пикселей. Огромная закреплённая шапка с баннером акции съедает четверть экрана, и пользователю остаётся мало места для товаров. Хорошо работает вариант, когда шапка прячется при прокрутке вниз и появляется при прокрутке вверх.
Меню каталога на телефоне — это многоуровневый список с понятным переходом вглубь и кнопкой «Назад». Раскрывающиеся при наведении меню здесь не работают: наведения на сенсорном экране нет. Пункты меню должны быть достаточно крупными для касания пальцем — минимум 44–48 пикселей по высоте.
Каталог и карточка товара на маленьком экране
В мобильном каталоге товары обычно выводятся в две колонки. Одна колонка подходит для товаров, где важны детали фото — мебель, одежда премиум-сегмента, — но требует больше прокрутки. В карточке товара в списке оставляем фото, название в две строки, цену и кнопку или иконку добавления в корзину. Рейтинг и бейджи «Хит», «Скидка» — по необходимости, без перегруза.
Фильтры и сортировка прячутся за двумя кнопками над списком товаров, а фильтры открываются полноэкранной панелью с закреплённой кнопкой «Показать N товаров» внизу. Подробно мы разбирали это в статье о фильтрах и поиске по каталогу.
В карточке товара на первом экране должны поместиться фото с возможностью листать свайпом, название, цена и выбор варианта. Кнопку «В корзину» на мобильных мы закрепляем внизу экрана: пользователь листает описание, характеристики и отзывы, а кнопка всегда под большим пальцем. Длинные блоки — характеристики, описание, отзывы — удобно сворачивать в аккордеоны или переключать вкладками, чтобы страница не превращалась в бесконечную ленту. Остальные элементы карточки описаны в материале о карточке товара, которая продаёт.
Оформление заказа с телефона
Оформление — место, где разрыв между мобильными и десктопом проявляется сильнее всего. Ввод текста на телефоне медленнее и сложнее, ошибиться проще, а увидеть сообщение об ошибке — труднее, если оно появилось за пределами экрана.
Минимум полей
Каждое лишнее поле на телефоне стоит дороже, чем на компьютере. Оставляем имя, телефон и адрес или пункт выдачи. Почта — по желанию.
Правильные клавиатуры
Для телефона — цифровая клавиатура, для почты — с символом @, для индекса — цифровая. Это задаётся типом поля и экономит секунды на каждом вводе.
Автозаполнение
Корректные атрибуты полей позволяют браузеру подставить имя, телефон и адрес одним касанием. Подсказки адресов при вводе сокращают ошибки.
Ошибки рядом с полем
Сообщение появляется сразу под полем, а страница прокручивается к первой ошибке при попытке отправить форму.
Быстрая оплата
Оплата через СБП с переходом в приложение банка, сохранённые карты для повторных покупок, системные платёжные кнопки — всё, что избавляет от ввода номера карты.
Отдельно проверяйте поведение при переходе в приложение банка и обратно. На части телефонов браузер выгружает вкладку из памяти, и после оплаты пользователь возвращается на пустую страницу или в начало оформления. Статус заказа в этом случае должен обновиться по серверному уведомлению, а пользователь — увидеть подтверждение.
Скорость на мобильном интернете
Мобильный интернет нестабилен: в метро, в торговом центре, за городом скорость падает, а задержки растут. Страница, которая на офисном Wi-Fi открывается за секунду, на телефоне может грузиться пять-семь секунд. Каждая лишняя секунда ожидания заметно снижает вероятность того, что человек дождётся загрузки и продолжит покупки.
| Источник тормозов | Как проявляется | Решение |
|---|---|---|
| Тяжёлые изображения | Фото в каталоге по 1–2 МБ каждое | Сжатие, современные форматы, адаптивные размеры под экран |
| Слайдеры на главной | Пять баннеров грузятся сразу, хотя виден один | Один статичный баннер или ленивая загрузка остальных |
| Сторонние скрипты | Чаты, виджеты, счётчики блокируют отрисовку | Отложенная загрузка после основного контента |
| Шрифты | Четыре начертания двух гарнитур | Не больше двух-трёх файлов, предзагрузка основного |
| Медленный сервер | Долгое ожидание первого байта | Кеширование, оптимизация запросов к базе, нормальный хостинг |
Измерять скорость нужно на реальных устройствах и с имитацией мобильной сети, а не на мощном компьютере разработчика. Мы проверяем ключевые страницы — главную, категорию, карточку товара, корзину — на недорогом смартфоне Android с замедленным соединением. Это быстро отрезвляет.
Ориентиры по скорости
Для мобильной версии магазина мы ставим себе цель: основной контент первого экрана появляется не позже чем через 2,5 секунды на средней мобильной сети, страница не «прыгает» при загрузке картинок и баннеров, а реакция на касание кнопки ощущается мгновенной. Последнее часто упускают: если после нажатия «В корзину» ничего не происходит полсекунды, пользователь нажимает ещё раз и получает два товара вместо одного. Любое действие должно сопровождаться немедленной визуальной реакцией — сменой состояния кнопки или индикатором загрузки.
Типичные ошибки мобильных версий
Большинство проблем, которые мы находим на аудитах мобильных версий, повторяются из проекта в проект. Пройдитесь по списку на своём сайте с телефона в руке.
- Всплывающие окна с подпиской или акцией закрывают весь экран, а крестик крошечный или вне видимой области.
- Кнопки и ссылки слишком маленькие или стоят вплотную, и пальцем легко нажать соседнюю.
- Текст мельче 16 пикселей — в поля ввода на iPhone при фокусе страница автоматически увеличивается.
- Таблицы характеристик и размеров не помещаются по ширине и создают горизонтальную прокрутку всей страницы.
- Галерея фото не листается свайпом, только стрелками.
- Виджет онлайн-чата перекрывает кнопку «В корзину» или «Оформить заказ».
- Телефон в шапке не кликабелен, а адрес не открывается в картах.
- Баннер о cookie занимает треть экрана и не закрывается.
Отдельная история — горизонтальная прокрутка. Достаточно одного блока шире экрана, чтобы вся страница начала «гулять» влево-вправо при прокрутке. Это раздражает пользователя и считается ошибкой мобильной версии у поисковых систем.
Как тестировать мобильную версию
Эмулятор в браузере разработчика полезен, но не заменяет реальные устройства. Он не показывает, как ведёт себя виртуальная клавиатура, насколько удобно попадать пальцем по кнопкам, как работает переход в приложение банка и обратно. Мы тестируем мобильные версии на наборе реальных телефонов: несколько Android-смартфонов разных ценовых категорий и пара iPhone с разными размерами экрана.
Полезно проводить и простые пользовательские тесты: дайте телефон человеку, который не знаком с сайтом, и попросите найти и заказать конкретный товар. Наблюдайте молча. Пять таких тестов обычно выявляют основные проблемы интерфейса. В аналитике стоит регулярно сравнивать воронку для мобильных и десктопа: если на каком-то шаге мобильные пользователи отваливаются заметно чаще, там почти наверняка есть проблема интерфейса.
Если мобильная версия существующего магазина требует серьёзной переработки, иногда эффективнее не латать её, а пересобрать интерфейс в рамках редизайна с подходом «сначала мобильные».
Выводы
Мобильная версия магазина — это основной интерфейс для большинства покупателей, и проектировать её нужно в первую очередь, а не в остаток времени. Компактная шапка с поиском и корзиной, удобный каталог в две колонки, фильтры в полноэкранной панели, закреплённая кнопка покупки, короткая форма оформления с правильными клавиатурами и быстрая оплата через СБП — базовый набор, без которого магазин теряет заказы.
Скорость на мобильном интернете и отсутствие мелких раздражителей — всплывающих окон, крошечных кнопок, горизонтальной прокрутки — значат не меньше, чем красивый дизайн. Тестируйте на реальных телефонах, сравнивайте мобильную и десктопную воронки и исправляйте то, что видно в цифрах. Разрыв в конверсии между мобильными и десктопом почти никогда не удаётся закрыть полностью, но сократить его вдвое — вполне реальная задача.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
