توزيع العناصر يتكلم قبلك

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

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

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

رأيت مصممين يقضون ساعات في إصلاح النص، بينما كانت المسافات تروي الحكاية الخطأ بالفعل.

العقل يجمع أولًا

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

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

صاغ Kurt Koffka الأمر هكذا:

الكلّ مختلف عن مجموع أجزائه.

— Kurt Koffka، ترجمة عن الإنجليزية

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

المسافات تخبر الناس بما يرتبط بماذا

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

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

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

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

تعرض Google ذلك بوضوح

تفيدنا صفحة بحث Google لأن هذه التأثيرات تظهر فيها بوضوح.

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

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

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

افحص البنية أولًا

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

كان Wolfgang Köhler، وMax Wertheimer، وKurt Koffka يحاولون فهم الإدراك. وانتهى بهم الأمر إلى وصف شيء يتعامل معه المصممون كل يوم. فاتني هذا في عملي أيضًا. بدت شاشة نقية، فافترضت أنها واضحة.

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