עיצוב עמוד קטלוג מוצרים

מדוע עיצוב קטלוג המוצרים מאבד קונים

הקטלוג הוא המקום שבו נקבע גורל ההזמנה, ולרוב הקונה עוזב לא בגלל המחיר, אלא בגלל הממשק. כרטיס מוצר עמוס במאפיינים משניים מבלבל: האדם מחפש דגם ותאימות, אך מקבל קיר של טקסט ואייקונים קטנים.

בסופו של דבר הוא אינו מוצא תשובה לשאלתו בתוך 10-15 שניות וחוזר לחיפוש — אל המתחרה, שאצלו אותו פריט מתואר בצורה ברורה יותר.

סינון מוצרים חלש פוגע בהמרות של הקטלוג לא פחות. אם לא ניתן לשלב פרמטרים, והערכים הנבחרים מתאפסים במעבר בין עמודים, הקונה עם שאילתה ספציפית просто לא יגיע לפריט הרצוי.

בעיה נפרדת היא מסננים שאינם משקפים את המלאי האמיתי: קטגוריות ריקות ותוצאות אפס לאחר שתיים-שלוש הבהרות הורגות את האמון בקטלוג מהר יותר מטעינה איטית.

תוצאות איטיות — הסיבה השלישית השכיחה לנטישה בקטלוג. כאשר רשימת המוצרים נטענת בקפיצות, התמונות קופצות, והמיון והעימוד מציירים מחדש את העמוד כולו, חלק מהמבקרים עוזבים מבלי להמתין לתוצאה.

רגישים לכך במיוחד תרחישים עם מספר רב של פריטים ותעבורה ניידת, שבה כל שנייה מיותרת של המתנה מפחיתה באופן ניכר את עומק הצפייה.

הטעות הרביעית — היעדר נקודות ציון ברורות: מחירים, זמינות, זמני אספקה ואפשרות להשוות פריטים. הקונה לא אמור להרכיב את התמונה הזו מבלוקים שונים.

כאשר הפרמטרים המרכזיים מוצגים בכרטיס וברשימה, והמסננים מובילים לתוצאה בשניים-שלושה צעדים, ההמרה של הקטלוג עולה מבלי לשנות את המלאי ואת תקציב הפרסום — רק בזכות העובדה שהאדם מוצא את הנדרש מהר יותר.

מה נותן עיצוב מוקפד של קטלוג מוצרים

עומק הצפייה גדל בזכות הקישוריות בין הכרטיסים

הקטלוג מפסיק להיות רשימה שטוחה: לכל כרטיס מופיעים קישורים משמעותיים — פריטים נלווים, מקבילים בקטגוריית מחיר אחרת, מתכלים. המשתמש לא חוזר לחיפוש, אלא הולך לאורך השרשרת, ועומק הצפייה גדל מ-2-3 עמודים ל-6-8 לסשן. זה לא קוסמטיקה: ככל שאדם פתח יותר כרטיסים רלוונטיים, כך עולה הסבירות שהוא מצא בדיוק את מה שחיפש.

הזמן עד לפעולה המבוקשת מתקצר

מסננים שמשקפים פרמטרים אמיתיים של בחירה, ולא "מחיר/מותג" מופשטים, מסירים את הסינון הידני. המשתמש מצמצם את התוצאות ב-2-3 קליקים במקום עשרה גלילות, ותרחישי בחירה שמורים מחזירים אותו מיד למבחר הרצוי.

כתוצאה מכך, הדרך מכניסה לקטלוג ועד הוספה לסל או שליחת בקשה מתקצרת, ושיעור הסשנים שבהם הפעולה המבוקשת כלל לא התרחשה יורד.

החזרות בגלל בחירה שגויה פוחתות

רוב ההחזרות הן תוצאה של פער בין הציפייה למוצר. כאשר הכרטיס מציג ביושר את הווריאציות, התאימות והמגבלות, וההשוואה מציגה את ההבדלים זה לצד זה, הקונה בוחר במודע. שיעור ההחזרות מסיבת "לא מתאים" יורד באופן ניכר, ואיתו נעלמים העלויות של לוגיסטיקה הפוכה ועיבוד חוזר.

מדדי התנהגות הופכים לניתנים לניהול

