المشكلة مش في الزر: إزاي عين المستخدم بتفهم الواجهة قبل ما يقرأها؟
تخيل إنك بتراجع شاشة تحويل بنكي بالعربي. اسم المستفيد ناحية اليمين، المبلغ في المنتصف، وزر «تحويل» ظاهر بوضوح تحتهم. لكن رسالة الرسوم أقرب بصريًا لعملية سابقة موجودة فوق الشاشة، مش للتحويل الحالي.
كل النصوص صحيحة، ومفيش معلومة ناقصة. ومع ذلك المستخدم ممكن يفهم الرسوم غلط.
المشكلة هنا مش في الـCopy، ولا في لون الزر وحده. المشكلة إن توزيع العناصر صنع علاقة بصرية مختلفة عن العلاقة الحقيقية.
قبل ما المستخدم يقرأ، عينه بتحاول تجاوب بسرعة: إيه اللي مرتبط بإيه؟ فين بداية كل مجموعة ونهايتها؟ أنهي عنصر نشط؟ وإيه الإجراء الأساسي؟ العملية دي اسمها Perceptual Organization، ومبادئ Gestalt بتساعدنا نفهمها.
لكن بدل ما نحفظ المبادئ كقائمة، خلينا نستخدمها لحل أربع مشكلات بتتكرر في المنتجات العربية.
1. لما المستخدم يربط المعلومة بالعنصر الغلط
في متجر إلكتروني عربي، تخيل صفًا فيه منتجان، وكل منتج تحته الاسم والسعر وزر «أضف للسلة». لو المسافة بين سعر المنتج الأول وصورة المنتج الثاني أصغر من المسافة بين السعر وصورته الأصلية، العين ممكن تعمل ربطًا غير مقصود.
هنا بيظهر مبدأ التقارب — Proximity: العناصر القريبة من بعضها غالبًا تُفهم كمجموعة واحدة.
الحل مش إضافة Borders لكل حاجة. ابدأ بالمسافات:
خلّي المسافة داخل الـCard أصغر بوضوح من المسافة بين الـCards.
قرّب الـLabel من الحقل التابع له.
افصل ملخص الطلب عن المنتجات المقترحة.
متحطش رسالة الخصم في المنتصف بين عرضين مختلفين.
المهم هو الفرق النسبي بين المسافات، مش رقم ثابت يصلح لكل الشاشات.
مبدأ تاني بيدعم التقارب هو المنطقة المشتركة — Common Region. العناصر الموجودة داخل Container واحد تُقرأ كمجموعة، حتى لو كانت قريبة من عناصر خارجه. بحث Stephen Palmer المنشور سنة 1992 قدّم Common Region كمبدأ مستقل للتجميع الإدراكي.
في بوابة خدمات حكومية مثلًا، وضع «بيانات مقدم الطلب» داخل مساحة محددة، و«بيانات الطلب» داخل مساحة ثانية، يساعد المستخدم يفهم التقسيم من أول نظرة.
لكن لو كل سطر داخل Card، هنقع في مشكلة Card Soup: صناديق كتير من غير Hierarchy حقيقي. استخدم الإطار لما يكون فيه حد منطقي للمجموعة، مش كزخرفة.
2. لما عنصرين شكلهم واحد لكن تأثيرهم مختلف
تخيل تطبيق محفظة إلكترونية فيه زران متطابقان: «حفظ المستفيد» و«حذف المستفيد». نفس اللون، نفس الحجم، ونفس المكان النسبي.
مبدأ التشابه — Similarity بيقول إن العناصر المتشابهة بصريًا تُفهم باعتبارها من النوع نفسه. ده مفيد لما كل الأزرار الأساسية بتؤدي وظائف متقاربة، لكنه خطر لما يساوي بصريًا بين إجراء عادي وإجراء له عواقب.
التشابه ممكن يعتمد على اللون أو الشكل أو الحجم أو الأيقونة أو أسلوب النص. والأفضل إن العلاقة المهمة متعتمدش على اللون وحده؛ لأن المستخدم قد لا يميز اللون، أو الشاشة قد تُستخدم في إضاءة ضعيفة، أو الـContrast نفسه يكون غير كافٍ.
في المنتجات العربية، المشكلة أحيانًا بتزيد بسبب خلط الأيقونات واتجاه الواجهة. سهم الرجوع في واجهة RTL، مثلًا، لازم يتوافق مع اتجاه التنقل الفعلي، مش يتنسخ من نسخة إنجليزية من غير مراجعة.
القاعدة العملية:
لو عنصران يؤديان الوظيفة نفسها، خلّي سلوكهما وشكلهما متسقين. ولو النتيجة مختلفة بوضوح، لازم التصميم يوضح الاختلاف.
|
استخدم Style مختلف للإجراء التدميري، Label صريحًا، ورسالة تأكيد تشرح النتيجة عند الحاجة. الهدف مش تخويف المستخدم، لكن منعه من تكوين توقع غلط.
3. لما العين مش عارفة تمشي فين
في نموذج تسجيل لجامعة أو خدمة حكومية، ممكن تكون الحقول صحيحة، لكن المحاذاة غير مستقرة: عنوان يبدأ من اليمين، وصف في المنتصف، وحقل الهاتف بعيد عن مفتاح الدولة. المستخدم هنا بيصرف مجهودًا علشان يكتشف المسار قبل ما يبدأ المهمة.
مبدأ الاستمرارية — Good Continuation يوضح إن العين تميل لتتبع الخطوط والمسارات السلسة. في الواجهات، المحاذاة هي التطبيق الأبسط للمبدأ.
لما بدايات الحقول والعناوين متسقة، العين تتحرك في مسار واضح. ولما عنصر يخرج عن المحاذاة، هيبان منفصلًا حتى لو كان جزءًا من المجموعة.
وفي العمليات متعددة الخطوات، يظهر مبدأ الاتصال — Connectedness. الخط الواصل بين خطوات «البيانات الشخصية»، «رفع المستندات»، و«المراجعة» يوضح إنهم أجزاء من رحلة واحدة. لكن الخط مش مجرد Decoration: لو ربط خطوة مكتملة بأخرى غير متاحة بالطريقة نفسها، ممكن يوحي بحالة غير حقيقية.
الحركة كمان بتصنع علاقات. مبدأ المصير المشترك — Common Fate يعني إن العناصر التي تتحرك أو تتغير معًا تُفهم كمجموعة. لو المستخدم اختار ثلاثة منتجات، وتحركت كلها معًا داخل السلة، الحركة بتأكد ارتباطها. ولو جزء من الشاشة دخل Loading بينما عناصر غير مرتبطة عملت Pulse في الوقت نفسه، الحركة صنعت مجموعة زائفة.
في الواجهة الديناميكية، التوقيت جزء من الـLayout.
4. لما الأولوية البصرية تخدم المنتج ضد المستخدم
تخيل شاشة اشتراك في تطبيق عربي: زر «ابدأ الآن» كبير ومشبع باللون، بينما السعر بعد الفترة التجريبية وشروط الإلغاء مكتوبين بحجم صغير وContrast ضعيف.
مبدأ الشكل والخلفية — Figure–Ground يشرح إزاي العين تختار عنصرًا أساسيًا وتدفع الباقي للخلفية. المصمم يقدر يستخدم الـContrast أو الحجم أو المساحة البيضاء أو التعتيم علشان يحدد الـFigure.
ده مفيد في Modal مهم أو رسالة نجاح واضحة. لكنه يتحول لنمط مضلل لما الإجراء التجاري يبقى هو الشكل، والمعلومة الضرورية لاتخاذ القرار تتحول لخلفية.
وجود المعلومة قانونيًا أو تقنيًا مش كفاية. لازم تكون ظاهرة ومتصلة بصريًا بالقرار اللي تخصه.
نفس الفكرة تنطبق على تطبيقات التقسيط: قيمة القسط وحدها لا تكفي لو التكلفة الكلية والمدة والرسوم بعيدة عن زر الموافقة. التصميم المسؤول لا يخفي العلاقة؛ هو يساعد المستخدم يشوفها قبل التنفيذ.
التبسيط مش معناه إزالة كل حاجة
مبدأ Prägnanz أو «الشكل الجيد» يشير إلى ميل الإدراك نحو تنظيم مستقر ومتماسك عندما توجد تفسيرات متعددة.
لكن ده مش معناه إن أقل عدد من العناصر هو دائمًا الأفضل.
أحيانًا Divider إضافي، أو Label واضح بجوار أيقونة، أو ملخص مراجعة قبل التحويل، يضيف عناصر لكنه يقلل الغموض. وفي المقابل، واجهة Minimal جدًا ممكن تكون صعبة لو الأيقونات غير مألوفة أو العلاقات غير واضحة.
بسّط التفسير، مش عدد الـPixels.
مبدأ الإغلاق — Closure يوضح إن العقل يقدر يكمل الشكل الناقص. ده مفيد في الشعارات والأيقونات، لكن الاعتماد عليه لازم يتناسب مع السياق. رمز مختصر قد ينجح في Navigation مألوفة، لكنه مش مناسب وحده لإجراء مالي حساس. في الحالات المهمة، الوضوح أهم من الذكاء البصري.
اختبر العلاقات، مش العناصر فقط
مراجعة الـButton والـInput والـCard كل واحد منفصل مش كفاية. الخطأ غالبًا يظهر في العلاقة بينهم بعد تركيب الشاشة.
قبل اعتماد أي Flow عربي، جرّب الاختبارات دي:
اعرض الشاشة لمدة ثانية، واسأل: إيه المجموعات اللي شوفتها؟
اخفِ النص مؤقتًا: هل المسافات والمحاذاة ما زالت توضح البنية؟
اختبر أضيق شاشة وأطول نص عربي متوقع.
كبّر النص وراجع هل السعر أو التحذير اتحرك ناحية عنصر غلط.
راجع حالات الخطأ والتحميل والتعطيل، مش الـHappy Path فقط.
تأكد إن الترتيب البصري يطابق ترتيب لوحة المفاتيح والـSemantics.
اسأل المستخدم أي معلومة تخص أي قرار، بدل سؤاله فقط: «التصميم واضح؟»
مهم كمان إننا منستخدمش أدوات الذكاء الاصطناعي كحَكم نهائي. دراسة Biscione وBowers اختبرت شبكات عصبية على أنماط Gestalt، وبيّنت إن التقاط النموذج لبعض الإشارات لا يثبت إنه ينظم الصورة بالطريقة نفسها التي يفعلها الإنسان.
استخدم AI لتوليد بدائل أو اكتشاف احتمالات، وبعدها اختبر الإدراك البصري مع أشخاص مناسبين للمنتج.
الخلاصة
المستخدم مش بيقرأ الشاشة الأول؛ هو بينظمها بصريًا، وبعدها يفسر محتواها.
علشان كده جودة الواجهة مش بس في جمال العناصر أو صحة النصوص. الجودة تظهر لما المسافات، والتشابه، والحدود، والمحاذاة، والحركة، والأولوية البصرية كلها تحكي القصة نفسها.
في المراجعة الجاية، متسألش فقط: «هل الزر واضح؟»
اسأل: واضح إنه تابع لإيه؟ وإيه النتيجة اللي شكله بيوعد بها؟
السؤال ده وحده ممكن يكشف مشكلات مش هتظهر في مراجعة الـUI Component منفردًا.
والأفضل إن المراجعة دي تحصل بالمحتوى الحقيقي، مش Placeholder مثالي. أسماء عربية طويلة، أرقام مكتوبة بصيغ مختلفة، عملات، تواريخ، ورسائل خطأ فعلية ممكن تغيّر التجميع بالكامل. التصميم اللي ينجح مع نموذج نظيف قد يفشل فور دخول البيانات الحقيقية أو انتقاله من نسخة LTR إلى RTL.
المصادر
Wertheimer, M. (1923/1938). Laws of Organization in Perceptual Forms: https://psychclassics.yorku.ca/Wertheimer/Forms/forms.htm
Palmer, S. E. (1992). Common Region: A New Principle of Perceptual Grouping. Cognitive Psychology, 24(3), 436–447: https://doi.org/10.1016/0010-0285(92)90014-S
Wagemans, J., et al. (2012). A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure–Ground Organization. Psychological Bulletin, 138(6), 1172–1217: https://doi.org/10.1037/a0029333
Biscione, V., & Bowers, J. S. (2023). Do Deep Neural Networks Learn Gestalt Laws?: https://doi.org/10.1017/S0140525X22002082
W3C. Web Content Accessibility Guidelines (WCAG) 2.2: https://www.w3.org/TR/WCAG22/
ولو استفدت إشترك في النشرة
و حابب تتابع المسار الجديد وتوصلك الأعداد مباشرة:
https://gohodhod.com/@digital-products-newsletter
ولو وصلت لك الرسالة من صديق، اشترك علشان تتابع باقي السلسلة من البداية أو من الموقع هنا .
التعليقات