التصميم المتمحور حول المستخدم User-Centered Design

ملاحظة: قد تستخدم بعض الأمثلة التفاعلية أكواد CSS لم تتعلمها بعد. لا تقلق بشأن محاولة فهم الكود بالكامل؛ فالهدف من هذه الأمثلة هو عرض نماذج لمفاهيم التصميم هذه، لتتمكن من فهم آلية عملها بشكل أفضل.

عند الحديث عن تصميم المواقع الإلكترونية، تتوفر أنواع عديدة من أدوات المساعدة في التصفح التي يمكنك استخدامها؛ ومن الأمثلة على ذلك أشرطة التنقل العلوية (top navigation bars)، والأشرطة الجانبية (sidebars)، وتذييلات الصفحة (footers). ولكن إذا كان موقعك يتسم بالتعقيد ويحتوي على مستويات تصفح متعددة ومتعمقة، فقد ترغب في التفكير باستخدام "مسار التصفح" (breadcrumbs).

تُعد "مسارات التنقل" (Breadcrumbs) أداةً مساعدةً في التصفح توضح للمستخدم موقعه ضمن التسلسل الهرمي للموقع (the site's hierarchy). وإليك مثال يوضح شكل هذه المسارات في نموذج لموقع إلكتروني لبيع الأجهزة الإلكترونية:

<link rel="stylesheet" href="styles.css">

<div class="breadcrumbs">
 الرئيسية / الإلكترونيات / الهواتف / الهاتف الذكي XYZ
</div>
            

.breadcrumbs {
 font-size: 0.9rem;
 color: #555;
 margin: 1rem 0;
}
            

معاينة:

تُعرض "مسارات التصفح" (breadcrumbs) في معظم المواقع الإلكترونية أعلى الصفحة، لتُظهر للمستخدم المسار الذي سلكه للوصول إلى الصفحة الحالية؛ فعلى سبيل المثال، قد يبدأ المستخدم من الصفحة الرئيسية ، ثم ينتقل إلى فئة الإلكترونيات ، ومنها إلى فئة الهواتف ، وصولاً في النهاية إلى منتج الهاتف الذكي XYZ. ومن المرجح أنك قد تعاملت مع هذه المسارات أثناء تصفحك لأحد المواقع بحثاً عن منتج معين أو معلومة محددة.

يُعد استخدام "مسار التصفح" (breadcrumbs) مفيداً؛ إذ يساعد المستخدمين على معرفة موقعهم ضمن التسلسل الهرمي للموقع وكيفية العودة إلى الصفحات السابقة. وتبرز أهمية ذلك بشكل خاص عندما يصل المستخدم إلى الصفحة عبر نتيجة بحث أو رابط خارجي، ويحتاج إلى فهم سياق الصفحة التي يتواجد فيها.

اختيار الفاصل (Separator)

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

<link rel="stylesheet" href="styles.css">

<div class="breadcrumbs">
 الرئيسية > الإلكترونيات > الهواتف > الهاتف الذكي XYZ
</div>
            

.breadcrumbs {
 font-size: 0.9rem;
 color: #555;
 margin: 1rem 0;
}
            

معاينة:

الموضع Placement

يتمثل الاعتبار الثاني في "موضع مسار التنقل" (the placement of the breadcrumbs). عادةً ما يوضع هذا المسار في أعلى الصفحة، إما فوق شريط التنقل الرئيسي أو تحته. ينبغي ألا يواجه المستخدمون صعوبة في العثور عليه، لذا احرص على أن يكون ظاهراً ويسهل تحديد مكانه.

<link rel="stylesheet" href="styles.css">

<nav class="main-nav">
 <a href="#">الرئيسية</a>
 <a href="#">الإلكترونيات</a>
 <a href="#">الهواتف</a>
</nav>
<div class="breadcrumbs">
 الرئيسية > الإلكترونيات > الهواتف > الهاتف الذكي XYZ
</div>
            

.main-nav {
 background-color: #333;
 padding: 1rem;
}

.main-nav a {
 color: white;
 margin-left: 1rem;
 text-decoration: none;
}

.breadcrumbs {
 font-size: 0.9rem;
 color: #555;
 margin: 1rem 0;
}
            

معاينة:

الحجم Size

ثمة اعتبار آخر يتمثل في "حجم مسار التصفح" (the size of the breadcrumbs)؛ إذ ينبغي الحرص على أن يكون حجمه مناسباً لضمان سهولة قراءته، دون أن يكون كبيراً لدرجة تشغل حيزاً مفرطاً من مساحة الصفحة. وتجدر الإشارة إلى أن مسار التصفح (breadcrumbs) ليس مصمماً ليكون أداة التنقل الرئيسية (primary navigation tool)، بل يُعد وسيلة مساعدة ثانوية للتنقل. ففي المواقع التي تتضمن صفحاتها قدراً كبيراً من المعلومات، يتيح هذا المسار للمستخدمين معرفة موقعهم الحالي ضمن التسلسل الهرمي للموقع بسهولة، والعودة إلى الصفحات السابقة.

<link rel="stylesheet" href="styles.css">

<div class="breadcrumbs">
 الرئيسية > الإلكترونيات > الهواتف > الهاتف الذكي XYZ
</div>
<p>
 لوريم إيبسوم دولور سيت أميت، كونسبتيتور أديبيبسينغ إليت، سيغ ديو إيوسمود تيمبور إينسيديْدونت أوت لابوري إيت دولوري مغنا أليكوث.
</p>
            

.breadcrumbs {
 font-size: 0.9rem;
 color: #555;
 margin: 1rem 0;
}

p {
 font-size: 1.2rem;
 line-height: 1.6;
}
            

معاينة:

متى تستخدم مسار التنقل (Breadcrumbs)

إذن، متى ينبغي عليك استخدام "مسارات التصفح" (breadcrumbs) في موقعك؟ إذا كان موقعك بسيطاً ويتميز بهيكل تصفح ضحل (أي يتكون من مستويات قليلة)، فقد لا تكون هذه المسارات ضرورية؛ إذ إن الهيكل الضحل (shallow hierarchy) يعني أن الموقع لا يحتوي إلا على عدد محدود من مستويات التنقل (levels of navigation)، وبالتالي قد لا تضيف هذه المسارات قيمة كبيرة. وعادةً ما تظهر مسارات التصفح في مواقع التجارة الإلكترونية والمواقع الإخبارية، وغيرها من المواقع التي تعتمد هيكلاً عميقاً للتصفح، مثل مواقع التوثيق الفني (technical documentation sites).