Сторінка каталогу — точка прийняття рішень. Користувач приходить з наміром знайти потрібний товар із сотень або тисяч позицій. Поганий дизайн каталогу — це втрачені замовлення. Наприклад, один наш клієнт (маркетплейс з 50 000+ SKU) втрачав до 40% користувачів на етапі фільтрації: фільтри скидалися при перезавантаженні, а пагінація вела на 404. Після редизайну каталогу з нуля конверсія зросла на 18%. Ми проєктуємо каталоги, які конвертують, спираючись на 10+ років досвіду — від нішевих інтернет-магазинів до маркетплейсів з мільйонами SKU.
Проблеми, які ми вирішуємо
Реальні технічні складнощі, які ми усуваємо:
- Скидання фільтрів через неправильне зберігання стану (URL або sessionStorage).
- Мертві посилання в пагінації через неправильну обробку параметрів.
- Повільне завантаження через неоптимізовані зображення та зайві запити до API.
Дизайн каталогу — це не про красу, а про швидкість знаходження, ефективність фільтрації та щільність інформації на екрані. Кожен елемент працює на результат: від структури сітки до мікроанімацій. Ми детально опрацьовуємо кожен екран, враховуючи сценарії поведінки користувача — від першого візиту до повторних покупок. Завантаження каталогу за 2 секунди збільшує конверсію на 7% (дані Google), тому продуктивність — такий самий елемент дизайну, як кольори.
Як ми це робимо
Типова компоновка включає декілька незалежних зон, кожна вирішує своє завдання:
- Зона навігації за категоріями. Хлібні крихти + бічна або горизонтальна ієрархія підкатегорій. Для глибоких каталогів (3+ рівні) — виїзне дерево або mega-menu.
- Зона фільтрів. Бічний фільтр (sidebar) на десктопі, offcanvas drawer на мобільних. Фільтри групуються за семантикою: характеристики → ціновий діапазон → доступність → рейтинг. Кожна група — акордеон, що розкривається.
- Зона керування лістингом. Кількість результатів, сортування (за популярністю, ціною, новизною), перемикач виду (сітка/список), кількість карток на сторінку.
- Сітка карток товарів. Основна робоча область.
| Пристрій | Карток у ряд | Рекомендований gap |
|---|---|---|
| Десктоп (1280px+) | 3–4 | 24px |
| Планшет (768–1280px) | 2–3 | 16px |
| Мобільний (320–768px) | 1–2 | 12px |
-
Пагінація. «Завантажити ще» (append) vs класична пагінація vs нескінченний скрол. Append-пагінація зі збереженням позиції через
history.pushState— оптимальний компроміс.
Інвестиції в дизайн каталогу окупаються за 2-3 місяці за рахунок зростання конверсії.
Картка товару в лістингу містить менше інформації, ніж сторінка товару, але має давати достатньо для порівняння:
- Фото (зазвичай квадрат 1:1, hover змінює на друге фото)
- Назва (2 рядки максимум,
-webkit-line-clamp: 2) - Ціна (актуальна + закреслена при знижці + значок відсотка)
- Рейтинг (зірки + кількість відгуків)
- Доступність (в наявності / під замовлення / немає в наявності)
- CTA-кнопка (додати в кошик / в кошик / обрати варіант)
Додатково: бейджі (новинка, хіт, акція), іконка обраного, швидкий перегляд. Дизайн фільтрів: UX-деталі
Прапорці vs теги. Прапорці підходять для 3–8 опцій. Для кольорів — візуальні свотчі. Для 10+ опцій — поле пошуку.
Ціновий діапазон. Подвійний слайдер з полями введення. Гістограма розподілу товарів за ціною над слайдером дає контекст (патерн Amazon, ASOS).
Застосування фільтрів. Два підходи:
| Підхід | Коли використовувати | Особливості |
|---|---|---|
| Миттєве | Невеликі каталоги, швидкий API | Застосування при кліку, одразу оновлення списку |
| Відкладене | Повільний API, мобільні пристрої | Кнопка «Застосувати», запобігає зайвим запитам |
Активні фільтри відображаються тег-пілюлями над результатами з хрестиком для зняття кожного та кнопкою «Скинути всі».
Порожні стани та edge-кейси
Нульові результати фільтрації — не «сторінка 404», а спеціальний екран з ілюстрацією, поясненням, кнопкою «Скинути фільтри» та пропозицією схожих категорій. Каталог з одним товаром — редиректити на сторінку цього товару, не показувати лістинг з однієї картки.
Скелетон-завантаження покращує сприйману продуктивність:
.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; } } Це знижує сприйману затримку та покращує UX. SEO-вимоги до дизайну
- Кожна сторінка фільтрації з унікальним набором параметрів повинна мати canonical → на головну сторінку категорії.
- H1 має змінюватися при виборі категорії: «Ноутбуки», а не «Каталог».
- Тексти з кількістю результатів: «142 ноутбуки в наявності».
- Структуровані дані:
ItemListз першими 10 товарами.
Продуктивність Фотографії — головний ботлнек. Рекомендації:
- WebP + AVIF з JPEG fallback через
<picture> - Lazy loading для карток нижче fold, eager loading для перших 4–8
- Розміри зображень: 400×400 для лістингу (не тягнути 1200×1200)
-
aspect-ratio: 1/1на контейнері — уникає CLS
Процес роботи та що входить
В результаті ви отримуєте:
- Макети всіх екранів (десктоп, планшет, мобільний)
- UI-kit компонентів каталогу
- Прототип фільтрації зі станами
- Керівництво з імплементації для розробників
- Вихідні Figma-файли
Орієнтири за термінами
- Дизайн каталогу для 1 типу товарів, 1 breakpoint без фільтрів — 2–3 дні.
- Повний дизайн з адаптацією, складними фільтрами та станами — 5–8 днів.
- Дизайн + компонентна система + передача в розробку — 1.5–2 тижні.
Вартість розраховується індивідуально.
Наш досвід
Понад 50 успішних проєктів, команда сертифікованих UX-спеціалістів. Каталог з продуманим UX у 2 рази швидше приводить користувача до покупки. Замовте дизайн каталогу, який збільшить продажі. Зв'яжіться з нами для обговорення вашого проєкту.
Середня економія на доробках після нашого дизайну становить 20% бюджету.