אנחנו מטמיעים סימון אירועים ברמת הכרטיסים, המסננים ובלוקי ההשוואה, ולכן רואים היכן בדיוק המשתמשים עוצרים ועוזבים. זה מאפשר לשנות את הקטלוג לפי נתונים, ולא לפי טעם: שינויים במסננים או בסדר התוצאות נבדקים על התנהגות אמיתית ומעוגנים אם המדד השתפר.

פורמטים להצגת קטלוג: השוואת גישות

פורמט הקטלוג קובע לא את המראה החיצוני, אלא כיצד המבקר מוצא את המוצר וכיצד הדף מתנהג תחת עומס. להלן — אפשרויות עבודה שבהן באמת בוחרים בתחילת הפרויקט, עם תנאי היישום והמגבלות שלהן.

את הבחירה קובעים לפני הבנייה: שינוי הפריסה לאחר ההשקה גורר אחריו בנייה מחדש של המסננים, העימוד והמטמון.

קטלוג היברידי בדרך כלל מנצח במקום שבו המבחר אינו אחיד: את המתג «רשת / רשימה» שומרים בכתובת הדף, כדי שהמצב ישרוד רענון ושיתוף קישור. פיד אינסופי ניקח רק בטעינה לפי דרישה — אחרת במכשירים חלשים גדל צריכת הזיכרון, והפריטים בתחתית התפוקה נשארים בלתי נגישים למנועי חיפוש.

ניווט לפי עמודים נשאר הבסיס לקטלוגים עם מסננים: הוא נשמר במטמון באופן צפוי, אינו קורע את היסטוריית הדפדפן ונותן כתובות יציבות לכל עמוד בתפוקה. נשלב אותו עם פיד לעיתים רחוקות ובמודע — למשל, פיד בתוך קטגוריה, עמודים ברמת האוספים.

כיצד אנו מתכננים ומיישמים עיצוב קטלוג

התהליך בנוי כך שכל החלטה נשענת על נתונים על התנהגות הקונים, ולא על העדפות טעם. אנו מתחילים בסקירת הקטלוג: בוחנים את מפת המעברים, שיעור הנטישה במסננים, עומק הצפייה בכרטיסים, מפות חום והקלטות הפעלות. בשלב זה ניכר היכן בדיוק הולכים לאיבוד אנשים — בעמודים, במסנן הפאסטים או בחזרה מהכרטיס לרשימה.

1. סקירת הקטלוג. מאחדים אנליטיקה, שאילתות חיפוש בתוך האתר ופניות לתמיכה לתמונה אחת. מתעדים צווארי בקבוק: תוצאות לא רלוונטיות, שילובי מסננים ללא מוצא, היעדר מיון לפי המאפיין הנדרש.
2. תכנון המבנה. מרכיבים עץ קטגוריות וסט מאפיינים שלפיהם באמת מחפשים מוצר. קובעים מה מוציאים למסננים, מה למיון, ומה מציגים ישירות באריח — מחיר, זמינות, פרמטר מרכזי.
3. סקיצות עיצוב. משרטטים את הרשימה, הכרטיס, מצבי המסננים ותוצאות ריקות. בנפרד מעבדים את התרחיש הנייד: שם הקטלוג מתנהג אחרת, וההתאמה אינה עותק מוקטן של הדסקטופ.
4. בניית הקטלוג. מרכיבים רכיבים כך שהאריח, המסנן והעמודים יעברו שימוש חוזר בכל הקטגוריות. הסימון נשאר קריא למנועי חיפוש, וטעינת המוצרים אינה שוברת את הניווט ואת כפתור «חזרה».
5. בדיקת תרחישים. מריצים מסלולי קונה אמיתיים: בחירה לפי פרמטרים, השוואה, חזרה לתוצאות, חיפוש עם שגיאת הקלדה. בודקים על משתמשים חיים ומתקנים את מה שמפריע להגיע לכרטיס.
6. מסירה ותמיכה. מוסרים סקיצות, רכיבים וכללי מילוי, כדי שמוצרים וקטגוריות חדשים יתווספו בלי לשנות את המבנה.

סדר זה מבטל עיבודים מחדש בשלבים מאוחרים: המבנה והתרחישים מתואמים לפני הבנייה, ולא אחריה. תארו את הקטלוג שלכם — נחזור עם הערכה ותוכנית עבודה.

מדיניות תצוגה וכללי סינון

