Дизайн — статьи о сайтах
Когда в магазине несколько направлений (женская, мужская, детская одежда, большие размеры, верхняя одежда), их часто делают просто пунктами меню, ведущими в общий список товаров. Но у направления своя задача, и ей лучше отвести отдельную страницу. Ниже разберём, из чего она состоит.
Чем страница направления отличается от каталога
В каталоге человек уже выбирает товар. На страницу направления он приходит с поискового запроса вроде «женские пальто», из рекламного объявления, рассылки или поста в соцсети. Ему нужно за несколько секунд убедиться, что он попал куда хотел, и сузить выбор. Поэтому страница не должна быть ни витриной всего магазина, ни голым списком из сотни карточек. Это «входной зал» одного раздела.
Что поместить на первый экран
- Заголовок с названием направления и одной строкой о том, что здесь есть: например, «Пальто, куртки и плащи на осень и зиму».
- Плитки подкатегорий: 4–8 штук с понятными названиями. На смартфоне они должны занимать не больше половины экрана, иначе товаров не видно.
- Короткая строка об условиях: доставка, примерка, возврат. Покупатель одежды боится не подойти по размеру, и ответ нужен до карточки товара.
Крупный слайдер с акциями на всю высоту экрана лучше убрать: он отодвигает товары и не помогает выбору.
Фильтры и сортировка: с чего начать
Для одежды главный фильтр — размер, и он должен стоять первым. Дальше идут цвет, цена, сезон, материал, бренд. Если размера нет в наличии, модель лучше скрывать после выбора фильтра, а не показывать с пометкой, иначе покупатель зря открывает карточки.
На смартфоне фильтры удобнее убрать в выдвижную панель с кнопкой вроде «Показать 24 товара», где число обновляется по ходу выбора. Ещё одна частая проблема: после перехода в карточку и возврата фильтры сбрасываются. Проверьте это отдельно, покупатель вернётся к списку не один раз. Ссылку на таблицу размеров поставьте рядом с фильтром размера.
Текст, адрес и заголовки страницы
Небольшой текст на странице нужен не для объёма, а для помощи в выборе: чем отличаются фасоны, как подобрать размер, как ухаживать за тканью. Не копируйте описания производителей: такие тексты повторяются на десятках сайтов и ничего не добавляют.
Адрес лучше делать понятным и вложенным, например /women/coats/. В заголовке страницы (title) укажите направление, а если есть офлайн-точка, то и город. Комбинации фильтров не должны порождать множество одинаковых адресов: решите заранее, какие из них индексируются, а какие закрыты или ссылаются на основную страницу через canonical. Для разбивки списка на страницы используйте rel="next" и "prev". Позиций в поиске это не гарантирует, но снижает путаницу с дублями.
Условный пример фрагмента страницы
Допустим, магазин «Пример» делает страницу «Верхняя одежда для женщин». Сверху расположено следующее:
- Заголовок: «Женская верхняя одежда». Под ним: «Пальто, куртки, плащи и пуховики. Примерка при доставке по городу, возврат в установленный срок».
- Плитки: «Пальто», «Куртки», «Плащи», «Пуховики», «Тренчи», «Новинки сезона». Каждая ведёт на свою страницу.
- Панель: «Размер: 42, 44, 46…», затем цвет и цена. Рядом сортировка: «Сначала новинки / по цене».
- Сетка товаров. В карточке: фото, название, цена, доступные размеры мелким шрифтом.
- Под сеткой текст «Как выбрать пальто по длине и плотности ткани» и ссылка на таблицу размеров.
Условия доставки, названия и состав подкатегорий вы определяете по своему ассортименту, пример показывает только порядок блоков.
Проверочный список перед запуском
- Из заголовка и первой строки понятно, что это за направление.
- Подкатегории видны без прокрутки на смартфоне, а первые товары появляются сразу следом.
- Размер — первый фильтр, и он учитывает реальное наличие.
- Выбранные фильтры сохраняются при возврате из карточки.
- Есть ссылка на таблицу размеров и краткие условия возврата.
- У страницы уникальные title и описание, понятный адрес.
- Адреса с фильтрами не создают лишних дублей.
- Текст написан для покупателя, а не скопирован у поставщика.
- Страница открывается и работает на смартфоне без горизонтальной прокрутки.
