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

السبب غالباً يكون هو عدم استخدام المساحة البيضاء بشكل سليم.

ما هي المساحة البيضاء؟

المساحة البيضاء (White Space) هي أي مساحة فارغة أو غير مستخدمة في واجهات (أو صفحات) الموقع، سواء كانت حول عناصر الواجهة أو بينها، وهي ليست بالضرورة “بيضاء”.

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

1. تسهيل قراءة المحتوى.
2. توضيح العلاقات بين العناصر في الصفحة.

1. تسهيل قراءة المحتوى

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

فقراءة المكتوب في هذه الصورة:

أريح وأسهل بكثير من قراءة المكتوب في هذه الصورة:

أليس كذلك؟

2. توضيح العلاقات بين العناصر في الصفحة

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

هل يمكنك معرفة الى أي شخص ينتمي كل تعليق دون الحاجة إلى الذهاب إلى بداية أو نهاية التعليقات كل مرة؟ لا أعتقد ذلك، لأن العلاقة المنطقية بين التعليق (عنصر) وكاتب التعليق (عنصر آخر) لم توضّح.

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

نفس الشيء ينطبق على واجهات المواقع. نرى العديد من المواقع التي تملك واجهات مزدحمة كجريدة الوطن:

واجهة موقع جريدة الوطن الحالية

وهنا واجهة الموقع بعد إضافة بعض المساحات البيضاء بين عناصر الواجهة دون المساس بالمحتوى (باستخدام الفوتوشوب):

واجهة موقع جريدة الوطن بعد إضافة المساحات البيضاء

أصبحت واجهة الموقع الآن أقل “ازدحاماً”، واتضّحت أقسامها بشكل أكبر.

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

الخلاصة

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

إن كانت لديك أي إضافات أو استفسارات حول الموضوع، فأرجو أن تشاركنا بها في التعليقات.