Learning to Detect UI Principle Violations via Reinforcement Learning

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

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

---

الروبوت الذي تعلم رصد التصميم السيئ

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

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

• عوائق الوصول (Accessibility barriers): مثل مقبض باب صغير جدًا لشخص يعاني من رعشة في اليدين، أو نص باهت جدًا بحيث لا يمكنك قراءته.
• الأنماط المظلمة (Dark patterns): مثل زر "لا شكرًا" مخفي في نص صغير وغير مرئي، أو لافتة تقول: "لا شكرًا، أفضل دفع السعر الكامل"، مما يجعلك تشعر بالذنب لرفض العرض.
• تخطيطات مربكة: مثل قائمة تحتوي على 20 خيارًا تبدو جميعها متشابهة، مما يجعل عقلك يشعر وكأنه يحاول أكل بيتزا كاملة في قضمة واحدة.

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

الحل: لعبة "الحقن والتحقق" (Inject and Verify)
لتعليم روبوت المفتش الصغير الخاص بهم، احتاجوا إلى كمية هائلة من الاختبارات التدريبية. ولكن العثور على مواقع حقيقية تحتوي على هذه التصميمات السيئة تحديدًا أمر صعب. لذا، ابتكروا لعبة ذكية تسمى "الحقن والتحقق".

1. اللوحة النظيفة: أولاً، قاموا بتوليد آلاف المواقع الإلكترونية المثالية والنظيفة باستخدام الذكاء الاصطناعي.
2. التخريب: بعد ذلك، طلبوا من "ذكاء اصطناعي معلم" (Teacher AI) فائق الذكاء أن يخرب هذه المواقع سرًا. يقوم "الذكاء الاصطناعي المعلم" بأخذ صفحة مثالية ويحقن فيها انتهاكات محددة، مثل جعل الزر صغيرًا جدًا، أو إخفاء رسوم إضافية في نص باهت، أو جعل رابط "لا شكرًا" يبدو فظًا.
3. اختبار الواقع: هنا يكمن الجزء السحري. لم يكتفِ "الذكاء الاصطناعي المعلم" بقول: "لقد أفسدتُ الشيء". بل كان عليه إثبات ذلك. يقوم النظام بأخذ لقطة شاشة للصفحة المخربة. إذا ادعى "الذكاء الاصطناعي المعلم" أنه جعل الزر غير مرئي، ولكن لقطة الشاشة لا تزال تظهر الزر بوضوح، يقول النظام: "لا، حاول مرة أخرى". يجب أن يكون الانتهاك مكسورًا بشكل مرئي في الصورة، وليس فقط في الكود.
4. مجموعة البيانات: انتهى بهم المطاف بـ 10,000 صفحة، كل منها يحتوي على خطأ واحد إلى ثلاثة أخطاء تم التحقق منها بصريًا. أصبحت هذه هي مدرسة التدريب لروبوت الطالب الخاص بهم.

التدريب: التعلم بالممارسة
روبوت الطالب الذي اختاروه كان "نموذج لغة ورؤية" (Vision-Language Model) (نموذج بـ 4 مليارات معامل). وهذا يعني أنه يستطيع قراءة النص (الكود) والنظر إلى الصور (لقطات شاشة للموقع) في نفس الوقت.

لم يكتفوا بعرض الإجابات عليه، بل استخدموا التعلم المعزز (Reinforcement Learning). تخيل أن الروبوت يلعب لعبة فيديو حيث يتعين عليه العثور على فخاخ مخفية.

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

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

النتائج: من عدم المعرفة إلى الاحتراف
قبل التدريب، كان الروبوت سيئًا نوعًا ما في هذا الأمر. كان بإمكانه قراءة الكود والعثور على أخطاء نصية واضحة، ولكن إذا طلبت منه النظر إلى صورة وقول: "هل هذا الزر صغير جدًا؟" فإنه سيخمن بشكل خاطئ معظم الوقت. كانت درجته 36% فقط (مقياس يسمى micro-F1). كان مثل طالب درس الكتاب المدرسي لكنه رسب في الامتحان العملي.

بعد تدريب التعلم المعزز، أصبح الروبوت محترفًا. قفزت درجته إلى 84%.

• أصبح بارعًا حقًا في رصد الأخطاء البصرية، مثل الألوان ذات التباين المنخفض (من 0% إلى 64% دقة) والمسافات الفوضوية (من 4% إلى 94% دقة).
• أصبح ممتازًا في رصد التصميمات المخادعة، مثل "الأنماط المظلمة" التي تحاول خداع المستخدمين.
• تعلم أن يكون موجزًا، حيث يتوقف عن عملية "التفكير" في الوقت المناسب لإعطاء إجابة واضحة، مما جعله أسرع وأكثر موثوقية.

ما يمكنه فعله الآن
هذا الروبوت الصغير ليس مجرد لعبة. يقول الباحثون إنه يمكن استخدامه لـ:

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

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

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