كثيراً ما يواجه مصمموا تجربة المستخدم عدة مشاكل، منها ايجاد الية بسيطة وعملية لاتاحة ميزة التنقل بين الصفحات الرئيسية والفرعية، حيث قد يبدوا المستخدم تائها وعليه ان يجد طريقاً مختصرا للعودة الى الصفحة الرئيسية او الى صفحة سابقة. تماما كما حدث لاصدقائنا الصغار في قصة بيت الحلوى ومن هنا فيجب ان نترج علامة ترشدنا الى أين نحن وما هو الطريق الذي يتوجب علينا أن نسلكة .
ومن هنا نشأ مصطلح Breadcrumb "فتات الخبز" أو ما يُترجم إلى مسار التنقل الفرعي أو ممرات التصفح، هو عنصر مساعد ثانوي للتنقل يُستخدم في تصميم الواجهات (UI) للتطبيقات ومواقع الويب.
يُطلق عليه هذا الاسم تيمناً بقصة بيت الحلوى "هانزل وغريتل" الخيالية الألمانية، حيث ترك الأخوان وراءهما فتات الخبز (breadcrumbs) ليتتبعا طريقهما مرة أخرى.
وظيفة وموقع الـ Breadcrumb
يستخدم عنصر فتات الخبز ليظهر مسار التنقل عادةً كصف أفقي من الروابط التشعبية النصية في الجزء العلوي من الصفحة، أسفل الشريط الرئيسي (Header).
الهدف الرئيسي لعنصر Breadcrumb هو مساعدة المستخدم على فهم موقعه الحالي داخل التسلسل الهرمي للموقع (بنيته)، وتقديم طريقة سهلة للعودة إلى الصفحات السابقة أو الفئات الأعلى. الرئيسية > الإلكترونيات > الهواتف الذكية > [اسم المنتج]
استخدام الفواصل : يتم فصل الروابط برمز فاصل، وغالباً ما يكون رمز ">" (أكبر من) للدلالة على التسلسل الهرمي. الرئيسية > الفئة > المنتج
الصفحة الحالية : يكون العنصر الأخير في المسار (الصفحة الحالية) نصًا غير قابل للنقر؛ لأنه يمثل المكان الذي يقف فيه المستخدم بالفعل.
أنواع ممرات التصفح
هناك ثلاثة أنواع رئيسية تُستخدم في تصميم الويب:
المسار القائم على الموقع/التسلسل الهرمي (Location-Based/Hierarchy):
الوصف: يعكس هيكل الموقع الثابت، موضحاً مكان الصفحة الحالية في البنية الهرمية للموقع. هذا هو النوع الأكثر شيوعاً.
مثال: الرئيسية > الخدمات > خدماتنا الرقمية > التسويق الإلكتروني
المسار القائم على الطريق/التاريخ (Path-Based/History):
الوصف: يعكس الخطوات الفعلية التي اتخذها المستخدم للوصول إلى الصفحة الحالية. وهو يشبه زر الرجوع في المتصفح، ولكنه يوفر رؤية أوضح للمسار كاملاً.
مثال: الرئيسية > البحث > صفحة المنتج أ > صفحة المنتج ب > [الصفحة الحالية]
المسار القائم على السمات (Attribute-Based):
الوصف: يُستخدم بشكل رئيسي في مواقع التجارة الإلكترونية لإظهار الفلاتر (Filters) والخصائص التي اختارها المستخدم لتصفية النتائج.
مثال: أحذية رجالية > المقاس: 42 > اللون: أسود > الماركة: X
فوائد استخدام Breadcrumb
تحسين تجربة المستخدم (UX): يقلل من التيه، حيث يعرف المستخدم دائمًا مكانه ويمكنه العودة بسهولة.
تحسين محركات البحث (SEO): يساعد محركات البحث (مثل Google) على فهم بنية الموقع وترابط الصفحات، كما يساهم في بناء روابط داخلية (Internal Linking).
تقليل معدل الارتداد (Bounce Rate): يشجع المستخدمين على استكشاف مستويات أعلى من الموقع بدلاً من مغادرته عند الانتهاء من الصفحة الحالية.
