التسلسل البصري والتكوين: كيف يقرأ الناس التصميم
لماذا يلاحظ القارئ عنصرًا قبل آخر؟ أدوات بناء التسلسل البصري، وأنماط القراءة وانعكاسها في التصاميم العربية، والشبكات، مع اختبارات سريعة لأي تصميم.
التسلسل البصري (Visual Hierarchy) هو ترتيب عناصر التصميم بحيث يرى القارئ الأهم أولًا ثم ما يليه، بالترتيب الذي قصده المصمم. فعين الإنسان لا تمسح التصميم بالتساوي، بل تقفز إلى أبرز عنصر ثم تتنقل بين العناصر حسب حجمها ولونها وموضعها. وإذا لم ترسم أنت هذا المسار، رسمه التصميم بطريقة عشوائية. يشرح هذا الدليل أدوات بناء التسلسل البصري، وأنماط القراءة وكيف تنعكس في التصاميم العربية، والشبكات، واختبارات سريعة تكشف أي خلل.
لماذا يهم التسلسل البصري
يمر المستخدم على المنشور في قائمة التصفح خلال لحظة، ويرى اللافتة من سيارة مسرعة. في هذا الوقت القصير لا يقرأ أحد كل شيء، بل يلتقط عنصرًا أو اثنين. والتصميم الذي يعرض خمسة عناصر بالقوة نفسها لا يوصل أيًّا منها.
لذلك حدّد قبل التصميم ثلاثة مستويات:
- المستوى الأول: شيء واحد فقط، هو ما يجب أن يلتقطه القارئ حتى لو لم يرَ غيره: العرض، أو العنوان، أو المنتج.
- المستوى الثاني: المعلومات الداعمة التي تشرح المستوى الأول: التفاصيل، ومدة العرض، والصورة المساندة.
- المستوى الثالث: ما يبحث عنه المهتم بعد أن يقتنع: الشعار، ووسيلة التواصل، والشروط.
وسؤال مفيد للعميل: «إذا تذكّر المشاهد شيئًا واحدًا فقط، فماذا تريده أن يكون؟». الإجابة هي المستوى الأول.
مثال افتراضي: منشور عرض رمضاني
يرسل متجر عبايات هذا المحتوى لمنشور واحد: الشعار، وعبارة «خصم 30% على كل العبايات»، وتهنئة برمضان، وصورة منتج، ومدة العرض، وأسماء خمسة فروع، ورقم الهاتف، ورقم واتساب، والموقع الإلكتروني، والشروط والأحكام. وضع كل ذلك بالحجم نفسه يعني ألا يُقرأ شيء. التوزيع الأفضل: الخصم وصورة العباية في المستوى الأول، والتهنئة ومدة العرض في المستوى الثاني، والشعار ورقم واتساب في المستوى الثالث، أما الفروع والشروط فمكانها نص المنشور المرافق لا الصورة.
أدوات بناء التسلسل البصري
الحجم
العنصر الأكبر يُرى أولًا. لكن الفرق بين المستويات يجب أن يكون واضحًا؛ فالفرق الصغير في الحجم يبدو خطأً لا قرارًا. ومن الطرق العملية اعتماد سلّم أحجام ثابت يكبر فيه كل مستوى عن الذي قبله بنسبة ثابتة، مثل 1.25 أو 1.5 ضعف.
الوزن
الخط العريض يسبق العادي إلى العين حتى لو تساوى الحجم. لذلك اختر للعربية عائلة خطوط فيها أوزان متعددة، كما يشرح دليل الطباعة والخطوط العربية في التصميم، واستخدم الوزن العريض بقدر، فإذا عمّ فقد أثره.
اللون والتباين
العنصر الملوّن المشبع فوق خلفية محايدة يجذب النظر فورًا. خصّص لون التمييز لعنصر واحد أو اثنين، مثل زر الشراء أو السعر، ولا توزعه على كل شيء. واختيار هذا اللون وضمان تباينه موضوع دليل نظرية الألوان وعلم نفس الألوان.
الموضع
أعلى التصميم وبداية اتجاه القراءة يحظيان بالانتباه أولًا، وهي الزاوية العليا اليمنى في التصميم العربي. والمركز يجذب العين في التكوينات المتماثلة. أما الزوايا السفلية فتُقرأ أخيرًا في الغالب، ولهذا تناسب الشعار ووسائل التواصل.
المساحة البيضاء والعزل
العنصر المحاط بمساحة فارغة يبرز حتى لو كان صغيرًا. والعزل من أقوى أدوات التسلسل وأقلها استخدامًا، لأن العملاء يميلون إلى ملء كل فراغ.
التجميع
حين تتقارب العناصر أو تتشابه في الشكل واللون، يقرؤها الذهن مجموعة واحدة. هذا يقلل عدد «الأشياء» التي تعالجها العين: اثنا عشر عنصرًا متناثرًا تصبح ثلاث مجموعات مفهومة، مثل مجموعة للمنتج وسعره، ومجموعة للتفاصيل، ومجموعة للتواصل.
الاتجاه والصور
الخطوط والأسهم وحركة العناصر تقود العين. والوجوه البشرية تجذب النظر قبل أغلب العناصر، واتجاه نظر الشخص في الصورة يسحب عين المشاهد معه؛ فاجعل العارض ينظر نحو العنوان أو المنتج، لا خارج الإطار.
أنماط القراءة: F وZ وانعكاسها في العربية
يصف المصممون طريقتين شائعتين لمسح العين للصفحة، وهما ميل عام لا قانون، والتسلسل البصري القوي يتغلب عليهما.
نمط F
يظهر في الصفحات الكثيفة بالنصوص، مثل المقالات ونتائج البحث وقوائم المنتجات: يمسح القارئ السطر الأول أفقيًا، ثم سطرًا أقصر تحته، ثم ينزل على امتداد حافة بداية الأسطر. في اللاتينية تكون هذه الحافة يسارًا، وفي العربية ينعكس النمط: يبدأ من أعلى اليمين، ويمسح نحو اليسار، ثم ينزل على امتداد الحافة اليمنى. والنتيجة العملية: ضع الكلمات المهمة في بداية العناوين وعناصر القوائم، أي في جهة اليمين في التصميم العربي.
نمط Z
يظهر في التصاميم قليلة النصوص، مثل الإعلانات والملصقات وأعلى صفحات الهبوط (Landing Pages): تنتقل العين من زاوية البداية العليا إلى الزاوية المقابلة، ثم قطريًا إلى أسفل جهة البداية، ثم أفقيًا إلى الزاوية الأخيرة. وفي العربية يصبح المسار: أعلى اليمين، ثم أعلى اليسار، ثم أسفل اليمين، ثم أسفل اليسار. ضع الشعار أو العنوان عند نقطة البداية، وزر الدعوة إلى الإجراء عند نقطة النهاية، وهي أسفل اليسار في التصميم العربي.
التصاميم ثنائية اللغة
حين يتجاور النصان العربي والإنجليزي، يتبع كل عمود اتجاهه الخاص. قرر أي اللغتين تقود، وغالبًا ما تكون العربية في الأعلى أو في جهة اليمين في أسواق الخليج، وضع العناصر المشتركة كالصورة والشعار في موضع محايد مثل المنتصف. وأكثر الأخطاء شيوعًا نقل تخطيط إنجليزي إلى العربية دون عكسه، فيقع أهم عنصر في آخر ما تصل إليه عين القارئ العربي.
الشبكات: الهيكل غير المرئي
الشبكة (Grid) نظام من الأعمدة والهوامش والفواصل (Gutters) يرتّب العناصر ويضمن الاتساق بين الصفحات والمنشورات. وأشهر أنواعها:
- شبكة العمود الواحد: للنصوص الطويلة والكتب والمقالات.
- شبكة الأعمدة: الأكثر استخدامًا في المواقع، وتنتشر شبكة الاثني عشر عمودًا لأنها تقبل القسمة على 2 و3 و4 و6، مع أعمدة أقل على الهاتف.
- الشبكة المعيارية (Modular Grid): أعمدة وصفوف معًا، تناسب الكتالوجات وقوائم الطعام ولوحات البيانات.
- شبكة خط الأساس (Baseline Grid): تضبط أسطر النص على مسافات ثابتة في المطبوعات متعددة الأعمدة.
في التصميم العربي تنعكس الشبكة: يبدأ العمود الأول من اليمين، وتنتقل الأعمدة الجانبية غير المتماثلة إلى الجهة الأخرى. ويمكن كسر الشبكة عمدًا لإبراز عنصر واحد، بشرط أن يكون الكسر استثناءً واضحًا لا فوضى. وفي منشورات التواصل الاجتماعي، تحتاج الهوامش إلى مراعاة المناطق التي تغطيها واجهة التطبيق، كما يشرح دليل تصميم منشورات التواصل الاجتماعي. أما في المواقع والتطبيقات فالشبكة جزء من تجربة الاستخدام كلها، وتفاصيلها في دليل أساسيات تصميم واجهات المستخدم وتجربة المستخدم.
التكوين: نقطة التركيز والتوازن
كل تكوين ناجح له نقطة تركيز واحدة تبدأ منها القراءة. ومن الأدوات المستعارة من التصوير قاعدة الأثلاث: تقسيم المساحة بخطين أفقيين وخطين رأسيين، ووضع نقطة التركيز عند أحد التقاطعات بدل المركز تمامًا، وهي مشروحة في دليل قواعد التكوين في التصوير الفوتوغرافي. ثم وزّع بقية العناصر بحيث يتوازن الوزن البصري: عنصر ثقيل في جهة يقابله فراغ أو عناصر أخف في الجهة الأخرى. وفي التصاميم متعددة الصفحات، يصنع تكرار الترتيب نفسه إيقاعًا يريح القارئ ويسرّع فهمه.
اختبارات سريعة لأي تصميم
- اختبار التمويه: طبّق تمويهًا قويًا على التصميم أو انظر إليه بعينين شبه مغمضتين. ما يبقى ظاهرًا يجب أن يكون المستوى الأول.
- اختبار الثواني الخمس: اعرض التصميم على شخص لخمس ثوانٍ، ثم اسأله عمّا تذكّره.
- اختبار الترتيب: اطلب من شخص أن يشير إلى العناصر بالترتيب الذي لاحظها به، وقارن ذلك بالترتيب الذي قصدته.
- اختبار العدّ: كم عنصرًا يتنافس على المركز الأول؟ الإجابة الصحيحة واحد.
- اختبار الأبيض والأسود: يجب ألا يعتمد التسلسل على الصبغة وحدها.
- اختبار الحجم الحقيقي: شاهد التصميم على الهاتف بحجمه الفعلي، لا مكبّرًا على شاشة الحاسوب.
أخطاء شائعة
- جعل كل شيء عريضًا وكبيرًا، فيصرخ التصميم كله ولا يُسمع شيء.
- كثرة المستويات: ستة أحجام للخط تصنع ضجيجًا، وثلاثة أو أربعة تكفي عادةً.
- تكبير الشعار حتى ينافس العرض نفسه.
- توسيط كل العناصر آليًا دون سبب.
- زر دعوة إلى الإجراء بتباين ضعيف.
- وضع أهم عنصر أعلى اليسار في تصميم عربي بحكم العادة اللاتينية.
- حشر كل المعلومات في الصورة بدل نقل التفاصيل إلى النص المرافق.
قائمة تحقق عملية
- هل حددت المستويات الثلاثة قبل البدء، وهل في المستوى الأول عنصر واحد فقط؟
- هل الفروق في الحجم والوزن بين المستويات واضحة ومقصودة؟
- هل لون التمييز محصور في عنصر أو اثنين؟
- هل تبدأ القراءة من الجهة الصحيحة لاتجاه اللغة؟
- هل العناصر المرتبطة مجمّعة، والمسافات تعبّر عن العلاقات بينها؟
- هل يستند التصميم إلى شبكة واضحة، معكوسة في النسخة العربية؟
- هل نجح التصميم في اختبار التمويه واختبار الثواني الخمس على الهاتف؟
ولمراجعة المبادئ الأساسية التي يقوم عليها التسلسل البصري، ارجع إلى الدليل الشامل للتصميم الجرافيكي.
