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

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

مفهوم التسلسل الهرمي البصري
جدول المحتويات

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

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

التصميم  و الاتصال البصري

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

كيف ينظر البشر للأشياء من منظور مفهوم التسلسل الهرمي البصري؟

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

والآن لعلك تتساءل ما أهمية مفهوم التسلسل الهرمي البصري للمصممين؟، وخاصة مصممي مواقع الويب، تابع معي لتتعرف على السبب.

لماذا يعتبر مفهوم التسلسل الهرمي البصري مهماً لمصممي المواقع الإلكترونية؟

ما هو الـ Visual hierarchy؟

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

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

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

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

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

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

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

ما هو الـ Visual hierarchy؟

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

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

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

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

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

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

إن مفهوم التسلسل الهرمي البصري الناجح يساهم في نجاح أي تصميم مهما كان نوعه، وذلك من خلال توفير اللبنات الأساسية فيه. وهي على النحو التالي:

  • الحجم

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

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

  • المحاذاة

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

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

  • اللون

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

  • التباين

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

  • التقارب

من بعد أن عرفنا ما هو الـ Visual hierarchy؟، من المؤكد أنك ترى بأن التقارب وهو أحد أدوات تطبيق مفهوم التسلسل الهرمي البصري. مبدأً مهماً جداً لتحقيق القرب بين العناصر في أي تصميم. بحيث يخلق مبدأ الهرمية الفرعية بصورة مثالية، فمثلاً التقارب أو القرب طريقة سريعة لربط محتوى مماثل ببعضه. إذ قد تجد أنواعاً معينة من المحتوى قائمة فقط على مبدأ القرب من بعضها البعض. وعلى سبيل المثال في موقع “TUTS” يفصل المحتوى بالعمود الأيسر بشكل واضح، في حين يتم وضع البيانات الوصفية في بلوك له وظيفة معينة.

  • الكثافة والمساحة البيضاء

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

  • الملمس والأناقة

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

  • التكرار

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

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

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

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

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

  • نمط F:

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

  • نمط Z:

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

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

كيفية تطبيق مفهوم التسلسل الهرمي البصري في التصميم

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

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

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

ماذا تعني الوحدة في التصميم  “Unity”؟

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

  • المستوى الكلي وهو يتعلق بفكرة التصميم والصفات الأساسية له.
  • المستوى الجزئي ويمثل مجموعة الأجزاء الأصغر التي يتكون منها التصميم الكلي بحيث تؤثر على بعضها البعض لتكوين علاقة متبادلة فيما بينها.

مفهوم الوحدة في التصميم

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

دور وحدة التصميم في صنع الجمال

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

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

ما هي عناصر ومبادئ التصميم؟

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

المسارات البصرية في التصميم

  • التماثل/التباين “Symmetry/Asymmetry

ويندرج تحته العديد من الأمور مثل:

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

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

  • التكرار

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

  • الوحدة

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

تعرف على أفضل طرق دمج مبادئ مفهوم التسلسل الهرمي البصري في تصميمات تجربة المستخدم

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

  • استخدام مفهوم التسلسل الهرمي البصري يساعدك في إعطاء الأهمية للعناصر بحسب تأثير كل عنصر. وكلما زادت عدد العناصر ذات الأكثر أهمية زادت صعوبة تحسين التصميم. ولكن مع توظيفك لمعايير مفهوم التسلسل الهرمي البصري ستركز أكثر على الشيء الأكثر أهمية ما سيدفع تصميمك نحو النجاح بكل تأكيد.
  • من المؤكد أنك مررت بأشخاص يعتبرون كل العناصر في تصميم واجهة المستخدم ذات أهمية قصوى. ومنهم من يقول:
  1. “نحن بحاجة إلى أن يكون العنوان أكبر ، لذلك هذا هو أول شيء يرونه.”
  2. “لنجعل بعض هذه العناصر جريئة حتى تبرز فوق العناصر الأخرى.”
  3. “هل يمكننا تدوير هذا النص وجعله كبيرًا حتى يلفت الانتباه إلى القارئ؟”
  4. “ماذا لو استخدمنا اللون البرتقالي في الخلفية لجعله ينبثق؟”

وأيضاً..

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

الوحدة في التصميم

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

التطبيق الخاطئ لمفهوم التسلسل الهرمي البصري “فشل التسلسل الهرمي”

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

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

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

في الختام..

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

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

مشاركة المقال :