قوانين UX النفسية — الدليل الكامل اللي بستخدمه في كل مشروع

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

كل القوانين اللي في المقال ده علمية — من أبحاث نفسية حقيقية، بعضها من الخمسينات. وكل واحد فيهم بستخدمه فعلياً في شغلي، وهوريك بالأمثلة إزاي Netflix و Instagram و Spotify بيستخدموهم كل يوم عشان يكسبوا.

ده مش مقال نظري. ده الدليل اللي كنت أتمنى ألاقيه بالعربي لما بدأت.

قانون Hick — كل اختيار زيادة بيخسّرك مستخدم

في ١٩٥٢، العالمين William Hick و Ray Hyman اكتشفوا حاجة بسيطة بس عميقة: كل ما الاختيارات زادت، الوقت اللي الإنسان بياخده عشان يقرر بيزيد.

لما تحط قدام المستخدم ٣ خيارات — بياخد قرار سريع. لما تحط ١٠ — بيتلخبط. ولما تحط ٢٠ — ممكن ميختارش خالص ويمشي. وفي التصميم، المستخدم اللي بيمشي مش بيرجع.

أمثلة من الواقع

Twitter (X): شريط الـ navigation فيه ٥ أيقونات بس. مش ١٥. وده اللي بيخليك تتنقل من غير ما تفكر.

Spotify: لما بتفتح التطبيق، مش بيديك قائمة بكل الأغاني في العالم — بيديك ٣-٤ playlists مقترحة بناءً على ذوقك. اختيارات محدودة = قرار أسرع = استخدام أكتر.

صفحات الأسعار: المواقع اللي بتعرض ٣ خطط (Basic, Pro, Enterprise) بتحوّل أحسن بكتير من اللي بتعرض ٥ أو ٧. جرب بنفسك — افتح صفحات أسعار أي ٥ شركات SaaS ناجحة وعدّ الخطط.

إزاي تطبقه

• قلل الخيارات: لو في الصفحة ١٠ أزرار، اسأل نفسك أنهي ٧ ممكن يتشالوا.
• صنّف بدل ما تطوّل: بدل قائمة من ٣٠ عنصر، اعمل ٥ فئات جوه كل واحدة ٦ عناصر.
• وضّح الاختيار الموصى به: badge زي "الأكثر شعبية" بيقلل الجهد الذهني للمستخدم — وده هيوصلنا لتأثير Von Restorff كمان شوية.
• Progressive Disclosure: اعرض الأساسي الأول، والتفاصيل تظهر لما المستخدم يطلبها.

قانون Fitts — الزرار الكبير القريب بيكسب

قانون Fitts بيقول: الوقت اللي محتاجه عشان توصل لهدف بيعتمد على حاجتين — حجم الهدف والمسافة ليه. زرار كبير وقريب = سهل. زرار صغير وبعيد = صعب.

بديهي؟ أيوا. بس شوف مين بياخده بجدية:

Netflix — زرار Skip Intro: الزرار بيظهر في منطقة الإبهام — المكان اللي إصبعك واقف فيه طبيعي وأنت ماسك الموبايل. مش في ركن بعيد. فريق Netflix حسب المكان ده بالمليمتر عشان تجربتك تبقى أسلس.

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

أزرار الـ CTA: زرار "اشترك" دايماً أكبر من زرار "اقرأ المزيد". مش صدفة — الشركة عايزاك تضغط على الأول.

إزاي تطبقه

• الزرار الرئيسي في الشاشة يكون أكبر بشكل واضح من أي زرار تاني.
• على الموبايل، الـ actions المهمة تعيش في الـ Thumb Zone — تلت الشاشة السفلي.
• المسافة بتمنع الكوارث: متحطش زرار "حذف" جنب زرار "حفظ". لو لازم يكونوا جنب بعض، خلي بينهم مسافة وفرّق بينهم بصرياً.

قانون Jakob — المستخدم جاي من مواقع تانية

Jakob Nielsen — من أهم الناس في تاريخ الـ UX — لاحظ حاجة عبقرية في بساطتها: المستخدمين بيقضوا معظم وقتهم على مواقع تانية غير موقعك. يعني بييجوا لك وعندهم توقعات جاهزة مبنية على كل اللي شافوه قبلك.

المخ بيعمل حاجة اسمها Mental Model Matching — بيقارن اللي شايفه باللي عارفه. لو لقى تشابه، بيرتاح ويكمل. لو ملقاش، بيتوتر — وغالباً بيمشي.

عشان كده أمازون ونون وجوميا كلهم: logo في الركن، search في النص، cart في الطرف. مش قلة إبداع — احترام للـ mental models.

