ניווט משתמש באתר מסחרי גדול אינו דבר פשוט. מנגנון התפריטים הנהוג באתר קטן אינו ישים ואפילו מכשיל. למרות כמות המוצרים הגדולה אנו חייבים לאפשר איתור מהיר של המוצרים והתמצאות קלה. במאמר הבא אנסה להגדיר את הבעיה הקיימת באתרים גדולים ומהם הפתרונות המועדפים.
ברשת כיום נהוגים שני עזרי ניווט עיקריים: תפריטי צד ו breadcrumbs. עזרים אלה טובים מאד לאתר היררכי אך בעיתיים באתר מסחרי המציג מוצרים רבים. אתמקד תחילה בהבדל בין "פירורי לחם" לתפריט צד. באופן עקרוני, שניהם מראים לגולש את מיקומו בהיררכיית האתר. היתרון של תפריט צד ברור.
נתיב breadcrumbs מציג רק היררכיה:
אב -> בן 2 -> נכד 2.
לעומתו תפריט צד יציג
אב
בן 1
בן 2
נכד 1
נכד 2
נכד 3
בן 3
במידה ויש לנו אפשרות להציג תפריט צד, מצב זה יהיה עדיף תמיד על breadcrumbs, השיקול פשוט - יותר מידע ובצורה קריאה יותר.
מה הבעיה?
הבעיה העיקרית שלנו נוצרת כאשר דפי מוצרים ממוינים במספר קטגוריות וניתן להגיע אליהם ביותר מאשר דרך אחת. לדוגמה:
ספרים -> סופרים -> ג' ק' רולינגס -> הארי פוטר ואוצרות המוות
ספרים -> ספרות ילדים -> הארי פוטר ואוצרות המוות
ספרים -> רבי מכר -> סדרות -> הארי פוטר ואוצרות המוות
תוכלו לראות לדוגמה את דף המוצר הזה באמזון. שימו לב שאמזון הורידה בכלל את אפשרויות הניווט ההיררכיות הרגילות מהדף. למעשה אם תרצו למצוא משהו שדומה לפירורי לחם תצטרכו לגלול למטה עד לפרטי המוצר ושם... לגלות שישנם הרבה יותר מנתיב אחד, אמזון מציגים את שלושת הנתיבים הפופולארים יותר.
טווח הפתרונות
מוצרים באתר מסחרי מסודרים על פי קטגוריות ולא על פי היררכיה. אנחנו נדרשים להחליט עבור הגולש מה להציג. האפשרויות באופן כללי הן:
תצוגת נתיב (Cookie) - דינמי
למעשה אנחנו שומרים בקוקיה (חידוש לשוני שלי) את המסלול שעשה הגולש. הוא בחר :מוצרי חשמל -> מקררים -> אמקור TTT.
יתרון - מאפשר לגולש לחזור בקלות שני צעדים אחורה.
חסרונות - מה עושים עם גולש שהגיע ישירות מגוגל לדף זה ואין לו בכלל קוקיה?
תצוגת מיקום (Location) - סטטי
אנחנו קובעים לכל דף את מיקומו בהיררכיה. "אמקור TTT" יושב בוודאות מתחת ל "מקררים".
יתרון - אינו תלוי בגולש, תמיד יש מקום מוגדר לדף.
חסרון - ואם הגולש הגיע דרך "מוצרי חשמל -> מבצעים -> אמקור TTT" ?
סוג זה של תצוגת מיקום הינו אידאלי לאתרים קטנים וסטטים. ישנם גם אתרים גדולים המשתמשים בשיטה זו וכך גם אם הגעת לדף בנתיב שונה, תמיד יוצג לך הנתיב הסטטי של הדף. לדוגמה שימו לב לכיתוב :You Are Here שבנתיב לדף זה.
תצוגת קטגוריות (Meta) - דינמי
במקום להציג את נתיב הדף אנו מציגים את הקטגוריות להם הוא משוייך. אמזון למשל עוד עושה הרבה יותר מכך כשהיא מאפשרת לגולשים לקבוע לאילו קטגוריות יש לשייך את הדף.
תצוגה קדמית (Forward) - דינמית
תצוגה קדמית היא נסיון לנחש לאן ירצה הגולש ללכת מכאן. כאשר האתר היררכי, האפשרויות לניווט ברורות אך כאשר החיתוכים הם על פי קטגוריות הרי שהגולש יכול בכל נקודה לבחור חיתוך שונה שיצמצם את המידע הלאה. תצוגה קדמית אפשרית גם ב breadcrumbs אך לעיתים קלה יותר ומובנת יותר בתפריט צד. דוגמה לתצוגה קדמית תוכלו לראות באמזון כאן בתפריט צד, או בזאפ בתיבה כזו:
יש לשים לב שבכל מקרה האתר כבר מציג תוצאות חיפוש על פי החיתוכים שיש לו עד לנקודה זו.
המלצות
באופן אישי אני חושב שעדיף להחזיק את הנתיב בתפריט צד ולא ב breadcrumbs. יתרונות תפריט הצד הוא בתצוגה הגדולה יותר, באפשרות להציג בקלות ובצורה ברורה ואינטואיטיבית את המידע. על פי מחקר קטן ברשת תוכלו לראות שבאתרים המודרניים דף המוצר עצמו אינו מדגיש את תפריט הניווט והדרך בה הגענו אליו. כולם סומכים על הגולש שידע לבצע Back לבד, בלי עזרה.
בדפי מוצר עדיף להתשתמש בתצוגת מיקום (you are here) ותצוגת קטגוריות (meta).
בדרך אל המוצר כדאית תצוגת נתיב (Cookie) משולבת עם תצוגה קדמית(Forward). התצוגה תכלול גם את התוצאות בחיתוך הנוכחי וגם תציע לגולש אפשרויות חיתוך נוספות, כלומר ניווט קל קדימה ואחורה.
תעשו כיף ואתרים יפים.
