لإنشاء تسلسل هرمي بصري صحيح، فانت تحتاج لفهم كيف تعالج أعيننا المعلومات، Chris Bank

موقع الويب هو شكل من أشكال الفن البصري بحد ذاته، ويتبع الكثير من نفس القواعد التقليدية. فهو علم جمالي، مخلوط مع مبادئ الأعمال (business).

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

التنظيم البصري

في تقرير عن التواصل مع التسلسل الهرمي البصري لـ “Luke Wroblewski” (كاتب ومدير بارز في تصميم المنتجات في ياهو)، يوضح أن العرض البصري في واجهة الويب ضروري لــ:

إبلاغ المستخدمين – ينبغي للواجهة أن تقوم بتوجيه المستخدمين من إجراء إلي آخر بسهولة ويسر مثل اليد الخفية.

ايصال علاقة المحتوي – ينبغي أن تقدم الواجهة المحتوي بطريقة تطابق أولويات المستخدمين. علي سبيل المثال، تصميم موقع Abduzeedo يتضمن تصنيفات رئيسية في الأعلي، ومحتوي مميز في الوسط، والتصنيفات بالتفصيل في الأسفل.

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

الهدف النهائي من تصميم واجهة المستخدم الخاصة بك هو الإجابة عن ثلاثة أسئلة:

• ما هذا؟ (الفائدة والنفع “Usefulness”)
• كيف يمكنني استخدامه؟ (سهولة الاستخدام “Usability”)
• لماذا يجب علي أن أهتم؟ (الرغبة “Desirability”)

 القدرة علي التنبؤ بعين الإنسان

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

المصدر : Nielson Norman Group – www.nngroup.com/articles/f-shaped-pattern-reading-web-content

في مقال عن المبادئ البصرية لـ (Alex Bigman)، يتحدث عن اثنين من أنماط القراءة السائدة للثقافات الذين يقرأوا من اليسار إلي اليمين. فدعونا ننظر في كل منهما.

1. نمط الـ F

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

عندما يجد القارئ شئ يحبه أو يثير اهتمامه، فيبدأ القراءة بشكل طبيعي، مشكلا خطوط أفقية وتكون النتيجة النتيجة النهائية شئ مشابه لحرف الـ F أو E . ومواقع ال CNN و نيويورك تايمز كليهما يستخدموا نمط الـ F .

أجري جاكوب نيلسون دراسة عن قابيلة وسهولة القراءة (readability) بناء علي 232 مستخدم يقوموا بفحص آلاف من المواقع ويتناول بالتفصيل الآثار العملية لنمط F:

• المستخدمين نادر ما يقرأوا كل كلمة في النص.
• أول فقرتين هم الأكثر أهمية، وينبغي أن يحتوي علي عامل الجذب (hook).
• ابدا بالفقرات، ثم العناوين الفرعية.

كيف يمكن أن يؤثر علي تصميم الواجهة لموقعك؟ انظر للصورة أدناه.

المصدر

تستطيع أن تري في الصورة أن المحتوي الأكثر أهمية يمكن رؤيته في خلال ثوان فقط، مع محتوي أكثر تفصيلا ودعوة للفعل  (call to action) تعرض أسفله مباشرة لمسح سريع (quick scanning).

نمط الـ F يكون مفيد جدا للمواقع التي تريد اضافة اعلانات أو دعوة لفعل (call to action) بطريقة لا تطغي (overwhelm) علي المحتوي. وتذكر دائما أن المحتوي هو الملك، والشريط الجاني موجود ليتعمق المستخدمين أكثر في الموقع. كما هو الحال مع جميع الأنماط، فنمط الـ F  هو مبدأ توجيهي (guideline) – وليس نموذج – لأن نمط الـ F يمكن أن يشعر بالملل بعد الصفوف العليا من الـ F .

2. نمط الـ Z

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

المصدر

ينطبق نمط الـ Z علي أي واجهة ويب تقريبا، لأنه يعالج متطبيات الموقع الأساسية كالتسلسل الهرمي والبراندينج (branding)، والدعوة للفعل(call to action). ونمط الـ Z مناسب جدا للواجهات التي تتطلب البساطة.

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

• الخلفية – افصل الخلفية لإبقاء المستخدم ضمن إطار العمل (framework).
• نقطة #1- هذا هو الموقع المميز لشعارك.
• نقطة #2- اضافة دعوة لفعل (call to action) ملونة ثانوية يمكن أن يساعد ويرشد المستخدمن خلال نمط الـ Z .
• وسط الصفحة – سلايدر لصور مميزة في وسط الصفحة يفصل القسم العلوي عن السفلي ويوجه عيون المستخدمين علي مسار الـ Z.
• نقطة #3-  إضافة أيقونات تبدأ من هذه النقطة وتتحرك علي طول المحور السفلي يمكن أن يوجه المستخدمين إلي الدعوة إلي الفعل (call to action) الأخيرة في النقطة 4 .
• نقطة #4-  هذا هو خط النهاية، ويكون مكان مثالي لوضع الدعوة إلي الفعل الرئيسي (primary Call to Action).

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

يمكنك توسيع وتمديد نمط الـ Z في جميع أنحاء الصفحة، عن طريق تكرار النقاط من 1-4 اذا كنت تشعر بأن هناك المزيد من الاقتراحات القيمة قبل الدعوة إلي الفعل (call-to-action).

 المصدر