שובל פירורים (Breadcrumbs)
רוני אורבך. עדכון אחרון: 16/6/2010
הבעיה: המשתמש צריך לדעת איפה הוא נמצא ביחס למבנה ההיררכי של המערכת, ולגשת לרמות הגבוהות או למסכים הקודמים בהם ביקר.
הפתרון: הצגת שורה של קישורים שמציגה את הרמות שמעל הדף הנוכחי.
שובל פירורים לדוגמה מתוך ynet
בהשראת עמי ותמי, "פירורי הלחם" יסייעו לגולש לחזור על עקבותיו לרמות גבוהות יותר במבנה האתר. עם זאת, שים לב שהשימוש הנפוץ ביותר לשובל פירורים הינו להצגת מבנה היררכית התכנים במערכת ולא היסטוריה, כך שהשם עלול לבלבל.
דפוס עיצוב זה מאוד נפוץ ומוכר למשתמשים גם מחווית השימוש ב-PC וגם משורת הכתובת בדפדפן – בשני המקרים מופיע סימן של חץ או לוכסן בין הרמות.
שימוש:
- באזורים באתר בעלי היררכיה מסודרת, לדוגמה קטגוריות וקטגוריות-משנה של מוצרים באתר מסחר, או חלוקה לנושאים באתר חדשות. הדפוס מתאים לרוב סוגי האתרים שמארגנים תוכן במבנה היררכי.
- שובל הפירורים איננו אמצעי הניווט הראשי של האתר.
- אין משמעות לשימוש בשובל הפירורים ברמה הראשית ביותר של ההיררכיה (אם כי לעיתים מציגים אותו גם שם, מטעמי עקביות)
שובל פירורים לדוגמה מתוך nrg מעריב
יישום נכון:
- המוסכמה המקובלת היא להציג את שובל פירורי הלחם בחלק העליון של העיצוב, אך מתחת לסמל האתר והניווט הראשי. הקישורים השורה, בהתאם לכיוון הקריאה.
- ההפרדה בין הקישורים צריכה להיעשות באמצעות סימון מקובל להיררכיה, כמו הסימן 'גדול מ-' >, הסימן הכפול », ולפעמים נקודתיים : או לוכסן /.
יש להימנע ממקפים, קווים אנכיים ושימוש בריווח בלבד, שעלולים לבלבל את הגולש ולהקשות על זיהוי מהיר של שובל הפירורים. - הדף או הרמה הנוכחיים בשובל הפירורים לא צריכים להוות קישור, בכדי להימנע מקישור חסר משמעות.
- מומלץ שלא להשתמש בשובל הפירורים כתחליף לכותרת הדף.
- הסימן המפריד לא צריך לשמש כקישור.
- רצוי שתווית שמוצגת בשובל הפירורים תהיה זהה לכותרת הדף המקושר.
גיור:
- כיוון הקריאה בעברית הינו מימין לשמאל. בהתאם, שובל פירורים בעברית צריך להיות מוצג מימין לשמאל (ולא משמאל לימין, כמו באנגלית).
- בתרגום עיצוב חשוב לשים לב להפיכת הסימנים, ולהיזהר מתוצאות כגון דף הבית < ספורט < כדורגל
שובל פירורים ב-dmoz.org - שימו לב לבחירה בשובל פירורים חריג של שתי שורות על מנת להקל על הקריאה של שתי השפות.
לקריאה נוספת:
- מאמר של ג'ייקוב נילסן – Breadcrumb Navigation Increasingly Useful
- תוצאות מחקר על שימוש ב-Breadcrumbs מאוניברסיטת Wichita
- Breadcrumbs In Web Design: Examples And Best Practices מתוך Smashing Magazine
- מוצרים, תפריטים ושביל קליפות התפוזים – מאמר מאת יובל כרמי, מדריך הטרמפיסט לאינטרנט
- Breadcrumbs בספריית דפוסי העיצוב של Yahoo.
- Breadcrumbs בספריית UI-Patterns
היי בוקר אור, נחמד מאוד ומעניין. אני באופן אישי חושב שהדגש על הקישור נו פולואו בברד קרמבס, הוא יותר מדי לשים לב לפרטים, אבל סך הכל מעניין ונכון. תודה רבה.
מרטין, תודה. למרות שיש צדדים מעניינים וחשובים של SEO לכל דפוס עיצוב כמעט, אני לא חושב שזה נושא שנכסה באתר. התכוונתי שלא לקשר לדף הנוכחי כדי לא לבלבל את המשתמש. צריך לחשוב לפני ששמים קישורים שמפנים לעצמם.
כאשר מיישמים 'שובל פירורים' הרמות הבאות מתפקדות כקישורים.
ברצוני לשאול כיצד נכון להתנהג עם ה – underline – האם להציגו תמיד או רק ב – hover (כפי שמיושם כאן באתר)?
תודה!
היי אברהם, אתה מתכוון בקישורים? כי בטח מובן לך שאין לזה ממש משמעות, העיקר שזה בצבע תכלת.
מרטין תודה. כן, אני מתכוון לקישורים שנוצרים לדפים הקודמים (בשובל),
הסתפקתי:
האם יש משמעות לתת קו תחתי תמיד או רק במעבר עכבר?
(אולי הספק שלי תקף ככלל למושג הקישורים בווב).
תודה.
היי אברהם, אין לזה משמעות, איך שנוח ללך, מה שחשוב זה הצבע התכלת, שהוא הסימן העולמי לקישור
תודה!!
מרטין – נושא הקישורים קצת יותר מורכב מזה.
בימים הקרובים אכתוב הצעה לדפוס עיצוב על נושא זה.
מרטין, אברהם,
תכלת/כחול הם צבעים טובים כדי לציין קישור, אבל הם לא היחידים (למשל, קישור שביקרת בו יהיה סגול בברירת המחדל – אינדיקציה חשובה). העיקר הוא שהקישור יהיה בצבע שונה מהסביבה שלו, ורצוי שלא יהיה שחור.
לקו תחתון יש משמעות רבה. חד וחלק, כשיש קו תחתון יותר אנשים יבינו שזה קישור, זה משהו מאוד בסיסי ברשת. זה נחוץ במיוחד אם מדובר בצבע קישור שהוא לא הסטנדרטי, או אם הקישור נמצא בסביבה שדומה לקישור עצמו, למשל אם הטקסט מסביב בצבעים דומים (או שעבור עוורי צבעים, למשל, הם נראים דומים).
רן, מחכה לקרוא
ברק – עד שרן ירחיב בדבריו, שאלה לי אליך,
למה כאן באתר בשובל שבראש העמוד לא הצבת קו תחתי בקישורים? (רק במעבר עכבר מופיע קו תחתי).
ההערה שלי מקודם לגבי קו תחתון היתה לגבי קישורים באופן כללי.
באופן ספציפי, שובל פירורים הוא דפוס עיצוב מוכר וידוע למשתמשים רבים, ולכן השימוש בקו תחתון בו הוא פחות קריטי בעיני. בנוסף, הוא משמש כאמצעי ניווט משני, כך שגם אם אנשים לא מודעים אליו יש להם איך להתקדם. תוסיף לזה את זה שקו תחתון זה לא הדבר הכי יפה בעולם מבחינה עיצובית, ותקבל פשרה בין שמישות לעיצוב שעובדת טוב (לעניות דעתי) – שובל פירורים בכחול/סגול עם קו תחתון כשהעכבר מעל.
את הבדיקה האמיתית האם זה עובד או לא אפשר לעשות רק במעבדה, או שאפשר להגיע לאיזו מסקנה חלקית מהקלטות/סטטיסטיקות שימוש (חלקית כי אז אי-אפשר לדעת למה לא השתמשו בשובל פירורים), אבל זה מעבר לתקציב של UXI 🙂
תודה ברק. אני מאד נהנה מהדברים שלך.
הייתי רוצה לשאול (אינני יודע אם כאן זה המקום…) איך מבצעים בדיקת מעבדה למשל לנקודה זו של שובל פירורים?
האם מבקשים מהנבדק לנווט אחורה קדימה?
האם נותנים לו חופשיות בבדיקה ועוקבים אחר פעולותיו?
או… כל דרך אחרת…
ובכלל קצת הרחבה על תהליך בדיקת חוויה במעבדה – איפה?
עוד נקודה בנושא של שימוש בקו תחתון בקישורים – קיים tradeoff בין מידת מובחנותו של קישור עם קו תחתון לבין מידת קריאותו. קל יותר לאתר בדף את הקישורים עם קו תחתון, אך יקח יותר זמן לקרוא אותם, כיון שקו תחתון בעצם מוסיף רעש ויזואלי ו"מוחק" את השוני בין האותיות בתחתית מחרוזת. וכמו שברק אמר – זה גם פחות יפה 🙂
אולי תתעניין במשהו שכתבתי לפני כמה זמן בנושא:
http://virtuanarchy.blogspot.com/2009/08/blog-post.html
יובל
תודה יובל, מעניין! הוספתי את המאמר לרשימת הקישורים לקריאה נוספת.