أساسيات علم النفس للـUX

ليه علم النفس أساسي لتصميم الـUX

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

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

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

الحمل المعرفي (Cognitive Load)

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

أنواع الحمل المعرفي:

• Intrinsic Load: الصعوبة الطبيعية للمهمة نفسها. ملء نموذج ضريبي أصعب من كتابة تغريدة.
• Extraneous Load: الحمل الزيادة اللي بيسببه التصميم السيء. لو المستخدم محتاج يفكر في إزاي يستخدم الواجهة، ده حمل إضافي مالوش لازمة.
• Germane Load: الحمل المفيد — الجهد اللي المستخدم بيبذله لفهم وتعلم حاجة جديدة.

إزاي تقلل الحمل المعرفي في التصميم:

• البساطة: قلل عدد العناصر المرئية. كل عنصر إضافي بياخد جزء من طاقة المعالجة.
• التجميع (Chunking): قسم المعلومات لمجموعات صغيرة. رقم التليفون بنكتبه "0100-123-4567" مش "01001234567" لنفس السبب.
• التعرف مش التذكر: خلي الخيارات مرئية بدل ما المستخدم يتذكرها. Dropdown أسهل من text input لو الخيارات محدودة.
• التسلسل (Progressive Disclosure): لا تعرض كل حاجة مرة واحدة. ابدأ بالأساسيات وخلي التفاصيل تظهر لما المستخدم يحتاجها.
• التوقعات (Affordances): اعمل العناصر تبان إيه وظيفتها. الزر لازم يبان إنه زر، والرابط لازم يبان إنه رابط.

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

قانون Hick: كتر الخيارات بيبطّئ القرار

