Breadcrumb Navigation أفضل الممارسات والأمثلة

غالبًا ما يتم التغاضي عن التنقل عبر التنقل في عملية التصميم والتطوير. قد يرى بعض الناس أنه غير ضروري في حين أن البعض الآخر قد يشعر أنه كبير جدًا من المتاعب بالنسبة إلى قيمته. حقيقة الأمر هي أن التنقل عبر التنقل سوف يزيد بشكل كبير من سهولة استخدام موقع الويب.

يوفر Breadcrumbs للمستخدمين طريقة بديلة للتنقل ، ويسمح لهم برؤية موقعهم في التسلسل الهرمي لموقع ويب ، ويقلل عدد الخطوات اللازمة للانتقال إلى مستوى أعلى داخل موقع الويب.

الموضحة هنا هي الأنواع المختلفة من التنقل المتنقل التي يتم استخدامها اليوم والسبب في أهميتها وكيفية تنفيذها على أفضل وجه عبر الإنترنت. وشملت أيضا هنا للرجوع اليها أكثر من 30 مثال على كيفية استخدام فتات الخبز عبر الإنترنت اليوم.

تذكر أنه بينما من المحتمل ألا يؤدي التنقل المتتالي إلى إنشاء موقع ويب أو كسره ، إلا أنه سيوفر فائدة إضافية لمستخدميك من خلال زيادة قابلية الاستخدام والوظائف الشاملة لموقع الويب الخاص بك.

أنواع فتات الخبز

مسار

تشير فتات المسارات المستندة إلى المسار إلى الخطوات أو المسار ، وقد اتخذ المستخدم للوصول إلى الصفحة الحالية لموقع ويب. علاوة على ذلك ، سيرى المستخدمون روابط للصفحات التي زاروها سابقًا للوصول إلى الصفحة الحالية. من بين الأنواع الثلاثة للتنقل باستخدام breadcrumb ، يعد التنقل على أساس التنقل عبر الإنترنت أقل شعبية على الإنترنت. السبب في ذلك ، يوفر التنقل القائم على مسار التنقل وظائف مماثلة لـ “إلى الأمام” و “الى الخلف” أزرار على المتصفح. بالنسبة إلى معظم مواقع الويب ، يوفر التنقل المتنقل القائم على الموقع والخاصية المميزة وظائف أفضل.

موقعك

تشير فتات التصفح المستندة إلى الموقع إلى المستخدم حيث تقع الصفحة الحالية في التسلسل الهرمي للموقع. يتم مشاهدة هذا النوع من التنقل المتتالي بشكل شائع على مواقع الويب التي تحتوي على أكثر من مستويين من العمق أو المحتوى. عند الانتقال إلى موقع الويب ، يتم تزويد المستخدمين بروابط إلى صفحات ، أو فئات ، تكون بمثابة “الأبوين” أو مستوى أعلى من الصفحة التي يشاهدونها حاليًا. على سبيل المثال ، قد يكون المستخدم على “تحدث” الصفحة ، ومع ذلك ، فإن “الذي نفعله” الصفحة هي أحد الوالدين “تحدث” الصفحة في حين أن “الصفحة الرئيسية” الصفحة هي أحد الوالدين “الذي نفعله” صفحة.

كليرفت المحدودة

صفة، عزا

تشير فتات التنقل المستندة إلى السمة للمستخدم إلى السمات أو الفئات المنسوبة إلى الصفحة الحالية داخل موقع ويب. غالبًا ما تندرج المنتجات في مواقع التجارة الإلكترونية ، وقد لا تندرج هذه المنتجات ضمن فئة معينة فحسب ، بل وتحت سمات معينة أيضًا. على سبيل المثال ، يمكن تصنيف السيارة على أنها سيارة رياضية متعددة الاستخدامات ، ثم يكون لها سمات اللون الأسود وتم إصدارها في عام 2010.

Cars.com

لماذا استخدام فتات الخبز?

