Привет! На связи Александр. Сегодня запускаю серию статей, в которых пошагово разбираю процесс проектирования десктопной версии интернет-магазина для розничной сети «Русский Разгуляйка».

Ниша комфортной и ортопедической обуви — это не просто «ещё один e-com». Это продукт со специфической аудиторией, где на первый план выходят доступность, понятная навигация и помощь в сложном выборе. В этой статье разберём основу: главную страницу, архитектуру и поиск — всё то, с чего начинается любой пользовательский путь.

Контекст и референсы

За референс я взял десктопный опыт «Метро» — одного из сильных игроков ритейла в РФ. Их решения в части мобильной и десктопной навигации, работы с каталогом и поиском — это эталон, на который стоит ориентироваться.

Но слепое копирование — не наш метод. В каждой нише есть своя специфика, и задача дизайнера — понять, где чужие паттерны работают, а где их нужно докручивать под своих пользователей.

Главная страница: архитектура и зонирование

Возрастная верификация 18+

Первый вопрос, с которым мы столкнулись — возрастная верификация. На текущем сайте она реализована через блюр на товарах 18+ и модалку подтверждения. Мы решили оставить этот механизм, но сделать его менее навязчивым.

Решение: блюр остаётся только на конкретных товарах, а не на всей странице. Модалка появляется один раз при первом посещении, дальше пользователь работает без лишних препятствий.

Хедер, футер и навигация

Хедер и футер мы переносим со старого сайта — там уже собрана вся необходимая информация: ссылки на приложение, соцсети, контакты. Задача была не переизобретать колесо, а адаптировать существующую структуру под новые сценарии.

Важный момент: добавили кнопку «scroll to top» — на длинных страницах каталога это критично для UX.

Баннеры акций

Баннеры — это боль любого e-com. Они часто съедают полезную площадь первого экрана и отвлекают от основного контента.

Решение: сделали баннеры со скрытием. Пользователь может кликнуть на крестик и убрать баннер, чтобы сосредоточиться на каталоге. Это даёт контроль над интерфейсом и не раздражает.

Зона контента

Контент на главной выстраивается в ленту: рубрики идут друг за другом, карточки товаров группируются по категориям. Здесь же размещаем блок акций и новостей — по аналогии с текущим сайтом, но с более чистой разметкой.

Задача: выстроить ритм на широком экране, чтобы пользователь мог быстро сканировать контент и находить нужное.

Поиск как отдельный продукт

Поиск в e-com — это не просто строка ввода. Это отдельный продукт со своими сценариями, состояниями и механиками. Давайте разберём, как мы его спроектировали.

Строка поиска и подсказки

При клике на строку поиска появляется выпадающий список с двумя блоками:

  • Теги «часто ищут» — популярные запросы, которые помогают пользователю быстро сориентироваться.
  • «Разгуляй рекомендует» — персонализированные рекомендации на основе текущего ассортимента.

Оба блока можно листать, если контента много.

Результаты поиска: запросы → категории → товары

Когда пользователь вводит запрос (например, «сыр»), мы показываем результаты в три этапа:

  1. Поисковые запросы — самые популярные запросы, связанные с введённым словом.
  2. Категории — здесь я добавил блок, которого не было в «Метро». Категории помогают пользователю быстро перейти в нужный раздел, не пролистывая весь список товаров.
  3. Товары — минималистичная выдача из 4 товаров в ряд. Это баланс между информативностью и скоростью сканирования.

Почему категории сверху? В «Метро» этого не было, но для пользователя это сильно ускоряет навигацию. Если человек ищет «сыр», он хочет быстро понять, есть ли нужный ему тип сыра (твёрдый, мягкий, плавленый) — и категории помогают это сделать без лишних кликов.

Отдельная страница поиска

Если пользователь кликает «показать все результаты», он попадает на отдельную страницу поиска. Здесь подключается механизм выбора магазина — чтобы показывать актуальное наличие товаров.

Важно: мы встраиваем выбор магазина прямо в поиск, а не прячем его на отдельной странице. Это снижает трение и помогает пользователю сразу видеть, что есть в наличии в его городе.

Карточки товара: несколько форматов

Один из ключевых инсайтов — карточка товара не может быть универсальной. В разных сценариях пользователю нужна разная информация.

Мы спроектировали три формата карточек:

  1. Минималистичный — для списков и выдачи поиска. Только самое необходимое: фото, название, цена, кнопка «в корзину».
  2. Промежуточный — для превью в каталоге. Добавляем рейтинг, краткое описание, основные характеристики.
  3. Большой + detail-страница — полная карточка товара со всеми характеристиками, отзывами, рекомендациями и блоком наличия в магазинах.

Каждый формат решает свою задачу в CJM (Customer Journey Map) и под разные сценарии просмотра.

Локация магазина и наличие

Одна из ключевых фич для ритейла — показ актуального наличия товаров в конкретном магазине. Мы реализовали это через механизм выбора магазина, который интегрирован в поиск и каталог.

Как это работает:

  • Если пользователь ещё не выбрал магазин, мы предлагаем сделать это прямо в поиске или каталоге.
  • После выбора магазина результаты автоматически фильтруются по наличию.
  • Пользователь может в любой момент сменить магазин — и результаты обновятся.

Это снижает нагрузку на колл-центр (люди не звонят, чтобы уточнить наличие) и повышает конверсию (пользователь сразу видит, что может купить).

Корзина до авторизации

Отдельный вопрос — корзина до авторизации. Можно ли её наполнять, если пользователь ещё не вошёл в аккаунт?

Наше решение: корзина работает в гостевом режиме. Пользователь может добавлять товары, оформлять заказ без регистрации, и только при необходимости создавать аккаунт. Это снижает трение на первом этапе и не отпугивает новых пользователей.

Выводы

В этой части мы разобрали основу: главную страницу, навигацию и поиск. Ключевые инсайты:

  • Не копируем слепо — адаптируем чужие паттерны под свою нишу и пользователей.
  • Поиск — это продукт — со своими сценариями, состояниями и механиками.
  • Карточки товара — не универсальны — разные форматы под разные сценарии.
  • Локация магазина — встроена в CJM — не прячем на отдельной странице.