استكشاف مبادئ تصميم الجشطالت

استمع إلى النسخة الصوتية من هذه المقالة

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

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

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

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

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

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

تشابه

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

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

في تصميم تجربة المستخدم ، فإن استخدام التشابه يوضح للزائرين العناصر المتشابهة. على سبيل المثال ، في قائمة الميزات التي تستخدم عناصر تصميم متكررة (مثل أيقونة مصحوبة بـ3-4 سطور من النص) ، سيسهل مبدأ التشابه المسح من خلالها. في المقابل ، فإن تغيير عناصر التصميم للميزات التي تريد إبرازها يجعلها تبرز ويعطيها أهمية أكبر في تصور الزائر.

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

استمرار

يفترض قانون الاستمرارية أن العين البشرية ستتبع المسار الأكثر سلاسة عند عرض الخطوط ، بغض النظر عن كيفية رسم الخطوط بالفعل.

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

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

إنهاء

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

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

غالبًا ما يتم استخدام الإغلاق في تصميم الشعار ، مع أمثلة أخرى بما في ذلك تلك الخاصة بشبكة USA Network و NBC و Sun Microsystems وحتى Adobe.

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

القرب

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

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

خذ هذه المجموعة من الدوائر ، على سبيل المثال:

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

ارض الارقام

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

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

يمكن رؤية مثال أبسط بهذه الصورة ، لوجهين ينشئان شمعدانًا أو مزهرية بينهما:

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

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

التماثل والنظام

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

إليك مثال جيد آخر لمبدأ تصميم الجشطالت " pragnanz ":

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

مصير مشترك

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

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

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

مبادئ الجشطالت في تصميم تجربة المستخدم

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

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

مزيد من القراءة على مدونة Toptal Design:

• مبادئ التصميم: مقدمة في التسلسل الهرمي
• أفضل ممارسات تصميم واجهة المستخدم والأخطاء الشائعة
• كيفية استخدام مبادئ الجشطالت القوية في التصميم (باستخدام مخطط المعلومات الرسومي)
• الدليل الشامل لهندسة المعلومات
• عزز تجربة المستخدم الخاصة بك مع مبادئ تصميم التفاعل الناجح هذه