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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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