כללי תצוגה וסינון הם שכבת הלוגיקה שבין הקטלוג לרוכש. הם קובעים מה האדם יראה ראשון, מה יישאר מחוץ לתוצאות החיפוש וכיצד יתנהגו המסננים כאשר תנאים מצטלבים. ללא כללים מפורשים הקטלוג מתמלא "איך שיצא": סחורה לא נמכרת צפה למעלה, ופריטים רלוונטיים הולכים לאיבוד בעמוד השלישי.

עדיפויות וסדר התוצאות

עדיפות נקבעת לא ידנית לפי כל כרטיס, אלא באמצעות מערכת תנאים: מלאי במחסן, שולי רווח של הקבוצה, טריות האספקה, שלמות מילוי המאפיינים. הכללים מסודרים בשרשרת — תחילה מסוננים פריטים עם יתרה אפסית, לאחר מכן בתוך הנותרים פועל משקל לפי מאפיינים. מיון לפי מחיר ופופולריות נשאר בשליטה: הרוכש רואה סדר צפוי, ולא מדגם אקראי.

הסתרת פריטים ולוגיקת מסננים

הסתרה היא מנגנון נפרד, ולא מחיקה מהמסד. הפריט יוצא מהתוצאות לפי סטטוס (הופסק ייצור, אינו זמין באזור, אינו עומד בתנאי אספקה), אך שומר על קשרים עם היסטוריית הזמנות וניתוח נתונים.

המסננים בנויים על מודל פאסטות: כל מאפיין יודע כמה מוצרים יישארו בעת בחירתו, ולכן שילובים ריקים אינם מוצגים. הצטלבות מסננים ומיון מתוארת בכללים מפורשים — כך התוצאות לא "נשברות" בעת הוספת מאפיין חדש.

אנו מגדירים זאת ברמת תצורת הקטלוג, ללא שכתוב קוד בכל שינוי במלאי. עובדים על סטק מקצועי — הכללים נשארים יציבים עם גידול במספר הפריטים והקטגוריות.

מה הלקוח מקבל לאחר ההטמעה

לאחר ההטמעה נשאר לצוות הלקוח לא "תמונה ב-Figma", אלא ערכה עובדת שלפיה ניתן לפתח את הקטלוג בלעדינו. כל ארטיפקט מכסה שלב משלו: מתיאום המבנה ועד מסירה לפיתוח ומילוי בתוכן.

• אב-טיפוס אינטראקטיבי של הקטלוג — תרשים לחיץ של הרשימה, המסננים, הכרטיס והעימוד. עליו בודקים את התרחישים "מצאתי → השוויתי → הוספתי", לפני שנכתבת שורת הקוד הראשונה.
• עיצובי מסכים לכל המצבים — לא רק העמוד ה"מושלם", אלא גם תוצאה ריקה של סינון, שם ארוך, מוצר ללא תמונה, שגיאת טעינה. זה מסיר מחצית מהתיקונים בשלב הקבלה.
• מפרטים לפיתוח — גריד, מרווחים, התנהגות המסננים, כללי המיון והאדפטיב למובייל ולדסקטופ. הבנייה מתבצעת לפי המסמך, ולא לפי ניחושים.
• מדריך למילוי תוכן — כמה תווים בכותרת הכרטיס, כיצד להכין תמונות, אילו שדות הם חובה. מנהל התוכן ממלא את הקטלוג ללא מעורבות המעצב.
• צ'ק-ליסטים לבדיקה — רשימות קבלה לפי מצבים, אדפטיב ונגישות. לפיהם מתקבלת כל גרסה, ולא "לפי העין".
• ספריית קומפוננטות — כרטיס, מסנן, פירורי לחם, בלוק המלצות בסגנון אחיד. מדורים חדשים נבנים מבלוקים מוכנים.
• תרשים מסירה ותיקונים — היכן נמצאים קבצי המקור, כיצד לבצע שינויים ומה נחשב למשימה חדשה. הצוות לא מאבד הקשר בעת החלפת מבצע.

הערכה מיועדת לכך שהקטלוג יגדל: מתווספים קטגוריות, מוצרים, מבצעים — המבנה והכללים עומדים בכך. תארו את המשימה — נחזור עם הערכה ותוכנית עבודה.

במה שונה קטלוג למרקטפלייס מקטלוג של מותג?

