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