مفهوم ” التسلسل الهرمى البصرى” لتصميم المواقع، النظرية والتطبيق
مفهوم التسلسل الهرمى
مصطلح “التسلسل الهرمى” بشكل عام يعنى ترتيب مجموعه من العناصر( اسماء ، قيم ، تصنيفات …الخ) من أعلى لأسفل وفق معيار محدد ( الحجم، الأهمية، الشكل … الخ). اكثر مثال بصرى يوضح هذا المصطلح هو الهرم.
“التسلسل الهرمى البصرى” هو احد اهم المبادئ وراء نجاح واجهات المواقع الكبرى، هذا المقال سوف يختبر الأثر الذى يتركة تطوير واجهات المواقع وفق هذا المفهوم، النظرية التى تقف وراء هذا المفهوم ، وكيف يمكنك تطبيق هذا المفهوم بشكل عملى على تصميم المواقع؟
التصميم الجرافيكى = التواصل مع المستخدم/المشاهد
التصميم الالكتروني اوالجرافيك ديزاين Graphic Design هو فى جوهرة طريقة للتواصل مع الناس، فالتخصص الحقيقى للمصمم هو الاتصال البصرى Visual Communication. لكى تكون مصمم ناجح يجب ان تكون قادراً على توصيل فكرتك للناس فى صورة بصرية ناجحة. العصر الذى نعيش فيه هو عصر تغلب علية الصورة اكثر من اى شئ آخر، اذا قدمت لمستخدم الويب كتلة نصية هائلة من المعلومات فان ٩٩ شخص من كل ١٠٠ لن يقرأها … لماذا؟ لان الكثير من المستخدمين يفكرون بطريقة بصرية Visual Thinkers.
كيف ننظر للأشياء؟
لنتأكد من هذة المعلومة يجب أولاً ان نعرف كيف ننظر نحن البشر للأشياء؟ الناس لا يمكن ان نسميهم “مشاهدين متكافئين الفرص” اى انهم لا يعدلون في مشاهدتهم للاشياء، فنحن لا نحكم علي الاشياء بالمنطق! …. كيف؟
المستخدمين يقسمون الاشياء التي يشاهدونها وفق مبدأ “ العلاقات البصرية Visual Relationships ” فكل مجموعة من العناصر يجمعها الدماغ فى تصنيف واحد وفق معيار محدد ( اللون ، الحجم … الخ )
فلنشاهد الصورة التالية :-
visual relationships | العلاقات البصرية للأشياء
ماذا يخبرك عقلك عند مشاهدة هذة الصورة ؟ سيقول لك “ هذة الصورة ليست عبارة عن دائرتين وانما دائرة سوداء كبيرة واخرى حمراء صغيرة! ”
السبب بسيط: عندما تقدم لك تلك الصورة التى تحتوى على دائرتين، عقلك لن يراهم دائرتين ولكن سيحاول ايجاد طريقة تساعدة على التفريق بين هاتين الدائرتين! احداهما قد تكون كبيرة او لونها مختلف. هذة الاختلافات التى يحاول عقلنا توليدها هى التى تمنحنا فرصة للتفريق بين الآشياء بل واعطائها معانى خاصة بها.
فلنشاهد صورة اكثر تعقيداً:
visual relationships | العلاقات البصرية للأشياء
التعقيد فى الصور والمرئيات يجبرنا لا اراديا على محاولة “تصنيف” الآشياء التى نراها، عقلك لن يحاول معرفة عدد الدوائر او المربعات الموجودة فى الصورة ولكن سيري اشياء باللون الاسود وأخرى بألوان مختلفة. فأوجة الشبة والإختلاف بين العناصر اصبحت الإطار الذى نرى منة الاشكال …
- الاختلاف في الحجم: يخبرنا أن عنصر واحد “المربع الاسود الكبير” هو أقرب إلينا من العناصر الآخرى “الدوائر الاخري” أو أن كائن واحد هو أكثر هيمنة من العناصر الأخرى.
- الاختلاف في اللون: يخبرنا ان عنصر واحد يحمل مميزات فريدة عن غيرة من العناصر الموجودة فى محيطة.
الشكل واللون والحجم يمكن استخدامهم لإيصال رسائل بصرية محددة للمستخدمين تغنى عن المئات من الكلمات
ما علاقة هذا بالويب؟!
التصميم للويب هو جزء من التصميم الجرافيكى، وبالتالى فان البشر ينظرون للمواقع وفق المبادئ نفسها التى ينظرون بها لاى تصميم جرافيكى آخر مع اختلافات بسيطة تتعلق بالوسيط وهو جهاز الكمبيوتر وطبيعة عرض النصوص والصور للويب.
تصميم المواقع يجب ان يضع مبدأ العلاقات البصرية فى اولويات التصميم حتى يستطيع ان يوصل الفكرة و المعلومة بصورة بصرية ناجحة. فلا يكفى وضع كتل نصية صماء فى المواقع وواجهاتها، مهمة مصممين المواقع ان يكسروا ذلك الملل ويحولون تلك النصوص الى قطع لذيذة من المعلومات في شكل صور مرئية والتى من السهل على المستخدمين ترجمتها وفهمها وفق تفكيرهم البصرى Visual Think.
التسلسل الهرمى البصرى
هناك العديد من الأمثلة التى توضح مفهوم العلاقات البصرية للأشياء، اذا كنت من الباحثين فى علم الانثروبولوجيا وهو علم دراسة الانسان فبالتأكيد ستخلص الى ان ادراك الانسان البدائى لمفهوم العلاقات البصرية بصورة فطرية هى مهارة اكتبسها لكى يبقي نفسة على قيد الحياة.
اتري ! الرجل من العصور الوسطي يحترم التباين البصري للحيوانات
التسلسل الهرمى البصرى ببساطة هى الطريقة التى تستخدمها ادمغتنا لتصنيف المعلومات والعناصر والاشياء التى نشاهدها كل يوم، ولأن نجاح اى موقع مرهون بقابلية استخدامة عند زوار الموقع فيجب ان يكون متوافق مع طبيعة رؤيتهم للأشياء. فإيجاد روابط بين الأشياء وخلق علاقات بينها هو من طبيعة البشر تماماً مثل الاكل والشرب، ومهما كانت المعلومات المقدمة بسيطة او موجزة، فبتنظيمها وفق مبدأ التسلسل الهرمى سيحولها الى معلومات اكثر فاعليه من غيرها.
مثال لتوضيح مفهوم التسلسل الهرمى البصرى على النصوص :-
مفهوم التسلسل الهرمي البصري علي النصوص
في الصورة السابقة نرى ابسط تطبيق لمفهوم التسلسل الهرمى البصرى على النصوص، فى كلتا الفقرتين المعلومات المكتوبة واحدة، المثال الثانى تم كسر الجمود الموجود فى المثال الأول فتغيرت الطريقة التى ينظر بها المستخدم الى النص، عندما نتحدث عن تطبيق مفهوم التسلسل الهرمى البصرى للنصوص فاننا نعنى ( المسافات بين النصوص، التشابة فى تنسيق النص بين العناوين التى تتبع تصنيف محدد، اختلاف الالوان، اختلاف الخطوط Fonts المستخدمة …. الخ) التسلسل الهرمى يعطى اولوية القراءة للعناوين المميزة عن الفقرة المكتوبة بحجم اقل. العناوين تخطف البصر قبل الفقرة.
بناء العلاقة البصرية عن طريق الألوان
عندما تلون عدة عناوين باللون الاحمر وتلون مجموعة اخرى من العناوين باللون الازرق، فدماغياً العقل يترجم تلك العلاقة البصرية، فيفهم ان كل لون يعنى تصنيف مختلف حتى لو لم تذكر ذلك بشكل مباشر.
كل ماسبق عبارة عن مبادئ اساسية لمفاهيم التسلسل الهرمى البصرى، الاتصال البصرى ومفهوم بناء العلاقات البصرية بين العناصر. سننتقل الي امثلة وتقنيات اكثر عملية وعمقاً لتطبيق تلك المفاهيم بشكل عملى على تصميماتنا الحديثة للويب …
أدوات تطبيق مفهوم التسلسل الهرمى البصرى
الادوات التى نستخدمها لتطبيق هذا المفهوم ليست ابتكارات جديدة ولكن تقنيات واساليب بسيطة كل مصمم مواقع يستخدمها يوميا، الأدوات التى يستخدمها كل النجارين فى صناعتهم واحدة ( الشاكوش، الكماشه، المسامير … الخ ) ولكن الطريقة التى يستخدمون بها الأدوات؟ وما ينتجونه بها هو ما يحدث الفرق بين النجار المبدع والآخر العادى …
الحجم
العناصر ذات الحجم الأكبر فى التصميم يعطيها الدماغ الأولوية قبل غيرها فى النظر والإهتمام، استخدام الحجم لتطبيق مفهوم التسلسل الهرمى البصرى لهو طريقة فعالة لكى تقود عين المستخدم من العناصر الأكثر اهمية فى واجهة الموقع الى العناصر الأقل أهمية، تقنية ” الحجم ” من اكثر الأدوات المستخدمة فى تنظيم المعلومات وعرضها بصور بصرية ناجحة.
تعليمات هامة عند تطبيق هذة الأداة: يجب ان يكون العنصر الاكبر فى الحجم هو العنصر الاكثر أهمية مثل اسم الموقع او قائمة الموقع الرئيسية … الخ
اللون
الألوان ستظل دائما ملكة على ادوات تنظيم المعلومات وعرضها بصرياً، إستخدامك للألوان بطريقة صحيحة سيسهل كثيرا على المستخدم فى التنقل بين المعلومات التى تعرضها على موقعك، يجب ان تستخدم الألوان بشكل صحيح فمثلاً يجب الا تظهر رسالة خطأ فى التسجيل باللون الازرق! يجب ان تكون باللون الاحمر لانه اصطلح على هذا اللون انه لون رسائل الخطأ.
الألوان لها تأثيرات نفسية مختلفة على المستخدم مثلاً غالبية المطاعم تستخدم اللون الاحمر فى لون علامتها التجارية، لماذا؟ اللون الأحمر يملك تأثيرات مختلفة على غدد الجسم، وبالتالى فهو ينشط خلايا الجسم ويرفع من طاقتها مما يدفعك للأكل والجوع وهو ما تحتاجة المطاعم تحديداً لكى تبتاع منها!
التباين
التباين اللونى او الحجمى يبين العناصر الاكثر قرباً والتى تتقارب في مستوى الأهمية البصرية، التحولات الهائلة فى احجام النصوص او درجات الألوان كآن تنتقل من لون الى لون مختلف تماما فى نفس التصميم، هذا التكنيك يخبر المشاهد انه هناك شيئاً مختلفاً قادم ويتطلب منه الإهتمام.
تعليمات هامة عند تطبيق هذة الأداة: التحولات الهائلة الخطأ في درجات الألوان لواجهات الموقع قد ترسل رسائل مفادها الفوضاوية في الموقع، يجب ان تجعل تلك التحولات اللونية الهائلة بين الاقسام الرئيسية للواجهة مثل الهيدر والفوتر مثلا.
المحاذاة والتقارب
قرب او بعد عناصر واجهة الموقع من بعضها البعض، يرسل رسالة ضمنية للزائر الموقع مفادها ان العناصر القريبة من بعضها تندرج تحت تصنيف واحد والبعيدة عن بعضها تندرج تحت تصنيف آخر مختلف …. وهكذا. المحاذاة ايضاً تعنى وضع كل عنصر من عناصر التصميم فى مكانة الصحيح فمثلاً زائر الموقع يتوقع انه فى اعلى الهيدر سيجد ( تسجيل الدخول، رابط للوحة التحكم، عربة التسوق … الخ ) فلا تجعل ظن المستخدم فى الموقع يخيب!
المحاذاة - لنفترض ان الصورة هى صفحة تسجيل بريد جديد في بريد الياهو، تقارب كل مجموعة من العناصر يعنى انها تندرج تحت تصنيف واحد حتى لو لم تعنون بذلك
كذلك يمكن استخدام المحاذاة بطرق ابداعية مختلفة لخلق خبرة جديدة للمستخدم فى تصفحة للموقع، مثل الصورة التالية:-
التكرار
المقصود بالتكرار هو تكرار تنسيق Format، لون او استخدام خط Font … لعنصرين مختلفين فى واجهة الموقع. المثال التالى يوضح مفهوم التكرار …
مفهوم التكرار لانشاء العلاقات البصرية بين الأشياء
في الصورة السابقة تجد فقرتين بنفس اللون والتنسيق (نفس خط المستخدم ونفس اللون) وبينهم عنوان نصى بلون وتنسيق مختلف، الرسالة التى سيفهمها العقل هى ان الفقرتين اللتان بنفس اللون هما عنصر واحد والسطر المكتوب باللون الاحمر هو عنصر آخر مختلف.
كثافة العناصر و المساحات البيضاء فى التصميم
لا تزحم واجهة الموقع بكثرة الصور والأيقونات، ايضا لا تحاول تشتيت نظر المستخدم باستخدام درجات لونية حادة وبعيدة عن مثيلاتها فى دائرة الألوان . “الصخب اللونى” يعادى الهدف الرئيسى للموقع وهو سهولة استخدامة.
لتوضيح اهمية استخدام المساحات البيضاء … نحتاج الى موضوع منفصل يبين مدى اهمية تلك المساحات وأثرها على تجربة المستخدم، لكن ايجازا المساحات البيضاء تساعد على راحة العين وتحسن من انقرائية النص، وتساعد على التركيز على المحتوى ولا تشتت المستخدم ….
التطبيق الخاطئ لمفهوم التسلسل الهرمى البصرى
التسلسل الهرمى البصرى الناجح لايعنى تطبيق اكثر تأثيرات برنامج الفوتوشوب احترافية ولكن يعنى بتنظيم المعلومات بطريقة قابلة للإستخدام ، قابلة للوصول وان تعرض تلك المعلومات بطريقة منطقية يفهمها كل زائر للموقع.
من المهم ان ندرك ان استخدام التسلسل الهرمى البصرى داخل تصميم واجهات المواقع لهو سلاح ذو حدين، الآن افكر فى اعلانات الفلاش المزعجة، النوافذ المنبثقة والإعلانات المتحرك ذات الخلفية السوداء والتى ابتلى بها الويب على مر السنين، قد تنجح تلك الاعلانات فى جذب انتباه الزائر ولكنها تفشل فى ترك خبرة جيدة لدية عند تصفح الموقع .
لماذا يعتبر مفهوم “التسلسل الهرمى البصرى” هام لمصممين المواقع؟
مع فهمنا للطبيعة التى تعالج بها ادمغتنا للمعلومات البصرية التي تعرض علينا يوميا، ومع ذلك التسونامى من العناصر البصرية التى نشاهدها كل يوم اصبحنا نمتلك حساسية تجاة تلك الواجهات التى تفتقر للتسلسل الهرمى الصحيح، لايمكن ان تتوقع من مستخدم الانترنت الحالى ان يغفر لك غفواتك فى تنظيم المعلومات فى واجهة الموقع، فقد اثبتت الدراسات ان مستخدمين الانترنت تعودوا على ” المسح البصري او Visual Scan ” بل واكتسبوا الخبرة فى التفريق بصريا بين المعلومات المهمة والغير مهمة.
بسبب تلك الحقائق يجب ان تحترف وتتقن ترتيب عناصر واجهة الموقع الذى تقوم بتصميمة فهذا لم يعد خياراً بعد الآن لقد اصبح اجباراً، فبعد ظهور الوسائط المختلفة لتصفح الانترنت من الموبايل ثم الأجهزة اللوحية وأخيراً القارئ الالكترونى، اصبح واجب عليك ان تضع ذلك المفهوم ضمن اولويات وادوات العمل لديك.
تم ترجمة هذا المقال من موقع WebDesignTut+ مع اضافة وجهة نظر الكاتب وأمثلة اكثر قربا لتوضيح الفكرة، رابط المقال الأصلى هنا .