ההבדל מתחיל במי שמנהל את המגוון. במרקטפלייס את הקטלוג אוספים עשרות מוכרים: כרטיסים מגיעים ממקורות שונים, מאפיינים מלאים בצורה לא אחידה, חלק מהפריטים משוכפלים תחת שמות שונים. קטלוג של מותג הוא מערכת סגורה, שבה את הנומנקלטורה שולטת צוות אחד, ואת כל הכרטיסים אפשר להביא לתקן אחיד.

לכן תכנון קטלוג למרקטפלייס הוא בראש ובראשונה עבודה עם נתונים הטרוגניים והנרמול שלהם, ואילו עבור מותג — בניית היררכיה קפדנית וכללים אחידים לתיאור.

ההבדל השני — תרחיש החיפוש. במרקטפלייס המשתמש מגיע לרוב עם שאילתה ספציפית ומשווה הצעות של מוכרים שונים: חשובים לו מסננים לפי מחיר, זמינות, דירוג, זמני אספקה ומעבר מהיר בין מוצרים דומים.

בקטלוג של מותג האדם בוחן את הקו: הוא זקוק לקטגוריות ברורות, להשוואה בין דגמים ובלוגיקה של "מהכללי אל הפרטי". מכאן מבנה שונה של מסננים ומשקל שונה למיון.

השלישי — עומס והיקף. מרקטפלייס פועל עם מאות אלפי פריטים, ואת הקטלוג מתכננים כך שהתוצאות, המסננים והפאסטים יישארו מהירים בכל גודל של מגוון. קטלוג של מותג בדרך כלל קטן פי כמה, וכאן סדר העדיפויות מוסט לכיוון ההגשה החזותית: תמונות איכותיות, כרטיסים אחידים, דגש על חידושים וקולקציות.

הרביעי — כללי המודרציה ומחזור החיים של הכרטיס. במרקטפלייס יש צורך בתרחישי פרסום, בדיקה, דחייה והגשה חוזרת של מוצר, וכן בטיפול בכרטיסים שהמוכר הסיר מהמכירה. בקטלוג של מותג תרחישים כאלה אינם קיימים, אך חשובים ניהול גרסאות של תיאורים וסנכרון עם מערכת החשבונאות.

בפועל, תכנון קטלוג למרקטפלייס ולמותג הוא שני סטים שונים של החלטות: לפי מודל הנתונים, לפי המסננים, לפי ביצועי התוצאות ולפי הניהול. אנחנו מתחילים בכך איזה מתרחישים אלה הוא שלכם, ועבורו מרכיבים את מבנה הקטלוג, כך שיעמוד בצמיחת המגוון בלי לעשות מחדש.

מקרה בוחן: כיצד עיצוב הקטלוג הגדיל את ההמרה

הפרויקט — קטלוג של חומרי בניין עם כמה אלפי פריטים ופילטרים לפי מאפיינים. עמוד הקטלוג המקורי הציג מוצרים באריחים ללא קיבוץ: המשתמש הגיע אליו מחיפוש, ראה עשרות כרטיסים לא קשורים ועזב מבלי להגיע לקטגוריה הרצויה. שיעור הנטישה בעמוד הקטלוג עמד על כ-68%, ושיעור הסשנים עם הוספה לסל לא עלה מעל 4%.

מה שינו

ניתחנו את ההתנהגות באמצעות מפות חום והקלטות סשנים: אנשים חיפשו קבוצת מוצרים מסוימת, אך הממשק אילץ אותם לגלול דרך הכול. ארגנו מחדש את המבנה — הקטגוריות הועלו לרמה העליונה עם היררכיה פנימית, והפילטרים לפי מאפיינים מרכזיים הועברו לעמודה השמאלית תוך שמירת הערכים הנבחרים בשורת הכתובת.

כרטיס המוצר עובד מחדש: מחיר, זמינות וכפתור הוספה לסל נראים ללא מעבר, והשוואת מאפיינים זמינה ישירות מהרשימה.

בנפרד טופלו המצבים: לתוצאה ריקה של פילטרים נוספו רמזים להסרת תנאים מיותרים, וטעינה מתמשכת של העמוד הבא החליפה את הניווט העמוד-אחר-עמוד.

מדדים לפני ואחרי

