مفهوم “التسلسل الهرمي البصري” لتصميم المواقع، النظرية والتطبيق

كتبه أحمد مجدي 25 مارس 2012

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

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

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

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

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

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

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

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

visual relationships | العلاقات البصرية للأشياء
visual relationships | العلاقات البصرية للأشياء

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

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

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

visual relationships | العلاقات البصرية للأشياء
visual relationships | العلاقات البصرية للأشياء

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

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

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

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

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

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

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

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

اتري ! الرجل من العصور الوسطي يحترم التباين البصري للحيوانات
اتري ! الرجل من العصور الوسطى يحترم التباين البصري للحيوانات

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

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

مفهوم التسلسل الهرمي البصري علي النصوص
مفهوم التسلسل الهرمي البصري على النصوص

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

بناء العلاقة البصرية عن طريق الألوان
بناء العلاقة البصرية عن طريق الألوان

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

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

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

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

الحجم

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

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

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

اللون

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

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

موقع Spectra يستخدم الالوان في تصنيف الاخبار ، فكل تصنيف من الاخبار بلون محدد والاخبار التي تندرج تحت هذا التصنيف تكون بنفس درجات لون التصنيف الرئيسية وتزيد حدة اللون حسب توقيت نشرة ، الاخبار الحديثة بلون ذو حدة اعلي من الخبر القديم
موقع Spectra يستخدم الالوان في تصنيف الاخبار ، فكل تصنيف من الاخبار بلون محدد والاخبار التي تندرج تحت هذا التصنيف تكون بنفس درجات لون التصنيف الرئيسية وتزيد حدة اللون حسب توقيت نشرة ، الاخبار الحديثة بلون ذو حدة اعلي من الخبر القديم

التباين

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

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

التباين اللوني بين اجزاء الموقع الرئيسية (Header - Body - Footer) في موقع لمسة العرب ، هذا التباين يقود عين الزائر بسلاسة وانسيابية للانتقال بين اجزاء الموقع المهمة
التباين اللوني بين اجزاء الموقع الرئيسية (Header – Body – Footer) في موقع لمسة العرب ، هذا التباين يقود عين الزائر بسلاسة وانسيابية للانتقال بين اجزاء الموقع المهمة

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

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

المحاذاة - لنفترض ان الصورة هي صفحة تسجيل بريد جديد في بريد الياهو ، تقارب كل مجموعة من العناصر يعني انها تندرج تحت تصنيف واحد حتي لو لم تعنون بذلك
المحاذاة – لنفترض أن الصورة هي صفحة تسجيل بريد جديد في بريد الياهو، تقارب كل مجموعة من العناصر يعنى أنها تندرج تحت تصنيف واحد حتى لو لم تعنون بذلك

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

المحاذاة قد تستخدم لخلق خبرة جديدة للمستخدم في تصفحة للمواقع - هذا المثال تفرد الواجهة كل المساحة للقراءة فهي تحاول تركيز نظر زائر الموقع نحو المحتوي وفقط
المحاذاة قد تستخدم لخلق خبرة جديدة للمستخدم في تصفحة للمواقع – هذا المثال تفرد الواجهة كل المساحة للقراءة فهي تحاول تركيز نظر زائر الموقع نحو المحتوي وفقط

التكرار

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

مفهوم التكرار لانشاء العلاقات البصرية بين الأشياء
مفهوم التكرار لإنشاء العلاقات البصرية بين الأشياء

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

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

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

موقع فودافون مصر ، استطاع بنجاح توزيع العناصز الرئيسية للموقع بشكل رائع علي الرغم من حدة لون هوية شركة فودافون
موقع فودافون مصر ، استطاع بنجاح توزيع العناصز الرئيسية للموقع بشكل رائع علي الرغم من حدة لون هوية شركة فودافون

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

واجهة موقع siiimple تتبع منهج التبسيط في تصميم واجهات المواقع وهذا المنهج يستخدم المساحات البيضاء فيما يزيد عن ٧٥٪ من تصميم الموقع
واجهة موقع siiimple تتبع منهج التبسيط في تصميم واجهات المواقع وهذا المنهج يستخدم المساحات البيضاء فيما يزيد عن ٧٥٪ من تصميم الموقع

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

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

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

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

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

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

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

عن كاتب المقال

أحمد مجدي
مهندس تجربة الاستخدام، مدير المشروعات في نيوكسيرو ورئيس تحرير معمل ألوان، متخصص في تصميم واجهات مواقع ،تطبيقات الويب والموبايل منذ عام 2006. تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 13 تعليق

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

  • تداول العملات

    جزاكم الله الف خير على هذا الجهد العظيم

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

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

  • نشكرك أخي جزيل الشكر على هذه التدوينة الرائعة خاصة وأنني استفدت منها كثيرا خاصة في تصميم المواقع شكرا أخي الكريم

  • رائع جدا ً اخي الكريم , شكرا ً على هذه المقالة المميزة جدا ً جدا ً جدا ً سلمت يمناك ^_^

  • جزاك الله خيراً, أخي الكريم.

    مقالة مميزة, ومجهود واضح وكبير في كتابة واختيار المواضيع.

    وفقكم الله لكل خير.

  • شكراً لك على هذه المقالة المهمة, هذه المرة الاولى التي اسمع فيها عن اسم هذا الاسلوب ولكني استخدمه عملياً في تصميم عروض الباوربوينت فأنا شخصياً كمتصفح لا أقرأ ما أمامي إن تجاوز 5 اسطر دش ×_×
    ما شاء الله مدونة أكثر من رائعة, تقريباً نصف مقالات المدونة صارت في المفضلة xD

  • السلام عليكم

    شكرا على المقالة الرائعة والأسلوب العلمي والأكاديمي في الشرح لتغطية كافة أجزاء الموضوع

  • هل تساعدني في في اجابه هذا السؤال
    ماهي المعايير التي يتم اخذها في الحسبان عند تصميم موقع متوافق مع مبادي التسويق الالكتروني

    او بمعني اخر

    ماهي العلاقه بين تصميم الموقع والتسويق الالكتروني لهذا الموقع

    يعني لما احب اصمم موقع والموقع ده هاعمله تسويق الكتروني هل الديزاين بيكون مفهومه مختلف عن المواقع العاديه

    ارجو التواصل

  • لا استطيع القول الا انها رائعة !!
    شكراً احمد , نطمع بالمزيد منك

  • شكراً إلكم ، إنتوا ناس بتتعبوا بجد 🙂

    إستفدت جداً من المقال ، ربنا يكرمكم

اترك تعليقاً على المقال

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