הדרך הטובה ביותר לניווט בין מוצרים באתרי מסחר אלקטרוני

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

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

יש שלוש שיטות עיקריות בהן ניתן לעשות את זה:

1.חלוקה לעמודים (Pagination)

2.כפתור שטוען כפתורים נוספים בזמן אמת מהשרת

3.גלילה “אינסופית” בסגנון הפיד בפיסבוק (למרות שכאן לגלילה יש למעשה סוף, אלא אם כן רוצים להציג שוב את אותם מוצרים…).

אילו מן השיטות היא הטובה ביותר עבור המשתמשים? על השאלה הזו בדיוק ניסו לענות ב-Baymard Institute כאשר הם בדקו יותר מחמישים אתרים שונים וביצעו מבחני שמישות לאורך מספר שנים.

הממצאים העיקרים

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

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

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

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

כך למשל זה נראה באתר האמריקאי של American Eagle:

מסחר אלקטרוני

הערה טכנית – מכיוון שכל טעינה של מוצרים בזמן אמת דרך הכפתור אינה משנה את כתובת העמוד הנוכחי, לחיצה על כפתור “חזרה” בדפדפן תקפיץ את הגולש לדף הקודם שבו היה לפני הצפייה במוצרים ולא לרשימת המוצרים הקודמת. הדרך להתגבר על כך היא לשנות את כתובת העמוד בכל פעם שהכפתור נלחץ. ניתן לעשות זאת באמצעות API ב – HTML5  בשם histoy.pushState(). עם זאת, יש לוודא שהדפדפן אכן לוחץ על הכפתורים באופן אוטומטי ומחזיר את הגולש למיקום הקודם שלו בדף.

איך ליישם כל שיטה באופן הטוב ביותר?

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

בחלק הזה נציג את השילובים המומלצים ביותר.

כפתור “טען עוד” וגלילה אינסופית לקטגוריות

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

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

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

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

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

כפתור “טען עוד” לחיפושים

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

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

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

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

כפתור “טען עוד” למובייל

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

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

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

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

סיכום

  • עבור קטגוריות ראשיות, רצוי להשתמש בשילוב של כפתור “טען עוד” וגלילה אינסופית עם 50 עד 100 מוצרים בכל טעינה.
  • עבור תוצאות חיפוש, הכי טוב להשתמש בכפתור טעינה מחדש, כאשר מספר המוצרים בכל טעינה נקבע לפי השינוי ברמת הרלוונטיות בין המוצרים השונים.
  • במכשירים ניידים יש להשתמש בכפתור “טען עוד” עם כמות מוצרים קטנה יותר של עד 30 מוצרים בכל טעינה. כמו כן, הכי קל לטעון באופן מלא את כל המוצרים כבר לאחר הלחיצה.