Розробка дизайну сторінки каталогу товарів сайту

Розробка дизайну сторінки каталогу товарів сайту

Сторінка каталогу — точка прийняття рішення. Користувач приходить з намірою знайти потрібний товар з сотень або тисяч позицій. Дизайн каталогу — це не про красу: це про швидкість пошуку, ефективність фільтрації та щільність інформації на екрані. Помилки тут безпосередньо конвертуються у відмови та втрачені замовлення.

Структура сторінки каталогу

Типова компонування включає кілька незалежних зон, кожна з яких вирішує своє завдання:

Зона навігації по категоріям Хлібні крошки (Головна → Електроніка → Ноутбуки) + бічна або горизонтальна ієрархія підкатегорій. Для глибоких каталогів (3+ рівні) — виїжджаюче дерево або mega-menu на десктопі.

Зона фільтрів Біч-фільтр (sidebar) на десктопі, offcanvas drawer на мобільних. Фільтри групуються по семантиці: характеристики → ціновий діапазон → доступність → рейтинг. Кожна група — розкриваючийся аккордеон з індикатором активних фільтрів.

Зона управління листингом Кількість результатів, сортування (за популярністю, ціною, новизною), перемикач виду (сітка/список), кількість карточок на сторінку.

Сітка карточок товарів Основна робоча область. Параметри сітки:

Пагінація «Завантажити ще» (append) vs класична пагінація vs нескінченний скролл. Нескінченний скролл погіршує SEO та робить неможливим повернення до позиції — використовувати тільки з віртуалізацією. Append-пагінація зі збереженням позиції через history.pushState — оптимальний компроміс для більшості каталогів.

Карточка товару в листингу

Карточка каталогу містить менше інформації, ніж сторінка товару, але має давати достатньо для порівняння:

• Фото (звичайно квадратне 1:1, hover змінює на друге фото якщо є)
• Назва (2 рядки максимум, overflow: hidden; -webkit-line-clamp: 2)
• Ціна (актуальна + закреслена при скидці + значок відсотка скидки)
• Рейтинг (зірки + кількість відгуків)
• Доступність (в наявності / під замовлення / немає в наявності)
• CTA кнопка (додати в кошик / в кошику / вибрати варіант)

Додаткові елементи по контексту: бейджи (новинка, хіт, акція), іконка улюбленого (wishlist), швидкий перегляд.

Дизайн фільтрів: UX-деталі

Чекбокси vs теги. Чекбокси підходять для фільтрів з 3–8 опціями. Для кольорів — візуальні свотчі. Для 10+ опцій — поле пошуку всередині фільтра.

Ціновий діапазон. Подвійний слайдер (range slider) з полями вводу. Гістограма розподілу товарів за ціною над слайдером дає користувачу контекст — паттерн з Amazon, ASOS.

Застосування фільтрів. Два підходи:

• Миттєве (застосовується при кліку) — для невеликих каталогів з швидкою відповіддю сервера
• Відкладене (кнопка «Застосувати») — для каталогів з повільним API, мобільних пристроїв

Активні фільтри. Тег-пілюлі над результатами з хрестиком для зняття кожного фільтра та кнопкою «Скинути всі».

Пусті стани та edge-кейси

Нульові результати фільтрації — не «сторінка 404», а спеціальний екран з:

• Ілюстрацією (не stock-photo)
• Поясненням що сталося
• Кнопкою «Скинути фільтри»
• Пропозицією подібних категорій або популярних товарів

Каталог з одним товаром — редиректити на сторінку цього товару, не показувати листинг з однієї карточки.

Skeleton-завантаження

При AJAX-оновленні каталогу (застосування фільтрів, змін сторінки) показувати skeleton placeholders, не спіннер:

.skeleton-card {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

SEO-вимоги до дизайну

• Кожна сторінка фільтрації з унікальним набором параметрів має мати canonical → на головну сторінку категорії (якщо фільтри не створюють окремих SEO-сторінок)
• H1 має змінюватися при виборі категорії: «Ноутбуки», не «Каталог»
• Тексти з кількістю результатів для пошукових систем: «142 ноутбука в наявності»
• Структуровані дані: ItemList з першими 10 товарами

Продуктивність

Фотографії — основне вузьке місце каталогу. Рекомендації:

• WebP + AVIF з JPEG fallback через <picture>
• Lazy load для карточок нижче fold
• Eager load для перших 4–8 карточок (видимі без скролу)
• Розміри зображень: 400×400 для листингу (не тащити 1200×1200)
• aspect-ratio: 1/1 на контейнері зображення — уникнути CLS

Інструменти проектування

Дизайн каталогу розробляється у Figma з:

• Компонентами карточок зі всіма станами (hover, у кошику, немає в наявності, зі скидкою)
• Auto Layout для сітки з правильними gap та padding
• Варіантами компонента для різних breakpoints
• Прототипом фільтрації для демонстрації поведінки

Терміни

Дизайн каталогу для 1 типу товарів, 1 breakpoint (десктоп) без фільтрів — 2–3 дні. Повний дизайн: десктоп + мобайл, складні фільтри, всі стани карточок, пагінація, empty states — 5–8 днів. Дизайн + компонентна система + передача в розробку — 1.5–2 тижні.