كيف نصمم هرمية صفحة متجاوبة تسهّل المسح والفهم؟

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

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

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

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

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

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

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

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

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

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

كيف تكشف الإشارات البصرية الهرمية من دون تشويهها؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كيف يدقق الفريق الهرمية ويحكم قراراتها؟

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

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

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

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

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