تصميم تسلسل هرمي متجاوب للصفحات يدعم المسح والفهم

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

ما الذي يجب أن يساعد التسلسل الهرمي المتجاوب المستخدم على فهمه؟

يجب أن يكشف التسلسل الهرمي غرض الصفحة، والدليل المرتبط به، والاختيارات، وما سيحدث بعد قرار المستخدم. هذه الأسئلة الأربعة تركيب تحريري عملي، وليست إطارًا رسميًا من W3C أو Nielsen Norman Group أو GOV.UK. توضح إرشادات W3C التكميلية للإتاحة المعرفية أن العنوان الواضح يساعد الشخص على معرفة مكانه وفهم غرض الصفحة، لكنها ليست معيار نجاح في WCAG. لذلك يصلح الاختبار لتعريف النتيجة المطلوبة، لا للادعاء بأن تصميمًا واحدًا يضمنها.

لا تحوّل شكل حرف F أو Z إلى مخطط جاهز، خصوصًا في صفحة عربية يبدأ اتجاهها من اليمين. يتغير المسح باختلاف المهمة واللغة والمحتوى والخبرة والتخطيط. رصدت Nielsen Norman Group نمطًا يشبه طبقات الكعكة عندما تكون العناوين الفرعية بارزة ومتوقعة وتلخص أقسامها بدقة، لكن ذلك وصف لسلوك محتمل وليس قانون قراءة. في مثال الباقات، المشكلة ليست غياب الجمال؛ بل تساوي وزن المقدمة وإثباتات التأهيل والاختيارات والتفاصيل والأزرار، فلا يعرف المشتري ما الذي يوجّه القرار.

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

ما الذي ينبغي للفريق حسمه قبل تنسيق الصفحة بصريًا؟

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

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

كيف تكشف الإشارات البصرية التسلسل الهرمي؟

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

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

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

كيف تميز الصفحة بين الدليل والاختيارات والإجراء التالي؟

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

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

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

ما عمليات الاستجابة التي تحافظ على المعنى عند تغير التخطيط؟

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

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

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

التسلسل الهرمي المتجاوب ليس ترتيب سقوط صناديق سطح المكتب؛ بل ترتيب نجاة المعنى.

كيف يراجع الفريق التسلسل الهرمي ويحكمه بمرور الوقت؟

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

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

1. سجّل كل فشل مقابل بند محدد في عقد الصفحة، لا مقابل وصف عام مثل «التصميم مزدحم».
2. حوّل الإصلاحات المتكررة إلى قواعد في نموذج المحتوى والقالب والمكوّن، بدل إصلاح كل صفحة يدويًا.
3. أضف أسئلة العقد إلى مراجعة التصميم ومعايير القبول وفحوص الإصدار.
4. استعن بمتخصص إتاحة أو باحث مستخدمين عندما لا يملك الفريق دليلًا كافيًا لتقييم العلاقات أو السلوك المتجاوب.
5. اعتمد قاعدة حوكمة واحدة: لا يُقبل قرار هرمي على مستوى الصفحة إلا إذا أمكن تبريره بعقدها ومهمة ممثلة ونتيجة ملحوظة.