طيب أبدعش خالص؟

بالعكس. القاعدة اللي بمشي بيها في شغلي: 80% مألوف، 20% مبتكر. الـ 80% هي الأساسيات — navigation، layout، الـ interactions الأساسية. الـ 20% هي اللي بتميزك — الـ micro-interactions، الـ copywriting، الـ visual style.

Apple بتعمل كده بالظبط: الـ iPhone كان ثوري، بس استخدم مفاهيم مألوفة — أزرار بتتضغط، أيقونات ليها معنى. الثورة كانت في التفاصيل، مش في كسر كل حاجة.

ولو هتكسر نمط مألوف — وضّح. Snapchat عملوا interface مختلف تماماً وناس كتير اتلخبطت، واضطروا يضيفوا onboarding بعدين.

في السياق العربي

عندنا تحدي إضافي: المستخدم العربي متعود على أنماط المواقع العربية (logo يمين، RTL) وأنماط المواقع الأجنبية في نفس الوقت. فالتوازن مهم — لو موقعك bilingual، الـ logo بيتحرك مع اللغة، بس الأنماط العالمية زي الـ hamburger menu بتفضل زي ما هي.

تأثير Von Restorff — المختلف هو اللي بيتفتكر

في ١٩٣٣، العالمة Hedwig von Restorff اكتشفت إن العنصر المختلف عن باقي المجموعة بيتفتكر أكتر بكتير. قائمة من ١٠ كلمات بالأسود وواحدة بالأحمر؟ الحمراء هي اللي هتفتكرها.

في التصميم ده بيترجم لحاجة واحدة: وجّه العين للمكان اللي انت عايزه.

• صفحات الأسعار: الخطة اللي الشركة عايزاك تختارها دايماً بارزة — لون مختلف، حجم أكبر، badge "الأكثر شعبية". ClickUp و Spotify و Slack كلهم بيعملوها.
• الـ CTA: لو الصفحة زرقاء، الزرار الرئيسي برتقالي. التباين مش ذوق — استراتيجية.
• الـ notification dot: النقطة الحمراء الصغيرة على أيقونة التطبيق. أصغر عنصر في الشاشة وأقواهم جذباً للانتباه — لأنها مختلفة عن كل اللي حواليها.

القاعدة الذهبية

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

مبادئ Gestalt — إزاي العين بتنظم اللي بتشوفه

ليه لما بتبص على شعار FedEx بتشوف سهم مخفي بين الـ E والـ x؟ عقلك بيطبق مبادئ Gestalt — قوانين اكتشفها علماء نفس ألمان في أوائل القرن العشرين بتشرح إزاي المخ بينظم العناصر البصرية في مجموعات ذات معنى.

الخمس مبادئ اللي بستخدمهم كل يوم:

١. Proximity (القرب)

العناصر القريبة من بعض بنعتبرها مجموعة واحدة. عشان كده الـ label لازم يكون أقرب للـ input بتاعه من أي حاجة تانية — لو المسافات متساوية، الفورم بيبقى لغز.

٢. Similarity (التشابه)

العناصر المتشابهة في الشكل أو اللون بنعتبرها متصلة. كل الأزرار الـ primary في منتجك لازم تبقى شبه بعض — المستخدم بيتعلم مرة واحدة وبيطبق في كل مكان.

٣. Closure (الإغلاق)

عقلك بيكمل الأشكال الناقصة. سهم FedEx مش مرسوم أصلاً — الفراغ بين الحروف هو اللي بيرسمه. أقوى الشعارات بتستخدم المبدأ ده لأن اللي عقلك "يكتشفه" بيتفتكر أكتر من اللي بيتقدمله جاهز.

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

العين بتتبع الخطوط والمنحنيات. عشان كده عنصر مقصوص عند حرف الشاشة بيقولك "في حاجة تحت — اعمل scroll".

٥. Figure-Ground (الشكل والخلفية)

المخ بيفرق بين العنصر الرئيسي والخلفية. عشان كده الـ modal بيغمّق اللي وراه — بيقول لعقلك "ركز هنا وسيب الباقي".

الـ Micro-interactions — التفاصيل اللي بتخلق الإدمان

اضغط double-tap على صورة في Instagram. الـ heart الأحمر بيظهر ويختفي. الاهتزاز الخفيف في إيدك. ده كله بيحصل في أقل من ثانية — وده جزء كبير من السبب إن الناس بتفتح Instagram عشرات المرات في اليوم.

الـ micro-interaction ليها ٤ مراحل: Trigger (المستخدم بيعمل حاجة) → Rules (النظام بيقرر) → Feedback (النظام بيرد) → Loops (إيه اللي بعد كده). والفرق بين تطبيق عادي وتطبيق الناس بتحبه غالباً في المرحلة التالتة — الـ feedback.