• قابليتها للاستخدام كبيرة

  يوفر Breadcrumbs وسيلة إضافية يمكن للمستخدمين من خلالها التنقل بسهولة في موقع الويب. إذا قام مستخدم بالهبوط على صفحة داخلية على موقع الويب الخاص بك من فتات مصدر آخر ، فسوف يتيح للمستخدم معرفة مكانه بالضبط داخل التسلسل الهرمي للموقع. يتم أيضًا منح المستخدم الفرصة للانتقال إلى مستوى أعلى من الموقع في أي وقت دون أي متاعب.

• من السهل التراجع

  لم يتم تصميم التنقلات الأساسية ليتم اتباعها إلى الوراء وكانت فتات الخبز. نظرًا لأن التراجع شائع للغاية على الإنترنت ، فإن تقديم مساعدة إضافية بسيطة يمكن أن يقطع شوطًا طويلًا.

• تخلص من النقرات الإضافية

  تسمح ميزة Breadcrumbs للمستخدمين بالانتقال من مستوى أحد مواقع الويب إلى المستوى التالي دون الحاجة إلى استخدام “إلى الأمام” أو “الى الوراء” أزرار على المتصفح. بالإضافة إلى ذلك ، تلغي فتات التصفح الحاجة إلى أن يلجأ المستخدمون باستمرار إلى التنقل الرئيسي.

• يظهر التسلسل الهرمي للمستخدمين

  لن يعكس التنقل الأساسي لأحد مواقع الويب التسلسل الهرمي لكل صفحة داخل الموقع. إن منح المستخدمين فتات الخبز سيسمح لهم بمشاهدة التسلسل الهرمي للصفحة داخل موقع الويب.

• بصريا ارضاء

  لا توفر فتات التصفح فقط للمستخدمين إمكانية استخدام إضافية ، بل تقوم بذلك دون شغل مساحة كبيرة أو مساحة على الصفحة. يعد تطبيق Breadcrumbs سهل التنفيذ في التصميم المرئي لموقع الويب الخاص بك ويوفر فائدة كبيرة للمستخدمين.

• يوفر مساعدة إضافية

  من الممكن تمامًا ألا يفهم بعض المستخدمين كيفية عمل التنقل الأساسي لموقع ويب وفي بعض الحالات قد لا يعرف المستخدمون ما يبحثون عنه. إن منح المستخدمين فتات الخبز سيسمح لهم برؤية التقدم الشامل وهيكل موقع على شبكة الإنترنت ، مما يتيح لهم التنقل في الموقع بشكل أفضل.

• انخفاض معدلات ترتد

  عادةً ستوفر فتات التصفح تنقلًا أكثر تفصيلًا من التنقل الأساسي. عند القيام بذلك ، سيتم منح المستخدمين المزيد من الخيارات حول كيفية التنقل في موقع ويب. إن منحهم الفرصة للتتبع بسهولة لمستويات قليلة داخل الموقع سيؤدي إلى خفض معدل الارتداد.

• يبني الاهتمام

  عندما يهبط المستخدم على صفحة داخلية لأحد احتمالات موقع الويب ، يكون ذلك في صفحة الاهتمام. قد يوفر Breadcrumbs روابط إلى صفحات ومعلومات إضافية يهتم بها المستخدم أيضًا دون أن تبدأ من المربع الأول.

Breadcrumb أفضل الممارسات

• استخدام فتات الخبز في أعلى الصفحة

  الموضع الأكثر شيوعًا وغريزيًا لخطوات التصفح الرئيسية يقع في أعلى الصفحة. هذا يتيح للمستخدمين العثور على فتات الخبز بطريقة غير معقدة والاستفادة منها وفقًا لذلك.

• استخدام فتات الخبز باستمرار

  إذا قررت استخدام فتات الخبز ، فتأكد من استخدامها عبر موقع الويب بالكامل. إعطاء المستخدمين فتحات التصفح في بعض الصفحات وليس الصفحات الأخرى سيؤدي فقط إلى إرباكهم وإحباطهم. (مثال واحد على ذلك هو Amazon أثناء قيامهم بإزالة فتات التصفح من صفحات المنتجات الفردية.)

• فتات الخبز يجب أن تتحلل برقة

  يجب أن تبدأ فتات الخبز دائمًا بالصفحة الرئيسية وتتحلل إلى الصفحة الحالية. عند القيام بذلك ، تحتاج فتات الخبز إلى الانتقال من أعلى مستوى إلى أدنى مستوى خطوة واحدة في كل مرة.

