מגלישה לרכישה: למה עיצוב קטלוג חשוב
עמוד הקטלוג הוא המקום שבו מתקבלות החלטות. המשתמש מגיע מוכן למצוא מוצר בין מאות או אלפי מוצרים. עיצוב קטלוג גרוע משמעותו הזמנות אבודות. לקוח אחד (מרקטפלייס עם למעלה מ-50,000 מוצרים) איבד עד 40% מהמשתמשים בשלב הסינון: הפילטרים התאפסו על רענון עמוד, והדפדוף הוביל לשגיאות 404. לאחר עיצוב מחדש מלא של הקטלוג, שיעור ההמרה עלה ב-18%. אנו מעצבים קטלוגים שממירים, תוך הסתמכות על ניסיון של למעלה מ-10 שנים — מחנויות מקוונות נישתיות ועד מרקטפלייסים עם מיליוני מוצרים.
עיצוב קטלוג אינו עוסק ביופי; הוא עוסק ביכולת איתור, ביעילות סינון ובצפיפות מידע. כל אלמנט מניע תוצאות: מבנה הרשת, מיקרו-אינטראקציות ומצבי טעינה. אנו מפרטים כל מסך לפי תרחישי משתמש, מהביקור הראשון ועד רכישות חוזרות. טעינת קטלוג תוך פחות משתי שניות מעלה את ההמרה ב-7% (נתונים מגוגל), כך שביצועים הם אלמנט עיצובי לא פחות מצבע.
למה מבנה קובע אם זה עובד או נשבר
פריסה טיפוסית כוללת כמה אזורים עצמאיים, שכל אחד מהם פותר משימה ספציפית:
- אזור ניווט. פירורי לחם + סרגל צד או היררכיית תת-קטגוריות אופקית. לקטלוגים עמוקים (3+ רמות): עץ נפתח או תפריט מגה.
- אזור סינון. סרגל צד בדסקטופ, מגירה נפתחת במובייל. פילטרים מקובצים לפי סמנטיקה: מאפיינים → טווח מחיר → זמינות → דירוג. כל קבוצה היא אקורדיון.
- אזור שליטת רשימה. מספר תוצאות, מיון (פופולריות, מחיר, חדש), מעבר בין תצוגות (גריד/רשימה), פריטים לעמוד.
- גריד כרטיסי מוצר. אזור העבודה המרכזי.
| מכשיר | כרטיסים בשורה | רווח מומלץ |
|---|---|---|
| דסקטופ (1280px+) | 3–4 | 24px |
| טאבלט (768–1280px) | 2–3 | 16px |
| מובייל (320–768px) | 1–2 | 12px |
-
דפדוף. טעינת עוד (הוספה) לעומת דפדוף קלאסי לעומת גלילה אינסופית. הוספה עם שמירת מיקום באמצעות
history.pushStateהיא הפשרה האופטימלית.
השקעה בעיצוב קטלוג מחזירה את עצמה תוך 2–3 חודשים דרך המרה גבוהה יותר.
אנטומיה של כרטיס מוצר
כרטיס קטלוג מציג פחות מעמוד מוצר, אבל מספיק להשוואה:
- תמונה (בדרך כלל ריבוע 1:1, ריחוף חושף תמונה שנייה)
- שם (מקסימום 2 שורות,
-webkit-line-clamp: 2) - מחיר (נוכחי + קו חוצה אם יש הנחה + תג אחוז)
- דירוג (כוכבים + מספר ביקורות)
- זמינות (במלאי / בהזמנה / אזל)
- כפתור קריאה לפעולה (הוסף לסל / בסל / בחר וריאנט)
תוספות: תגים (חדש, חם, מבצע), אייקון רשימת מועדפים, תצוגה מהירה.
עיצוב פילטרים: פרטי UX
תיבות סימון לעומת תגים. השתמשו בתיבות סימון ל-3–8 אפשרויות. לצבעים, השתמשו בדוגמיות חזותיות. ל-10+ אפשרויות, הוסיפו שדה חיפוש.
טווח מחיר. סליידר כפול עם שדות קלט. היסטוגרמה המציגה את התפלגות המוצרים על הסליידר מוסיפה הקשר (דפוס מאמזון, ASOS).
החלת פילטרים. שתי גישות:
| גישה | מתי להשתמש | מאפיינים |
|---|---|---|
| מיידית | קטלוגים קטנים, API מהיר | מוחל בלחיצה, מעדכן את הרשימה מיד |
| מושהית | API איטי, מכשירים ניידים | כפתור "החל", מונע בקשות מיותרות |
פילטרים פעילים מופיעים ככדורי תג מעל התוצאות עם צלב להסרת כל אחד, בתוספת כפתור "נקה הכל".
מצבי ריק ומקרי קצה
אפס תוצאות סינון — לא עמוד 404 אלא מסך ייעודי עם איור, הסבר, כפתור "נקה פילטרים" והצעות לקטגוריות דומות. קטלוג עם מוצר יחיד צריך להפנות לעמוד המוצר במקום להציג רשימה של פריט אחד.
טעינת שלד לתחושת ביצועים
בעת עדכון הקטלוג באמצעות AJAX (החלת פילטרים, שינוי עמודים), השתמשו במקומות שמורים בצורת שלד במקום ספינר:
.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
- כל עמוד פילטר עם סט פרמטרים ייחודי חייב לכלול קישור קנוני לעמוד הקטגוריה הראשית.
- H1 צריך להשתנות עם בחירת קטגוריה: "מחשבים ניידים", לא "קטלוג".
- טקסט למספרי תוצאות: "142 מחשבים ניידים במלאי".
- נתונים מובנים:
.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; } }עם 10 המוצרים הראשונים.
ביצועים
תמונות הן הצוואר בקבוק העיקרי. המלצות:
- WebP + AVIF עם גיבוי JPEG באמצעות
ItemList - טעינה עצלה לכרטיסים מתחת לקו הראייה, טעינה מיידית ל-4–8 הראשונים
- מידות תמונה: 400×400 לרשימות (אל תטעינו 1200×1200)
-
<picture>על המכולה כדי למנוע CLS
מה כלול ולוחות זמנים
אתם מקבלים:
- אבות טיפוס לכל המסכים (דסקטופ, טאבלט, מובייל)
- ערכת UI לרכיבי קטלוג
- אב טיפוס פילטרים עם כל המצבים
- מדריך הטמעה למפתחים
- קבצי Figma מקוריים
לוחות זמנים: עיצוב לסוג מוצר אחד, נקודת שבירה אחת, ללא פילטרים: 2–3 ימים. עיצוב מלא עם התאמה, פילטרים מורכבים ומצבים: 5–8 ימים. עיצוב + מערכת רכיבים + מסירה: 1.5–2 שבועות. התמחור מחושב באופן אישי.
הניסיון שלנו
למעלה מ-50 פרויקטים מוצלחים, צוות מומחי UX מוסמכים. קטלוג עם UX מחושב גורם למשתמשים לרכוש פי 2 מהר יותר. הזמינו עיצוב קטלוג שמגדיל מכירות. צרו קשר כדי לדון בפרויקט שלכם.
העיצובים שלנו חוסכים בממוצע 20% מהתקציב על תיקונים.