قانون Hick (Hick's Law) بيقول إن الوقت اللي المستخدم بياخده لاتخاذ قرار بيزيد مع زيادة عدد الخيارات المتاحة. المعادلة الرسمية هي: T = a + b·log₂(n) — حيث T هو وقت القرار، a و b ثوابت، و n عدد الخيارات. العلاقة لوغاريتمية مش خطية — يعني لو عندك ٢ خيارات الوقت مثلا ثانية، ١٠ خيارات مش هياخدوا ١٠ ثواني — هياخدوا حوالي ٣.٣ ثانية. كل ما الخيارات تزيد، التأثير بيقل شوية لكن بيفضل موجود.

التطبيق في التصميم:

• قلل الخيارات: لو عندك قائمة من ٢٠ عنصر، فكر إزاي تقللها أو تنظمها في فئات.
• الأولويات: مش كل الخيارات متساوية. ابرز الخيار الأكثر شيوعا واعمله الـdefault.
• التوجيه: ساعد المستخدم ياخد القرار من خلال recommendations أو highlights.
• الفلترة: لو الخيارات كتيرة بالضرورة، قدم أدوات فلترة وبحث.

مثال عملي: Netflix. بدل ما يعرض آلاف الأفلام والمسلسلات مرة واحدة، بيقسمها لفئات ذكية وبيقدم recommendations شخصية. وأول حاجة بتشوفها هي "Continue Watching" — اختيار واحد سهل. ده بيقلل الـdecision fatigue بشكل كبير.

مثال تاني: Amazon Buy Button. بدل ما تاخد المستخدم لعملية checkout طويلة، "Buy Now" بيخلص العملية بضغطة واحدة. ده بيقلل عدد القرارات من ١٠+ لقرار واحد.

قانون Fitts: الحجم والمسافة بيأثروا على التفاعل

قانون Fitts بيقول إن الوقت المطلوب للوصول لهدف معين بيعتمد على حجم الهدف والمسافة من النقطة الحالية. يعني: العناصر الكبيرة والقريبة أسهل في الضغط عليها.

التطبيق في التصميم:

• الأزرار المهمة لازم تكون كبيرة: زر "اشترِ" لازم يكون أكبر من زر "إلغاء". مش بس عشان يبان — عشان يكون أسهل في الضغط.
• المسافة مهمة: الأكشنز المرتبطة ببعض حطها جنب بعض. لا تخلي المستخدم يتحرك كتير بالماوس أو الإصبع.
• الأهداف في الأطراف: على الـdesktop، الأهداف اللي على حافة الشاشة (زي شريط المهام) سهلة الوصول لأن المستخدم مش محتاج يكون دقيق — الحافة بتوقف الـcursor.
• الـtouch targets: على الموبايل، Apple بتنصح بحد أدنى ٤٤×٤٤ نقطة، وGoogle بتقول ٤٨×٤٨ dp. أقل من كده بيسبب أخطاء في الضغط.

مثال عملي: زر Skip Intro في Netflix. هو كبير وموجود في مكان سهل الوصول ليه (الركن السفلي). مش محتاج دقة عالية عشان تضغط عليه. ده تطبيق ذكي لقانون Fitts.

الـThumb Zone على الموبايل: في الموبايل، الأكشنز المهمة لازم تكون في المنطقة اللي الإبهام بيوصلها بسهولة. ده الـthumb zone اللي اكتشفها Steven Hoober. الأكشنز الثانوية ممكن تكون في الأماكن الأصعب.

مبادئ الجشطالت (Gestalt Principles)

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

القرب (Proximity)

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

التطبيق: استخدم الـspacing بذكاء لتجميع المعلومات المرتبطة. في الفورم، خلي الـlabel قريب من الـinput بتاعه وبعيد عن الـinput اللي قبله.

التشابه (Similarity)

العناصر المتشابهة (في اللون أو الشكل أو الحجم) بنحسها إنها مرتبطة. ده بيساعد في إنشاء patterns بصرية واضحة.

التطبيق: استخدم نفس اللون لكل الأكشنز الأولية (Primary Actions) ولون تاني للأكشنز الثانوية. المستخدم تلقائيا هيفهم الفرق.

الاستمرارية (Continuity)

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

التطبيق: رتب العناصر في صفوف أو أعمدة واضحة. استخدم الـgrid. خلي العين تتدفق بسلاسة.

الإغلاق (Closure)

المخ بيكمل الأشكال الناقصة. لو شوفت دائرة ناقصة جزء صغير، مخك هيكملها ويشوفها كدائرة كاملة.

التطبيق: مش لازم تحط حدود واضحة لكل عنصر. المساحة البيضاء والـalignment كافيين يوصلوا الهيكل. ده بيقلل الـclutter.

الشكل والأرضية (Figure-Ground)

المخ بيفصل العناصر لشكل أمامي (Figure) وخلفية (Ground). ده بيحدد إيه اللي بياخد الانتباه.

التطبيق: استخدم الـcontrast والـelevation عشان تميز العناصر المهمة من الخلفية. الـmodal dialog هو مثال كلاسيكي: المحتوى هو الـfigure والخلفية المعتمة هي الـground.

تأثير Von Restorff: المختلف بيتذكر

تأثير Von Restorff (أو Isolation Effect) بيقول إن العنصر اللي مختلف عن باقي المجموعة بيتم تذكره أسهل. لو عندك قائمة من ١٠ كلمات كلها بالأسود وكلمة واحدة بالأحمر، هتتذكر الحمرا أكتر.

التطبيق في التصميم:

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

مثال عملي: صفحات الـpricing في أغلب شركات الـSaaS. الخطة المطلوبة بتكون مميزة بلون مختلف أو حجم أكبر أو label "Most Popular". ده مش صدفة — ده Von Restorff.

الـNudging: التوجيه اللطيف

الـNudging هو مفهوم من الاقتصاد السلوكي (Behavioral Economics) طوره Richard Thaler وCass Sunstein. الفكرة إنك تقدر توجه سلوك الناس من غير ما تمنعهم أو تجبرهم — بس بتغيير طريقة عرض الخيارات.

أنواع الـNudges في التصميم:

Default Options: أقوى nudge. الناس غالبا بتسيب الاختيار الافتراضي. لو عايز الناس يشتركوا في الـnewsletter، خلي الـcheckbox مفعّل بالـdefault. لكن استخدم ده بأخلاقية.

Social Proof: "١٠,٠٠٠ شخص اشتروا المنتج ده" أو "٩٥٪ من العملاء راضين". الناس بتتأثر بسلوك الآخرين. Booking.com وAmazon بيستخدموا ده بكثافة.

Scarcity: "باقي ٣ قطع فقط" أو "العرض ينتهي خلال ساعتين". الندرة بتزود الرغبة. لكن لازم تكون حقيقية — الـfake scarcity بتأثر على الثقة.

Anchoring: أول رقم بيشوفه المستخدم بيأثر على تقييمه للأرقام اللي بعده. لو عرضت السعر الأصلي ١٠٠٠ جنيه وبعدها السعر المخفض ٥٠٠ جنيه، الـ٥٠٠ بيبان رخيصة. لو عرضت ٥٠٠ لوحدها، ممكن تبان غالية.

Loss Aversion: الناس بتكره الخسارة أكتر ما بتحب الكسب. "لا تفوت العرض" أقوى من "استفد من العرض". ده لأن المخ بيتعامل مع الخسارة بقوة أكبر من المكسب المعادل.

أخلاقيات استخدام علم النفس في التصميم

المبادئ النفسية دي أدوات قوية، وزي أي أداة قوية، ممكن تُستخدم صح أو غلط.

الخط بين الـPersuasion والـManipulation:

• Persuasion (إقناع): بتساعد المستخدم ياخد قرار في مصلحته وهو فاهم. مثلا: تبسيط عملية الـcheckout.
• Manipulation (تلاعب): بتدفع المستخدم لقرار في مصلحتك وضد مصلحته. مثلا: تصعيب إلغاء الاشتراك.

أمثلة على الاستخدام السلبي (Dark Patterns):

• الـConfirmshaming: "لا شكرا، أنا مش عايز أوفر فلوس" كنص لزر الرفض.
• الـRoach Motel: سهل تسجل لكن صعب تلغي.
• الـHidden Costs: أسعار بتظهر بس في آخر خطوة.
• الـForced Continuity: الاشتراك المجاني بيتحول لمدفوع من غير تنبيه واضح.

المعايير الأخلاقية:

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

إزاي تطبق المبادئ دي عمليا

معرفة المبادئ مش كفاية — لازم تعرف تطبقها. هنا خطوات عملية:

١. اعمل Audit لتصميماتك الحالية: خد أي تصميم عندك وحلله بناء على المبادئ دي. هل الحمل المعرفي عالي؟ هل فيه خيارات كتيرة بلا داعي؟ هل الـtouch targets مناسبة؟

٢. اعمل checklist: لكل مبدأ، اكتب سؤال تسأله لنفسك في كل تصميم. مثلا: "هل عدد الخيارات المعروضة أقل من ٧؟" (قانون Hick).

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

٤. اقرأ أكتر: الكتب المهمة في المجال ده تشمل: "Don't Make Me Think" لـSteve Krug، "Thinking, Fast and Slow" لـDaniel Kahneman، "Nudge" لـRichard Thaler، و"Laws of UX" لـJon Yablonski.

٥. تابع الأبحاث: مجال علم النفس المعرفي بيتطور باستمرار. تابع مجلات ومواقع زي Nielsen Norman Group وSmashing Magazine عشان تفضل محدث.

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