• أسلب فتات الخبز بشكل مناسب

  تريد أن ترى فتات الخبز الخاصة بك ولكنك لا تريد أن تكون نقطة محورية. تريد أيضًا توضيح أن فتات التنقل الخاصة بك ليست جزءًا من المحتوى الرئيسي للصفحة ، بل هي دعم إضافي لها. ابحث عن وسيلة سعيدة حيث تكون فتات الخبز الخاصة بك ملحوظة ولكن ليست متعجرفة.

• تصنيف الصفحات بوضوح

  إذا كانت لديك صفحات تنقسم إلى فئتين أو أكثر ، فقد لا ترغب في استخدام فتات التصفح على موقع الويب الخاص بك. محاولة وضع صفحة تحت فئتين أو أكثر من المحتمل أن ينتج عنها فقط فتات غير واضحة ولغز المستخدم. تأكد من أن موقع الويب الخاص بك يحتوي على تسلسل هرمي منظم ويتم عرضه وفقًا لذلك من خلال فتات التنقل الخاصة بك.

• فصل بوضوح كل مستوى

  تأكد من أن المستخدمين قادرون على التمييز بين كل مستوى من فتات الخبز. الفاصل الأكثر شيوعًا بين المستويات هو الحرف "أكبر من" (>). تتضمن الفواصل الجيدة الأخرى عروض الأسعار ذات الزاوية المزدوجة (») ، والشرط المائلة (/) ، والأسهم (→). في حالة استخدام حرف نص عادي ، استخدم حرفًا واحدًا فقط. (»أكثر جاذبية وفعالية من >>)

• واحد خارج الصفحة الحالية

  استخدم نمطًا مختلفًا في العنصر الأخير من قائمة التصفح المتسلسل لإثبات أنها الصفحة التي يتم عرضها حاليًا. يمكنك تحقيق ذلك عن طريق جعل هذا البند بالخط العريض, تغيير لونه ، أو مؤكدا هذا.

• لا تجعل الصفحة الحالية وصلة

  ليست هناك حاجة لجعل العنصر الأخير من قائمة التصفح المتسلسل رابطًا لأنه يتم عرض الصفحة الحالية. سيؤدي إنشاء رابط هنا إلى إرباك المستخدمين فقط ، خاصةً عند النقر فوقه ولا يتم نقلهم إلى صفحة جديدة.

• لا تستخدم فتات الخبز باعتباره عنوان الصفحة

  استخدام العنصر الأخير من قائمة التصفح المتسلسل كعنوان للصفحة الحالية غير فعال. إذا اخترت استخدام فتات التصفح ، فقم بذلك بإضافة عنوان الصفحة أيضًا.

• فتات الخبز لا تحل محل الملاحة الأساسية

  يتم استخدام فتات الخبز فقط كدعم للتنقل الأساسي ، وليس لاستبدال التنقل الأساسي تمامًا. يجب عليك دائمًا تزويد المستخدمين بالملاحة الأساسية التي يمكنهم من خلالها التنقل في موقع الويب قبل استخدام التنقل المتتالي.

أمثلة رائعة من فتات الخبز

فيترا المباشر

دراجات رحلة

إيلي

SiteInspire

ميا وماجي

Intridea

تصميم من قبل البشر

روكسي

BLIK

SitePoint

استهداف

وول مارت

1-800-الزهور

افضل شراء

Amazon.com

الحظائر ونوبل

نهاية الأراضي

تفاحة

جوجل

مطاردة

AbsolutePunk.net

لتمان بروس الإضاءة

Guardian.co.uk

المنطقة 17

موثقة wufoo

فتيات الكشافة من تينيسي الأوسط

غلاسكو الجماعية

بكر

بيل كندا

Grooveshark

Devlounge

نبذة عن الكاتب - شاي هاو هو مصمم ويب وواجهة مستخدم محترف يعيش حاليًا في شيكاغو ، إلينوي. يكتب عن تصميم المواقع الإلكترونية في مدونته الخاصة في يوم الإجازة ويحب أن يسمع منك على تويتر. من فضلك لا تتردد أخبره مرحبا!