معيار التخطيط والمسافات: لماذا يُحدث التباعد الصحيح فرقاً في تجربة المستخدم؟

ما المقصود بمعيار التخطيط والمسافات في كود المنصات؟

معيار التخطيط والمسافات هو المعيار رقم 4 في قسم «الأساسات» ضمن كود المنصات، ومساره الرسمي /foundations/layout-and-spacing.

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

يشمل هذا المعيار جانبين متكاملين:

التخطيط Layout

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

المسافات Spacing

تحدد القيم الرقمية الدقيقة للتباعد بين العناصر، سواء داخل المكوّنات عبر الـ Padding، أو بين المكونات باستخدام الـ Margin، أو ضمن المسافات الفاصلة بين الأقسام.

وتعتمد هذه القيم على نظام قياسي موحد يُطبّق عبر جميع صفحات المنصة لضمان الاتساق والتنظيم البصري.

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

لماذا تؤثر المسافات على تجربة المستفيد وليس فقط على الشكل؟

المسافات في واجهة المستخدم هي أداة تواصل بصري تُخبر المستفيد بعلاقة العناصر ببعضها قبل أن يقرأ كلمة واحدة.

هذا مبني على مبدأ «التقارب» في نظرية Gestalt للإدراك البصري، التي تقول بأن العناصر المتقاربة يُدركها الدماغ تلقائياً على أنها مجموعة واحدة مترابطة، والعناصر المتباعدة يُدركها على أنها منفصلة.

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

على مستوى تجربة المستفيد في المنصات الحكومية، يظهر هذا في مواقف محددة:

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

ما المبادئ الأساسية التي يقوم عليها هذا المعيار؟

يرتكز معيار التخطيط والمسافات في كود المنصات على منظومة من المبادئ المترابطة:

أولاً: نظام الشبكة الأساسية Base Grid

تُبنى المسافات على وحدة قياسية موحدة تكون جميع القيم مضاعفات لها.

النظام الأكثر اعتماداً في أنظمة التصميم الحكومية عالمياً هو الشبكة المبنية على 8px أو 4px كوحدة أساسية، بحيث تكون قيم المسافات 4، 8، 12، 16، 24، 32، 48 وهكذا.

هذا النظام يضمن أن جميع العناصر متناسقة بصرياً ويُبسّط قرارات التصميم ويُقلّل التباين العشوائي.

ثانياً: التسلسل الهرمي في المسافات

لا تتساوى المسافات في المنصة، وإنما تعكس مستوى العلاقة بين العناصر. المسافة بين العنوان والنص التابع له تكون أصغر من المسافة بين قسمين مختلفين، والمسافة بين العناصر المترابطة داخل البطاقة تكون أصغر من المسافة بين البطاقات المختلفة.

هذا التدرج هو ما يُنشئ التسلسل الهرمي البصري بشكل طبيعي.

ثالثاً: الفرق بين Padding وMargin

Padding هو المسافة داخل المكوّن بين محتواه وحدوده، يُحدد حجم منطقة التفاعل وإحساس المستفيد بـ«التنفس» داخل العنصر. Margin هو المسافة خارج المكوّن بينه وبين العناصر المجاورة، يُحدد العلاقة البصرية بين العناصر.

الخلط بين استخدامهما أو عدم اتساقهما عبر الصفحة مصدر رئيسي لعدم الاتساق البصري.

رابعاً: الإيقاع العمودي Vertical Rhythm

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

خامساً: التكيّف مع حجم الشاشة

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

كيف يظهر التطبيق الصحيح والخاطئ في المنصات الحكومية؟

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

التباين العشوائي في قيم المسافات

حين يستخدم فريق التطوير قيم مسافات غير منتظمة مثل 13px و17px و22px بدلاً من مضاعفات الوحدة الأساسية، ينكسر الإيقاع البصري للصفحة وتبدو العناصر غير متوازنة حتى لمن لا يعرف قواعد التصميم.

• مثال على الصحيح: مسافة 16px بين عناصر مترابطة و32px بين الأقسام.
• مثال على الخاطئ: مسافة 14px بين عناصر مترابطة و29px بين الأقسام.

الحشو الداخلي غير الكافي للأزرار

زر بحشو داخلي صغير جداً يبدو مضغوطاً وصعب النقر، خاصة على الجوال.

معايير الوصولية WCAG تشترط أن تكون منطقة النقر 44px على الأقل في الاتجاهين، وهذا يتحقق من خلال الحشو الداخلي الصحيح، وليس من خلال تكبير حجم الخط فقط.

تساوي المسافات بين العناصر المترابطة وغير المترابطة

حين تكون المسافة بين العنوان والوصف التابع له مساوية للمسافة بين قسمين مختلفين، يفقد المستفيد التسلسل الهرمي البصري ويحتاج لقراءة المحتوى كاملاً لفهم البنية بدلاً من إدراكها بصرياً بسرعة.

عدم اتساق المسافات بين الصفحات

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

كيف يقيّم «معيار بلس» التزام المنصات الحكومية بهذا المعيار؟

في تقييمنا لمعيار التخطيط والمسافات ضمن نموذج «معيار بلس» من uxarabia، نعمل على ثلاث طبقات متكاملة:

فحص اتساق قيم المسافات

نفحص ما إذا كانت قيم المسافات المستخدمة في المنصة تتبع نظاماً قياسياً موحداً وفق كود المنصات، أو أنها متفاوتة وعشوائية.

هذا الفحص يشمل Padding وMargin عبر جميع المكونات الرئيسية في الصفحات المختلفة.

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

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

نتحقق من أن المسافات تعكس العلاقات الصحيحة بين العناصر: العناصر المترابطة أقرب من العناصر غير المترابطة، وأن هذا التسلسل منتظم عبر الصفحة كاملها.

ربط النتائج بمتطلبات الاعتماد

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

قد يهمك الاطلاع على:
ما الذي يميز الجهات ذات الأداء المرتفع في التقييم الرقمي؟
كيف نفسر المعيار الحكومي بشكل صحيح داخل معيار بلس؟

خلاصة

المسافات في التصميم الحكومي لا ينبغي أن تُترك للتقدير، هي نظام يُحدد كيف يُدرك المستفيد الصفحة ويتفاعل معها قبل أن يقرأ كلمة واحدة.

والفرق بين منصة تبدو «جيدة» ومنصة تبدو «محترفة» يكمن في كثير من الأحيان في هذا النظام: في انتظام التباعد واتساقه وقدرته على إيصال التسلسل الهرمي بصرياً دون جهد.