Вернуться к статьям Покупатель открывает карточку товара в дороге, между встречами или вечером с телефона. Экран небольшой, связь может пропадать, а времени на поиск нужной кнопки нет. Если фильтр перекрывает каталог, вариант товара нельзя выбрать пальцем, а форма заказа теряет введённые данные после ошибки, покупка обычно не состоится. Поэтому мобильная версия интернет-магазина требует отдельной проверки, а не просмотра уменьшенной главной страницы.
До запуска стоит пройти реальный путь покупателя: найти товар, сравнить варианты, добавить его в корзину, указать данные и получить понятный результат. Проверять нужно не только демонстрационный товар, но и позиции с длинными названиями, разными характеристиками, отсутствием в наличии и нестандартными условиями получения.
Адаптивная версия интернет-магазина и ширина экрана
Мобильная версия должна корректно работать на узких и широких экранах, в вертикальном и горизонтальном положении. Проверки одного телефона недостаточно: блоки могут переноситься иначе, а элементы управления выходить за границы области просмотра.
Для проверки полезно открыть каталог, карточку, корзину и оформление заказа на нескольких размерах экрана. Важно убедиться, что:
- меню не скрывает основной контент и закрывается без затруднений;
- текст не требует горизонтальной прокрутки;
- изображения не обрезают значимые детали товара;
- таблицы характеристик, составы комплектов и описания не ломают разметку;
- всплывающие окна остаются доступными и не уходят за край экрана;
- фиксированные кнопки не перекрывают поля формы и системные элементы телефона.
Отдельного внимания требуют страницы с нестандартными блоками: подбором товара, сравнением, условиями доставки, инструкциями, статьями и личным кабинетом. В таких разделах часто остаются элементы, рассчитанные только на широкий экран.
Мобильный каталог интернет-магазина: поиск, разделы и фильтры
На телефоне покупатель редко изучает весь каталог подряд. Обычно он ищет конкретную позицию или сужает выбор по параметрам. Навигация должна показывать, где находится пользователь, как вернуться на уровень выше и как изменить условия отбора.
Фильтр проверяют на реальных свойствах товаров. Если одни характеристики заполнены у всех позиций раздела, а другие только у части, выдача может выглядеть непоследовательной. Стоит оставить параметры, которые помогают выбрать товар, и убрать те, что создают лишние пункты.
Отдельно проверяют поиск: запросы с ошибкой, сокращённые названия, артикулы и пустую выдачу. При отсутствии результатов нужен следующий шаг: изменить запрос или перейти в подходящий раздел. Сообщение «ничего не найдено» без доступного действия оставляет пользователя в тупике.
Карточка товара на мобильном телефоне
Карточка должна отвечать на основные вопросы до добавления в корзину: что продаётся, чем отличаются варианты, какие параметры доступны, как получить товар и какое действие доступно сейчас. На небольшом экране порядок блоков заметно влияет на восприятие.
Нужно проверить, видны ли в начале карточки название, выбранный вариант и действие для покупки. Если товар требует выбора размера, цвета, объёма или другого параметра, нельзя допускать добавление неподходящей конфигурации без понятного предупреждения.
Отдельные проверки нужны для товара без фотографии, позиции с длинным названием, товара без остатка, товара с несколькими вариантами и позиции, которая оформляется по запросу. Для последнего сценария кнопка и форма должны соответствовать задаче: запрос на расчёт не следует оформлять как обычную покупку.
Кнопки и формы в мобильной версии интернет-магазина
Элемент, который выглядит как ссылка или кнопка, должен быть удобен для нажатия пальцем. Слишком близко расположенные действия приводят к случайным переходам: пользователь открывает соседний товар вместо добавления в корзину или удаляет позицию при попытке изменить количество.
В формах оформления заказа проверяют порядок полей, понятность подписей и сообщения об ошибках. Если обязательное поле заполнено неверно, пользователь должен видеть, что исправить и где находится проблемное место. Ошибка только в верхней части длинной формы может остаться незамеченной.
Полезно пройти сценарий с прерыванием: заполнить часть формы, вернуться назад, сменить способ получения, исправить ошибку. В требованиях к проекту стоит зафиксировать, какие данные сохраняются в таких ситуациях и какое сообщение появляется после отправки формы.
Корзина и оформление заказа с телефона
Корзина на мобильном устройстве помогает проверить состав заказа и изменить решение. В ней должны читаться название товара, выбранный вариант, количество, доступность оформления и действие для удаления или изменения позиции.
Проверяют поведение корзины при увеличении и уменьшении количества, удалении последней позиции, добавлении товара с несовместимым вариантом и возврате в каталог. Если условия получения зависят от состава заказа или региона, этот сценарий проверяют на тестовых данных.
После отправки заказа нужен однозначный результат: форма принята, требуется дополнительное действие или заказ не создан из-за ошибки. Неопределённый экран после нажатия кнопки может привести к повторным отправкам.
Скорость мобильной версии интернет-магазина и тяжёлые элементы
На мобильном интернете особенно заметны большие изображения, несколько баннеров подряд, автоматически запускаемые ролики и сторонние виджеты. Баннеры, ролики и виджеты стоит оставлять только тогда, когда они нужны для выбора товара или оформления заказа.
До запуска полезно проверить страницы при нестабильном соединении. Если изображение загружается долго, структура карточки не должна постоянно сдвигаться. Если внешний элемент недоступен, каталог, корзина и форма заказа должны сохранять рабочее состояние.
Для изображений следует согласовать размеры и правила подготовки материалов. Один исходный файл не всегда подходит одновременно для первого экрана, галереи товара и отдельного блока на странице. Форматы контента лучше определить до наполнения каталога, чтобы не переделывать материалы перед запуском.
Проверка мобильной версии сайта перед запуском
Проверка завершается перечнем сценариев с ожидаемым результатом, а не просмотром макета. В него обычно входят переход из поиска в карточку, работа фильтров, выбор варианта товара, добавление в корзину, изменение количества, оформление заказа и получение данных сотрудником в согласованном месте.
В список включают исключения: товар закончился, наличие требует уточнения, поле заполнено неверно, поиск не дал результатов, пользователь вернулся на предыдущий шаг. Такие ситуации помогают отличить ошибку разработки от правила, которое не было описано.
Если интернет-магазин работает на «1С-Битрикс: Управление сайтом», мобильная проверка относится к публичной части сайта: каталогу, страницам, корзине, формам и передаче заказа по согласованному сценарию. Внутренние процессы сотрудников описывают отдельно, чтобы требования к сайту не смешивались с задачами других систем.
Часто задаваемые вопросы
- Как проверить мобильную версию интернет-магазина без специальных устройств?
Откройте страницы в браузере на разных размерах экрана, затем повторите основные сценарии на нескольких реальных телефонах. На устройствах легче заметить неудобные зоны нажатия, работу клавиатуры, прокрутку и поведение фиксированных элементов.
- Какие страницы проверять в первую очередь?
Каталог, поиск, фильтры, карточку товара, корзину и оформление заказа. Затем — страницы с условиями получения, возвратом в каталог, пустой выдачей и сообщениями об ошибках.
- Почему мобильный фильтр может быть неудобным, даже если он работает?
Он может содержать слишком много параметров, скрывать выбранные условия или занимать весь экран без понятного способа применить изменения. Проверять фильтр нужно на задаче выбора конкретного товара, а не только на факте его открытия.
- Что делать с товарами, которые нельзя купить сразу?
Для них нужен отдельный сценарий: запрос, расчёт, резервирование или подтверждение наличия. В карточке и форме следует ясно показать доступное действие и данные, которые покупатель передаёт для дальнейшей обработки.
- Как понять, что мобильная версия готова к запуску?
Каждый согласованный сценарий пройден на реальных данных, включая ошибки и исключения. Покупатель может найти товар, понять условия, выполнить предусмотренное действие и увидеть понятный результат отправки формы.