استخدام التسلسل الهرمي في تصور البيانات
التصميم الجيد أكثر من إبداعي ، يجب أن يكون استراتيجيا.
يجب أن يكون لدى المصمم المتمرس فهم لائق للميول الطبيعية للعيون البشرية. بدلا من رؤية كتل البيانات ، ترى العين عموما المعلومات بطريقة مرئية. هذا هو السبب في أننا كأطفال ، ستحتوي الكتب الأولى التي نقرأها على المزيد من الصور والكلمات بطباعة كبيرة. أنواع أخرى من الكتب مثل القصص المصورة أثقل في الصور بدلا من النصوص. تحتل المرئيات مركز الصدارة في سرد تسلسل الأحداث ، والنصوص تعمل فقط كمرافقة. ينتج عن هذا محتوى سهل القراءة وأسرع في الهضم للدماغ البشري.
باختصار ، يجب تنظيم المحتوى على أساس الأولوية، أو ضع “تسلسلا هرميا” من الأولوية القصوى إلى الأدنى. يجب أن يكون لدى المصممين عين حريصة على تنظيم المحتوى ، بهدف توجيه عيون المشاهدين بحيث يتم عرض المعلومات ذات الأولوية القصوى أولا. فكيف نفعل ذلك بالضبط؟
أنماط التسلسل الهرمي
عند تقديم صفحة جديدة ، هناك نمطان شائعان تقوم فيهما العين البشرية بمسح الصفحة وقراءتها – نمط Z ونمط F.
متى تستخدم أيهما؟
- يستخدم نمط Z بشكل شائع عندما يكون هناك مستوى منخفض من محتوى النص. سيقوم المستخدمون بمسح الصفحة ضوئيا من أعلى اليسار إلى أعلى اليمين ، وإلقاء نظرة خاطفة على المحتوى ، والانتقال إلى أسفل اليسار إلى أسفل اليمين. لتحقيق أقصى قدر من استخدام هذا النمط ، يمكن للمصمم وضع المحتوى الأكثر أهمية داخل الشكل “Z”.
- عادة ما يتم استخدام نمط F للمحتوى الثقيل النص أو محتوى الفيديو. سيبدأ المستخدمون في مسح الصفحة من أعلى اليسار إلى أعلى اليمين ، ثم يستمرون في النزول من الجانب الأيسر إلى الجانب الأيمن من الصفحة ، مرارا وتكرارا ، بحثا عن العناصر المرئية التي ستساعدهم على فهم المحتوى المكتوب. يستمر هذا النمط حتى يصلوا إلى أسفل الصفحة ، مما يؤدي إلى إنشاء خريطة حرارية تشبه الحرف “F”.
مبادئ التسلسل الهرمي
بغض النظر عن النمط الذي تختاره ، من المهم معرفة ماذا وكيف يتم التأكيد على العناصر الموجودة أعلى قائمة التسلسل الهرمي. في التصميم ، وخاصة تصور البيانات ، لا يمكن التأكيد على جميع الجوانب. لكي يبرز عنصر ما ، يجب أن يتلاشى الآخرون في الخلفية. تؤثر التفاصيل الدقيقة مثل الحجم أو الألوان أو الأشكال أو المعلومات التي يجب تضمينها – وربما الأهم من ذلك – استبعادها ، على التسلسل الهرمي للتصميم. دعونا نقسمها ، أليس كذلك؟
1. الحجم
تماما مثل عنوان الصحيفة ، كلما زاد حجم العنصر ، زاد جذب الانتباه. كلما زاد الاهتمام الذي يجذبه ، زاد تفاعل المشاهدين معه لأنه أول شيء يرونه.
في تصميم الويب ، ينص قانون فيتس على أنه من الأسهل التعامل مع الأشياء الأكبر حجما لأن الجهد المطلوب من المستخدمين للنقر عليها. فيما يتعلق بالنص والطباعة ، تحسب Smashing Magazine بعض متوسط الأحجام المناسبة للعناوين والنسخ الأساسية:
- تسديد بالرأس → 18-29 بكسل
- نسخة الجسم → 12-14 بكسل
2. اللون
كما أوضحنا بدقة في منشور المدونة هذا ، فإن الألوان المختلفة لها روابط نفسية مختلفة تؤثر على إدراك المشاهدين للأشياء. الألوان الزاهية هي بطبيعة الحال أكثر جاذبية للانتباه ، تليها الألوان الداكنة الغنية والصبغات الفاتحة. تقع الألوان الصامتة والخافتة في أسفل التسلسل الهرمي للألوان.
3. التخطيط والمحاذاة
يلعب التخطيط والمحاذاة مفتاحا رئيسيا في إخبار المستخدمين بصريا بما هو أكثر أهمية. على سبيل المثال ، سيؤدي وجود نص نص وشريط جانبي بجانبه إلى توجيه أعين المستخدمين عبر النص ، ثم الشريط الجانبي كمتابعة CTA (هذا صحيح بشكل خاص في تصميم الويب). تميل الأشياء الموضوعة في الأعلى أو smackdab في المنتصف أيضا إلى جذب أكبر قدر من الاهتمام للوهلة الأولى.
4. التكرار
يخبر تكرار الأنماط المشاهدين أن المحتوى عبارة عن وحدة. على سبيل المثال ، تمت كتابة منشور المدونة هذا بأسلوب متماسك. لنفترض أننا نعطل التخطيط المنظم ونستخدم نصا أحمر في هذه الفقرة ، فإنه سيكسر التكرار ويلفت الانتباه على الفور إلى العنصر المختلف – أي النص الأحمر. مثال آخر هو استخدام الارتباطات التشعبية. عادة ما يتم وضع خط تحت الروابط ، وأنت تعرف على الفور أنها قابلة للنقر.
5. القرب / التباعد
يخبر موضع عناصر التصميم المستخدمين بمدى احتمالية ارتباطهم. على سبيل المثال ، تحتوي هذه القائمة على رأس / عنوان ، ويتم فصل كل نقطة بصف من المسافات البيضاء. يظهر هذا القرب أو المسافة أن عناصر القائمة هذه منفصلة ولكنها ليست غير مرتبطة ببعضها البعض.
6. الملمس والأسلوب
يمكن أن يساعد استخدام أنماط ومواد مختلفة في تنويع التسلسل الهرمي للمحتوى بشكل مرئي. يمكن أن يؤدي استخدام خطوط مختلفة في المشروع ، أو خلفيات مزخرفة تضع بعضها البعض جنبا إلى جنب إلى توجيه أعين المستخدمين إلى العناصر الأكثر هيمنة.
7. التباين
يشير التباين إلى اختلاف القيمة بين الألوان. التباين الصارخ الذي يمكن أن تفعله بين لونين هو الأسود والأبيض. يمكن أن يؤكد التباين القوي على العناصر المهمة ، بينما يؤدي التباين الضعيف إلى مزج العناصر معا. قد يكون التباين القوي لافتا للنظر ومطلوبا لتحديد التسلسل الهرمي ، ولكن بدوره ، يكون التباين الضعيف أقل مواجهة ، وغالبا ما يستخدمه المصممون لإنشاء تصميم أكثر انسجاما قد يرغب المستخدمون في النظر إليه لفترة أطول.
___
يعد التسلسل الهرمي ، الذي يعد جانبا من جوانب التصميم مقوما بأقل من قيمته نسبيا ، أداة مهمة إذا كنت تتطلع إلى تقديم معلومات أساسية للمشاهدين للوهلة الأولى. تذكر أن التصميم الجيد لا يتطلب الإبداع فحسب ، بل يتطلب أيضا الاستراتيجية الكامنة وراءه.
