فهم التسلسل الهرمي المرئي في تصميم الويب

التسلسل الهرمي المرئي هو واحد من أهم المبادئ وراء تصميم الويب الفعال. ستدرس هذه المقالة أهمية وضع التسلسل الهرمي المرئي على الويب ، والنظرية وراءه ، وكيف يمكنك استخدام بعض التمارين الأساسية في التصميمات الخاصة بك لوضع هذه المبادئ موضع التنفيذ.

التصميم = الاتصال

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

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

هي احتمالات ، لا ترى "دائرتين" ؛ بدلاً من ذلك ، رأيت "دائرة سوداء واحدة ودائرة حمراء أصغر".

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

لنلقِ نظرة الآن على صورة أكثر تعقيدًا:

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

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

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

فجر التسلسل الهرمي

هناك مائة تفسير لماذا يرى الناس من حيث العلاقات ؛ إذا كنت ستتبع أثرها من الناحية الانثربولوجية ، فقد تخلص إلى أن عقلية الصيد والجذب أجبرت البشر في مرحلة معينة على الاعتراف بأن رؤية العلاقات هي مهارة البقاء.

انظر ، حتى رجل ما قبل التاريخ كان لديه احترام صحي للتباين البصري.

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

خذ بعين الاعتبار الصورة التالية من كتل النص:

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

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

مربع أدوات التسلسل الهرمي

إن فهم أن التسلسل الهرمي المرئي مهم هو شيء جيد وجيد ، ولكن كيف يقوم المصمم بإنشاء ذلك بالفعل؟ "الأدوات" التي سننظر إليها بسيطة مثل أدوات نجار - مطرقة ، مسمار ، منشار ، إلخ - إن ما تفعله معهم هو ما يهم!

بحجم

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

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

اللون

اللون أداة مثيرة لأنه يمكن أن يعمل كأداة تنظيمية بالإضافة إلى أداة شخصية. ستتطلب الألوان المتناقضة الجريئة على عنصر معين من موقع الويب الانتباه (مثل الأزرار أو رسائل الخطأ أو الارتباطات التشعبية). عند استخدامهاكأداة شخصية ، يمكن أن يمتد اللون إلى أنواع أكثر هرمية من التسلسل الهرمي ؛ باستخدام الألوان الخصبة والمريحة يمكن أن يجذب نداءً عاطفيًا إلى صفحة. يمكن أن يؤثر اللون على كل شيء من العلامة التجارية لمواقع الويب (على سبيل المثال: CocaCola Red) إلى الرمزية (على سبيل المثال: الألوان الباردة والخافتة). يمكن استخدام التطبيقات المتقدمة للون "لتصنيف" المعلومات داخل التسلسل الهرمي ، كما في المثال التالي:

يستخدم موقع Spectra Viewer ألوانًا لتمثيل فئات الأخبار المختلفة ، لذلك من السهل العثور على نوع معين من المعلومات استنادًا إلى مفتاح اللون.

تناقض

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

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

انتقام

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

يستخدم قالب Stuff نظام محاذاة أفقيًا فريدًا لفصل العلامة التجارية والتنقل من محتوى مشاركة المدونة.

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

تكرار

التكرار يعين المعنى النسبي للعناصر ؛ إذا كان نص "الفقرة" رماديًا ، فعندما يرى المستخدم كتلة جديدة من النص الرمادي ، يمكن أن يفترض أنه فقرة أساسية أخرى ؛ عندما يواجه ذلك المستخدم نفسه رابطًا أزرقًا أو عنوانًا أسود ، يمكنه أن يفترض بأمان أنه مختلف وفريد ​​عن النص الرمادي.

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

قرب

يفصل الاقتراب العناصر عن بعضها البعض وينشئ التسلسل الهرمي الفرعي. في الصفحة قد تكون هناك أدوات مفصولة عن بعضها البعض بمسافة. ضمن هذه الأدوات هناك تسلسل هرمي جديد للعنوان ، والعنوان الفرعي ، والمحتوى. يعتبر Proximity أيضًا أسرع طريقة لربط محتوى مشابه. في المثال التالي ، من السهل العثور على أنواع معينة من المحتوى استنادًا إلى قربها من بعضها البعض.

مواقع Tuts + فعل هذا حقا جيد (لا toot قرننا الخاص!). يتم فصل العمود "المحتوى" الأيسر بشكل واضح بالقرب من مساحة عنصر واجهة المستخدم. علاوة على ذلك ، يتم وضع البيانات الوصفية داخل مشاركة مدونة معينة على مقربة من هذا المنشور ، وكذلك من الوظائف الأخرى ، مما يعزز الشعور "بالانتماء".

الكثافة والفضاء

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

من خلال تباعد العناصر وحفظ الكثير من المسافات البيضاء على الصفحة ، يجعل هذا التصميم من السهل على الأشخاص التجول هنا والعثور على مربعات صغيرة ومكتظة من المحتوى.

النمط والملمس

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

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

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

فشل التسلسل الهرمي

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

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

لماذا التسلسل الهرمي ذو صلة خاصة بمصممي الويب

"المصممين يمكن أن يخلقوا الحياة الطبيعية من الفوضى.يمكنهم التواصل بوضوح الأفكار من خلال تنظيم الكلمات والصور والتلاعب بها. "- جيفري Veen ، فن وعلوم تصميم المواقع

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

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

تمرين لاختبار التسلسل الهرمي المرئي

في الختام ، أود أن أختتم بممارسة بسيطة للغاية. على سبيل المثال ، سنستخدم موقعًا إلكترونيًا متكررًا أو مشروعًا كنت قد عملت عليه مؤخرًا ؛ التمرين يذهب هكذا:

1. اذكر نقاط المعلومات الأساسية التي يبحث عنها الزوار على الأرجح.
2. قم بتعيين قيم (1-10) وفقًا لأهميتها بالنسبة للزائر العادي.
3. الآن ، انظر إلى التصميم الفعلي مرة أخرى.
4. قم بتعيين قيم (1-10) وفقًا للأهمية المرئية الفعلية كما تراها في التصميم المباشر.
5. فكر في: هل تتوافق الأهمية المتوقعة مع الأهمية الفعلية الفعلية؟

في معظم الحالات ، ستتضمن الإجابة ظلال "لا". هناك الكثير من الأسباب لهذا - طلبات العملاء ، أو المصممين الذين لا يملكون الخبرة ، أو التصميم حسب اللجنة - أو مئات الأسباب الأخرى التي ربما قرأتموها. قد يرغب المصمم ، في بعض الحالات ، في تضليل المشاهد (ضع في اعتبارك موقعًا "مجانيًا" يحاول توجيه المستخدمين إلى محتوى مدفوع الأجر). أيا كان السبب ، فهم فهم التسلسل الهرمي المرئي ومحاولة تفسيره هو طريقة لتحسين طريقة رؤيتك لتصميم الويب في ضوء جديد تمامًا. نأمل أن يساعد ذلك في إبلاغ عملك الخاص أيضًا!