أمثلة بتتدرس

• Instagram double-tap: أسرع من إنك تدور على زرار Like، مُرضي بصرياً، وقابل للتراجع. أربع صفات في حركة واحدة.
• Duolingo: الـ streak flame اللي بتكبر كل يوم، صوت الـ "ding" للإجابة الصح، الـ XP animation — كل واحدة مصممة تديك dopamine hit يرجّعك تاني.
• Apple Taptic Engine: كل حاجة في الـ iPhone ليها إحساس لمسي مختلف — الـ unlock غير الـ notification غير آخر الـ scroll. الجهاز بيحس إنه حي.

قواعد الاستخدام

• السرعة: بين ١٠٠ و٤٠٠ ملي ثانية. أقل مش هتتلاحظ، أكتر هتحس بطيئة.
• الفايدة: كل animation لازم تقدم معلومة أو تأكد action. لو شلتها والمستخدم مخسرش حاجة — شيلها.
• التكرار: اللي حلو أول مرة ومزعج المرة المية — فاشل. المستخدم هيشوفها آلاف المرات.

الوش المظلم: الـ Dark Patterns

كل القوانين اللي فاتت ممكن تتستخدم ضد المستخدم. ولما ده بيحصل عن قصد، اسمه Dark Pattern — المصطلح اللي سماه باحث الـ UX البريطاني Harry Brignull في ٢٠١٠.

أشهر الأنواع اللي هتقابلها (وياريت متعملهاش):

• Hidden Costs: السعر حلو، وعند الـ checkout تلاقي رسوم شحن ومعالجة وضرايب. الشركة بتستغل الـ Sunk Cost Fallacy — إنك "استثمرت وقت" فمش هتلغي.
• Roach Motel: التسجيل بضغطة، والإلغاء رحلة عذاب. Amazon Prime كان أشهر مثال لحد ما الاتحاد الأوروبي ضغط عليهم.
• Confirmshaming: "لا شكراً، أنا مش عايز أوفر فلوس" — خيار الرفض متكتب بطريقة تحسسك بالذنب.
• Sneak into Basket: تأمين سفر متضاف تلقائياً على تذكرة الطيران.
• Trick Questions: "هل أنت متأكد إنك مش عايز تلغي عدم تلقي رسائلنا؟" — قريتها كام مرة؟ ده الهدف.

ليه أنا ضدها — عملياً مش أخلاقياً بس

الـ Dark Patterns بتكسب فلوس على المدى القصير وبتخسر حاجتين أغلى: الثقة (المستخدم اللي اتخدع بيمشي وبيحكي)، والقانون (الاتحاد الأوروبي بيغرّم بالملايين — أمازون اتغرمت فعلاً بسبب تعقيد إلغاء Prime).

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

إزاي تستخدم القوانين دي مع بعض

في مشروع حقيقي، القوانين مش بتشتغل منفصلة. خد صفحة pricing مثلاً:

1. Hick: ٣ خطط بس، مش ٦.
2. Von Restorff: الخطة الوسطى بارزة بلون مختلف وbadge.
3. Fitts: زرار الاشتراك كبير وتحت كل خطة مباشرة.
4. Jakob: الـ layout نفسه — أعمدة جنب بعض والسعر فوق — لأن ده اللي المستخدم متوقعه من كل صفحات الـ pricing اللي شافها.
5. Gestalt (Similarity): مميزات كل خطة بنفس التنسيق عشان المقارنة تبقى سهلة.

كل قانون بيحل جزء، ومع بعض بيعملوا صفحة بتبيع.

لو لسه بتبدأ في الـ UX، عندي دليل كامل للمبتدئين في تصميم UI/UX هيرتبلك الطريق. ولو عايز تشوف القوانين دي وهي بتشتغل في شركات حقيقية بأرقام حقيقية، اقرأ دروس UX من أكبر الشركات.

الخلاصة

القوانين النفسية في الـ UX مش نظريات أكاديمية — هي أدوات شغل يومية. المخ البشري مبيتغيرش: بيحب البساطة (Hick)، بيروح للقريب والكبير (Fitts)، بيرتاح للمألوف (Jakob)، بيفتكر المختلف (Von Restorff)، وبينظم اللي بيشوفه (Gestalt).

المصمم اللي فاهم القوانين دي بيصمم حاجات "بتحس إنها صح" من أول استخدام. والمستخدم مش هيعرف يقولك ليه — بس هيفضل يرجع لتصميمك. وده في الآخر كل المطلوب.