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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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