مدونة قابلية الاستخدام

تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)

المشكلة التي يحلها هذا النمط

المستخدم (او الزائر) يرغب في معرفة موقعه الحالي في الموقع، حتى يساعده ذلك في فهم تقسيم وهيكلة محتوى الموقع ويسهّل له تصفّحه.

مثال على نمط فتات الخبز

الحل المقترح لتلك المشكلة

استخدام وسيلة تصفّح مساعدة تسمّى Breadcrumbs (أو “فتات الخبز” كترجمة)، تعرض بها أقسام محتوى الموقع حسب هيكلتها بشكل عرضي، حيث يمثّل أول رابط أعلى قسم حسب هيكلة الموقع (وهو الصفحة الرئيسية عادة)، وحتى الصفحة التي يستعرضها المستخدم حالياً.

سمّيت وسيلة التصفّح هذه بـ”فتات الخبز” نسبة إلى قصّة مشهورة استخدم بها طفلين فتات الخبز كوسيلة ارشاديّة لمعرفة طريق العودة لمنزلهم.

متى يستخدم هذا النمط

استخدم هذا النمط عندما يكون محتوى موقعك ضمن هيكلة ذات ثلاث مستويات على الأقل (قسم يحتوي على قسم فرعي، وذلك القسم الفرعي يحتوي على قسم فرعي آخر…الخ).

كيف يحل هذا النمط المشكلة

يساعد هذا النمط زوّار ومستخدمي موقعك على:

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

كيفية تطبيق هذا النمط

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

أمثلة على هذا النمط

مثال 1

مثال 3

مثال 2

مصدر الأمثلة