أساسيات التسلسل البصري

01ماذا يفعل التسلسل البصري

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

02خمس أدوات

• الحجم

  العناصر الأكبر تجذب الانتباه أولًا.

• السماكة

  يبدو النص العريض أهم من العادي.

• التباين واللون

  التباين القوي ولون مميز واحد يجذبان العين.

• المسافات والتجميع

  تعزل المساحة البيضاء العنصر، ويجمع التقارب العناصر المترابطة.

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

تتجمع هذه الأدوات معًا. يمكن أن يكون العنوان أكبر وأعرض وفوقه مساحة أكبر، لكن يجب أن يكون لكل أداة إضافية سبب. ابدأ بالحجم والمسافات لأنهما الأهدأ، ثم أضف السماكة أو اللون إن بقي التسلسل غير واضح.

03اختبار تضييق العينين

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

احذف قبل أن تضيف. سحب التأكيد من العناصر المتنافسة يفلح غالبًا أكثر من رفع صوت العنصر الرئيسي.

04مثال قبل وبعد وأخطاء شائعة

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

1. سمِّ الشيء الأهم في الشاشة.
2. امنحه أقوى أداة، وغالبًا الحجم أو التباين.
3. خفّف العناصر المنافسة.
4. أجرِ اختبار تضييق العينين.

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

• عناصر عريضة كثيرة: حين يُؤكَّد كل شيء، لا يتأكد شيء.
• إجراءان رئيسيان متنافسان بالحجم واللون نفسيهما.
• مسافات متساوية في كل مكان، فتبدو العناصر المترابطة وغير المترابطة سواء.
• الاعتماد على اللون وحده للدلالة على الأهمية، وهو ما يفشل مع من يعانون من ضعف رؤية الألوان.

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

05المصادر

• Nielsen Norman Group. Visual Hierarchy in Web Design (article). https://www.nngroup.com/articles/visual-hierarchy-ux-definition/