هذا المقال هو ترجمة لمقال Understanding Visual Hierarchy in Web Design من موقع WebDesignTut+ مع إضافة وجهة نظر الكاتب وأمثلة أكثر قرباً لتوضيح الفكرة.

مصطلح “التسلسل الهرمى” بشكل عام يعني ترتيب مجموعه من العناصر(أسماء ، قيم ، تصنيفات …إلخ) من أعلى لأسفل وفق معيار محدد  (الحجم، الأهمية، الشكل … إلخ). أكثر مثال بصري يوضح هذا المصطلح هو الهرم. “التسلسل الهرمي البصري” هو أحد أهم المباديء وراء نجاح واجهات المواقع الكبرى، هذا المقال سوف يختبر الأثر الذي يتركه تطوير واجهات المواقع وفق هذا المفهوم، النظرية التي تقف وراء هذا المفهوم، وكيف يمكنك تطبيق هذا المفهوم بشكل عملي على تصميم المواقع؟

التصميم الجرافيكى = التواصل مع المستخدم/المشاهد

التصميم الالكتروني أوالجرافيك ديزاين Graphic Design هو في جوهرة طريقة للتواصل مع الناس، فالتخصص الحقيقي للمصمم هو الاتصال البصري Visual Communication. لكي تكون مصمم ناجح يجب أن تكون قادراً على توصيل فكرتك للناس في صورة بصرية ناجحة، العصر الذي نعيش فيه هو عصر تغلب عليه الصورة أكثر من أي شيء آخر، إذا قدمت لمستخدم الويب كتلة نصية هائلة من المعلومات فإن ٩٩ شخص من كل ١٠٠ لن يقرأها … لماذا؟ لأن الكثير من المستخدمين يفكرون بطريقة بصرية Visual Thinkers.

كيف ننظر للأشياء؟

لنتأكد من هذه المعلومة يجب أولاً أن نعرف كيف ننظر نحن البشر للأشياء؟ الناس لا يمكن أن نسميهم “مشاهدين متكافئين الفرص” أي أنهم لا يعدلون في مشاهدتهم للأشياء، فنحن لا نحكم على الأشياء بالمنطق! …. كيف؟

المستخدمين يقسمون الاشياء التي يشاهدونها وفق مبدأ “العلاقات البصرية Visual Relationships” فكل مجموعة من العناصر يجمعها الدماغ في تصنيف واحد وفق معيار محدد (اللون ، الحجم … إلخ)

فلنشاهد الصورة التالية:-

ماذا يخبرك عقلك عند مشاهدة هذه الصورة؟ سيقول لك “هذه الصورة ليست عبارة عن دائرتين وإنما دائرة سوداء كبيرة وأخرى حمراء صغيرة!”

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

فلنشاهد صورة أكثر تعقيداً:

التعقيد في الصور والمرئيات يجبرنا لا إراديا على محاولة “تصنيف” الآشياء التي نراها، عقلك لن يحاول معرفة عدد الدوائر أو المربعات الموجودة في الصورة ولكن سيرى أشياء باللون الاسود وأخرى بألوان مختلفة، فأوجة الشبة والإختلاف بين العناصر أصبحت الإطار الذي نرى منه الاشكال …

• الاختلاف في الحجم: يخبرنا أن عنصر واحد “المربع الاسود الكبير” هو أقرب إلينا من العناصر الآخرى “الدوائر الاخري” أو أن كائن واحد هو أكثر هيمنة من العناصر الأخرى.
• الاختلاف في اللون: يخبرنا أن عنصر واحد يحمل مميزات فريدة عن غيره من العناصر الموجودة في محيطة. 

الشكل واللون والحجم يمكن إستخدامهم لإيصال رسائل بصرية محددة للمستخدمين تغني عن المئات من الكلمات

ما علاقة هذا بالويب؟!

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

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

التسلسل الهرمي البصري

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

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

مثال لتوضيح مفهوم التسلسل الهرمي البصري على النصوص:-

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

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

كل ماسبق عبارة عن مباديء أساسية لمفاهيم التسلسل الهرمي البصري، الإتصال البصري ومفهوم بناء العلاقات البصرية بين العناصر، سننتقل إلى أمثلة وتقنيات أكثر عملية وعمقاً لتطبيق تلك المفاهيم بشكل عملي على تصميماتنا الحديثة للويب…

أدوات تطبيق مفهوم التسلسل الهرمي البصري

الأدوات التي نستخدمها لتطبيق هذا المفهوم ليست إبتكارات جديدة ولكن تقنيات وأساليب بسيطة كل مصمم مواقع يستخدمها يومياً، الأدوات التي يستخدمها كل النجارين في صناعتهم واحدة  (الشاكوش، الكماشة، المسامير … إلخ) ولكن الطريقة التي يستخدمون بها الأدوات؟ وما ينتجونه بها هو ما يحدث الفرق بين النجار المبدع والآخر العادي…

الحجم

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

تعليمات هامة عند تطبيق هذه الأداة: يجب أن يكون العنصر الأكبر في الحجم هو العنصر الأكثر أهمية مثل أسم الموقع أو قائمة الموقع الرئيسية  … إلخ

اللون

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

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

التباين

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

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

المحاذاة والتقارب

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

كذلك يمكن إستخدام المحاذاة بطرق إبداعية مختلفة لخلق خبرة جديدة للمستخدم في تصفحة للموقع، مثل الصورة التالية:-

التكرار

المقصود بالتكرار هو تكرار تنسيق  Format، لون أو إستخدام خط Font … لعنصرين مختلفين في واجهة الموقع، المثال التالي يوضح مفهوم التكرار…

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

كثافة العناصر و المساحات البيضاء في التصميم

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

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

التطبيق الخاطيء لمفهوم التسلسل الهرمي البصري

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

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

لماذا يعتبر مفهوم “التسلسل الهرمي البصري” هام لمصممين المواقع؟

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

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

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