Как сделать каталог интернет-магазина удобным на смартфоне
Проверка мобильного каталога по одному сценарию: вход в категорию, сравнение товаров, фильтры, возврат из карточки и доступность на узком экране.
Удобный каталог на смартфоне позволяет найти подходящий товар, сравнить варианты и вернуться к выбору после просмотра карточки. Для этого недостаточно уменьшить настольную сетку. На небольшом экране особенно заметны потерянные фильтры, непонятные названия, обрезанная цена и кнопки, по которым трудно попасть.
Проверяйте каталог как последовательность действий покупателя. Один конкретный сценарий покажет больше, чем оценка «выглядит аккуратно»: на каждом шаге видно, что человек должен узнать и какое действие может выполнить. Ниже — порядок аудита существующего каталога, без повторного проектирования всего дерева категорий.
Начните с конкретной покупки
Выберите типичную задачу и заранее установите правильный результат по данным каталога. Для учебного примера покупатель ищет сковороду для индукции диаметром 24–26 см, до условных 5 000 ₽. В вымышленной категории 48 моделей, из них 11 отвечают всем условиям. Эти числа служат только для проверки сценария.
Сначала составьте список подходящих артикулов по характеристикам, а уже потом сравнивайте его с интерфейсом. Иначе счётчик «11 товаров» может выглядеть убедительно, хотя выдача содержит неподходящие модели. Если характеристики не заполнены, это проблема данных, которую одной заменой кнопки фильтра не исправить.
Повторите путь от главной и прямого входа в категорию. Покупатели приходят разными маршрутами; страница должна объяснять своё положение и при посещении из поиска. Не проверяйте только уже знакомый вам путь через меню.
Путь до списка и сравнение товаров
Откройте мобильное меню и найдите категорию. Названия должны помогать определить содержание до нажатия. Если «Для идеальной кухни» содержит посуду, технику и текстиль без понятных групп, ошибка начинается ещё до списка. Подробная работа с группами рассматривается в структуре каталога; здесь проверяется, можно ли пользоваться готовой структурой с телефона.
В категории должны быть видны название, текущие условия выбора и путь назад. Хлебные крошки, название раздела или понятный возврат дают контекст, но длинная цепочка не должна вытеснять товары с экрана. Проверьте, не перекрывает ли раскрытое меню управление браузером или кнопку закрытия.
Плитка товара должна содержать достаточно сведений для первого сравнения. Для сковороды это узнаваемое фото, название, диаметр, совместимость с индукцией и цена. Для обуви важнее доступные размеры, для накопителя — объём и интерфейс. Выбор полей зависит от решения покупателя: нет универсального набора дополнительных характеристик для всех категорий.
Плотная сетка показывает больше вариантов, но может превратить название и цену в мелкие фрагменты. Одна широкая карточка лучше читается, но требует больше прокрутки. Проверьте оба свойства вместе: человек должен различать товары, а не только видеть больше прямоугольников. Цена не должна терять часть числа, а важный вариант — обрезаться так, что все модели выглядят одинаково.
Фильтры на небольшом экране
После нескольких экранов прокрутки найдите управление фильтрами. Оно должно оставаться доступным без возвращения в начало длинного списка. Это может быть закреплённая кнопка или другой понятный способ, но панель не должна постоянно закрывать товары. Фильтрация и сортировка решают разные задачи: первая исключает неподходящее, вторая меняет порядок.
Открыв панель, проверьте, можно ли выбрать индукцию, диаметр и диапазон цены. Если фильтр использует несколько значений, покупатель должен понимать, можно ли выбрать их одновременно. Варианты применения зависят от платформы: либо выдача меняется сразу с ясной обратной связью, либо человек нажимает кнопку вроде «Показать 11 товаров». Нельзя оставлять непонятным, применены ли отметки после закрытия панели.
После применения покажите активные условия рядом со списком. Дайте снять один фильтр, сохранив остальные, и отдельно сбросить все. В учебном сценарии удаление диаметра должно расширять выбор среди индукционных сковород до 5 000 ₽, а не сбрасывать цену и совместимость. Подробный выбор самих свойств и заполнение данных описаны в настройке фильтров магазина.
Счётчик должен соответствовать результату. Проверьте не только число, но и несколько артикулов: их цена и характеристики удовлетворяют выбранным условиям. Если «нет в наличии» участвует в выборке, правила должны быть понятны и последовательны. Молча включать недоступные варианты в обещание «11 подходящих товаров» неудобно для выбора.
Возврат из карточки и сложные состояния
Откройте модель из середины списка, затем вернитесь обычной кнопкой браузера. Покупатель должен увидеть прежние фильтры и понятное место в выдаче. Потеря прокрутки заставляет снова искать просмотренную модель, а сброс условий — заново выбирать всю категорию.
Проверьте цену и характеристики в карточке: они должны объяснять, почему товар попал в отбор. Если плитка показывает минимальную цену другого варианта, это надо ясно обозначить. Для дальнейшей проверки отдельной страницы пригодится оформление карточки товара.
Отдельно создайте сочетание без результатов. Хорошее пустое состояние показывает выбранные ограничения и позволяет снять одно из них. «Ничего не найдено» без действия превращает нормальный результат поиска в тупик. Не снимайте ограничения автоматически: человек может не заметить, что появились неподходящие товары.
Во время обновления должно быть понятно, что идёт загрузка, а при сбое — что результат не обновился и можно повторить попытку. Не показывайте старую выдачу так, будто она уже соответствует новым отметкам. При повторе сохраняйте выбранные условия, если их не изменил пользователь.
Читаемость и управление
Проверьте страницу на узкой ширине 320 CSS-пикселей. Это контрольная ширина критерия WCAG 2.2 Reflow для вертикально прокручиваемого содержимого: информация и действия должны сохраняться без необходимости прокручивать обычную страницу одновременно по горизонтали и вертикали. CSS-пиксель — единица интерфейса, а не физический пиксель экрана. У критерия есть исключения для содержимого, которому существенна двумерная компоновка; обычные карточки каталога не стоит превращать в такой случай.
Увеличьте текст и проверьте, не исчезают ли кнопки и подписи, не накладываются ли они друг на друга. Проверка ширины и увеличение помогают найти разные дефекты. Дополнительно пройдите сценарий на настоящем телефоне: эмуляция не показывает все особенности нажатий, экранной клавиатуры и браузера.
Для нажатий критерий WCAG 2.2 Target Size (Minimum) уровня AA использует размер цели не меньше 24 × 24 CSS-пикселя либо условия исключений. В частности, учитывается достаточное расстояние между маленькими целями; исключения есть для ссылок внутри текста, равнозначного доступного управления, неизменённого управления браузера и существенных случаев. Не считайте каждую маленькую текстовую ссылку автоматическим нарушением и не выдавайте 24 пикселя за идеальный размер кнопки: пальцем удобнее пользоваться более просторным управлением.
Пройдите меню, панель фильтра и карточки клавиатурой. Видимый фокус должен показывать текущий элемент, панель — закрываться понятным способом, а выбранные состояния — иметь текстовое обозначение. При проверке со скринридером послушайте имена кнопок и отметок: одинаковые «крестики» без контекста не объясняют, какой фильтр будет снят.
Как записывать и исправлять дефекты
Фиксируйте не общую оценку, а воспроизводимый сбой. Запись «фильтры неудобные» не говорит, что исправлять. Полезная форма: устройство и ширина → шаги → фактический результат → ожидаемый результат.
| Симптом | Что повторить | Критерий исправления |
|---|---|---|
| После карточки потеряна индукция | Применить фильтр, открыть товар, вернуться | Условие осталось и выдача соответствует ему |
| Цена обрезана | Открыть плитку с длинным названием на 320 CSS-пикселях | Полная цена читается без прокрутки страницы по горизонтали |
| После снятия диаметра сброшен бюджет | Удалить только отметку диаметра | Цена и индукция сохранились |
| Ошибка загрузки выглядит как успешный отбор | Повторить обновление при сетевом сбое | Видны ошибка и повтор, условия не потеряны |
Сначала исправляйте ошибки, которые блокируют поиск и открытие подходящего товара. Затем — неоднозначность информации и удобство сравнения. Изменение плотности сетки можно проверять как гипотезу после устранения функциональных сбоев. Пройденный сценарий подтверждает работоспособность пути, но сам по себе не доказывает рост конверсии.
Частые вопросы
Обязательно ли отдельное мобильное меню?
Нет. Важен понятный доступ к категориям и поиску в доступном пространстве. Выбирайте решение по своей структуре и проверяйте, что ключевые действия видны, читаются и выполняются без потери контекста.
Достаточно ли проверить главную страницу на телефоне?
Нет. Пройдите список, панель фильтра, карточку и возврат назад. Проверка красивого первого экрана не обнаружит сброс выбранных условий или недоступную кнопку в длинном списке.
Чек-лист мобильного каталога
- Выберите товар и заранее найдите подходящие артикулы в данных; результат фильтра можно сверить с эталоном.
- Пройдите меню и прямой вход в категорию; название и текущий раздел понятны без подсказки.
- Примените несколько условий и снимите одно; остальные отметки и результат согласованы.
- Откройте товар из середины выдачи и вернитесь; фильтры и место выбора сохранились.
- Создайте пустую выдачу и сетевой сбой; видно, как продолжить работу, не потеряв условия.
- Повторите путь на 320 CSS-пикселях, при увеличении текста, с клавиатурой и на телефоне; информация читается, управление доступно, дефекты записаны конкретно.