הגידול בהוספות לסל נבע לא מעיצוב מחדש לשם עיצוב מחדש, אלא מהסרת שלבים מיותרים בין בחירת המוצר לפעולה. את הפרויקט הוביל שם הפרויקט — הצוות עבד לפי ניתוח הנתונים שלנו והשערות שנבדקו על תנועה אמיתית.

ספקות טכניים נפוצים

קטלוג הוא החלק העמוס ביותר בחנות מקוונת: מסננים, מיון, עימוד וטעינת כרטיסים פוגעים באותה רשימת מוצרים, וכאן בדיוק עולים לרוב שאלות של תאימות וביצועים. להלן ניתוח של הספקות הטכניים שמתעוררים בדרך כלל אצל המזמין לפני תחילת העבודה.

כיצד הקטלוג ישתלב עם מערכת החשבונאות והמלאי שלנו?

האינטגרציה נבנית באמצעות חילופי נתונים ב-API: יתרות, מחירים וסטטוסים של מוצרים נמשכים ממערכת החשבונאות, ושינויים באתר נשלחים בחזרה.

אם אין מחבר מוכן, אנו כותבים שכבת חילופין עם תור וניסיונות חוזרים — כאשר המלאי אינו זמין, הקטלוג ממשיך לעבוד על הנתונים התקינים האחרונים, ולא מציג כרטיסים ריקים.

מה עם התמיכה לאחר ההשקה?

הקטלוג חי: המגוון משתנה, מתווספים מסננים, ומתעדכנת התגיות למנועי חיפוש. אנו מעבירים לצוות תיעוד על המבנה, הגדרות האינדוקס ותקנון הפרסום, ומכאן ואילך מלווים לפי רמת תמיכה מוסכמת — מתגובה לאירועים ועד שיפורים מתוכננים. בנפרד אנו מתעדים כיצד להחזיר גרסת קטלוג כושלת ללא השבתת החנות.

האם ניתן לשפר קטלוג קיים, ולא לבנות מחדש?

כן, אם הפלטפורמה הנוכחית מאפשרת זאת. תחילה אנו מנתחים את צווארי הבקבוק: היכן אובדת המהירות, אילו מסננים שוברים את השליפה, וכיצד בנוי הקשר עם מערכת החשבונאות. חלק מהמשימות נסגרות נקודתית — עיבוד מחדש של הרשימה והאינדקס, וחלק דורשות הרכבה מחדש של שכבת הקטלוג. את ההחלטה מקבלים לפי מדידות, ולא לפי העיקרון של "לשכתב הכול".

תארו את המשימה שלכם — נחזור עם הערכה ותוכנית עבודה לקטלוג.

נדון במשימה ונציע פתרון

כדי שעיצוב קטלוג המוצרים יפתור את משימת המכירות, ולא רק "ייראה מודרני", אנו מתחילים בניתוח: אילו קטגוריות ומסננים קריטיים עבור המגוון שלכם, כיצד הקונה מחפש מוצר, והיכן כיום אובדת ההמרה. תארו את המשימה — נחזור עם הערכה ותוכנית.

• ננתח את הקטלוג הנוכחי: מבנה הקטגוריות, תרחישי חיפוש וסינון, התנהגות קונים בעמודים המרכזיים.
• ננסח אילו מדדים צריכים להשתנות: עומק צפייה, הוספות לסל, שיעור נטישה בכרטיסי מוצר.
• נציע מבנה קטלוג: לוגיקת קטגוריות, מערך מסננים ומיון בהתאמה למגוון שלכם.
• נכין אבות טיפוס לרשימה ולכרטיס מוצר — ממסך נייד ועד מסך רחב.
• נגבש סגנון ויזואלי: רשת, טיפוגרפיה, מצבי מסננים, התנהגות בתוצאה ריקה.
• נעביר קבצי עיצוב עם תיאור מצבים וכללים לפיתוח.
• נתאם שלבים, לוחות זמנים ונקודות בקרה לפני תחילת העבודה.

בהמשך נעבוד באיטרציות: נציג אפשרויות ביניים, נאסוף משוב ונקבע החלטות, כך שבסיום יתקבל קטלוג שקל לתחזק ולפתח. תארו את המשימה שלכם — נחזור עם הערכה, תוכנית עבודה והצעה לתחילת שיתוף הפעולה.