دراسة حالة تجربة المستخدم (Ux) باستخدام أسلوب اللعب
دراسة حالة تجربة المستخدم باستخدام أسلوب اللعب: تعزيز المشاركة على منصة مدرسة التعليمية
في إطار مبادرات محمد بن راشد آل مكتوم العالمية، ساهمنا في تصميم تجربة المستخدم وواجهة المستخدم لمنصة مدرسة التعليمية، والتي تهدف إلى جعل تعلم الرياضيات والعلوم أكثر جاذبية. ولتشجيع المستخدمين على التدرب بشكل أكثر انتظامًا، اعتمدنا على عملية اللعب التي تشجع المنافسة الودية بين الطلاب، مع احترام الخصوصيات التعليمية والثقافية للمشروع.
1. تصميم تجربة اللعب
تعتمد اللعبة على دمج آليات تعتمد على اللعبة (النقاط، الشارات، التصنيفات) ضمن مسار التعلم. لقد قمنا أولاً بدراسة حالات الاستخدام وحددنا اللحظات الرئيسية التي قد ينخفض فيها الدافع.
واستجابة لذلك، قمنا بتصميم عناصر ردود الفعل المرئية (أشرطة التقدم، والنتائج، والكؤوس) لمساعدة المستخدم على قياس تقدمه والاحتفال بنجاحاته.
الفكرة هي الحفاظ على مستوى عال من المشاركة، لا سيما من خلال:
- أنظمة الرتب والشارات: قم بتحديد كل خطوة قمت بها وكل مهارة اكتسبتها.
- المسابقات والتصنيفات: تشجيع روح المحاكاة بين المتعلمين.
- المكافآت الملموسة أو الرمزية: تعزيز الشعور بالإنجاز.
2. تصميم تجربة المستخدم وواجهة المستخدم مُلائم للقضايا التعليمية
لكي تكون اللعبة فعّالة، يجب أن تكون الواجهة بديهية وممتعة. تم تصميم واجهة المستخدم لتعزيز المحتوى التعليمي، مع تقديم عناصر ممتعة (الرموز، والطباعة، والألوان الزاهية).
كما أخذنا في الاعتبار الهوية الشاملة للمدرسة لضمان الاتساق الرسومي واحترام الحساسيات الثقافية المحلية.
- قابلية قراءة المحتوى: أقسام محددة بوضوح لتسهيل الملاحة.
- إمكانية الوصول: التوافق مع الهواتف المحمولة، ودعم اللغتين العربية والإنجليزية للوصول إلى ملايين المستخدمين.
- هيكل التقدم: مسار محدد بحيث يعرف كل متعلم الخطوات التي يجب اتباعها والأهداف التي يجب تحقيقها.
3. النتائج: تعلم أكثر تفاعلاً ومجتمع ديناميكي
منصة مدرسة التعليمية تقدم الآن دورات مجانية في الرياضيات والعلوم باللغتين العربية والإنجليزية، تستهدف جمهورًا واسعًا.
بفضل UX gamification، أصبح الطلاب أكثر تحفيزًا للتدريب والتقدم بشكل أسرع وخلق روح المنافسة الإيجابية.
تسلط دراسة الحالة هذه الضوء على تأثير النهج المرح في عالم التعليم: من خلال دمج استراتيجية اللعب المدروسة جيدًا، نجحت مدرسة في جعل التعلم أكثر تحفيزًا وشاملاً وأهمية ثقافية لملايين المستخدمين.
UX: الإطار السلكي للصفحة الرئيسية، الإصدار 1. مفهوم الصفحة الرئيسية للمدرسة: التعليم الإلكتروني للجميع.
تُظهر الصورة الإطار السلكي للنسخة الأولية من الصفحة الرئيسية لموقع مدرسة، وهي منصة تعليمية عبر الإنترنت. تتضمن العناصر الرئيسية أقسامًا مخصصة لملفات تعريف المستخدمين والأخبار وعروض الفائزين أو المسابقات. في الوسط، يوجد قسم بعنوان "مسار التعلم" يقدم محرك بحث وخرائط تقدم تفاعلية مع النقاط الممنوحة. ويحتوي القسم السفلي على معلومات حول رؤية المنصة وأهدافها وميزاتها، بالإضافة إلى روابط التنزيل لتطبيقات Android وiOS.
واجهة المستخدم: الانتهاء من صفحة الملف الشخصي. الصفحة الرئيسية للمدرسة الديناميكية.
الصورة توضح النسخة النهائية للصفحة الرئيسية لمنصة مدرسة للتعليم الإلكتروني. في الجزء العلوي، هناك لافتة تدعو المستخدمين إلى أن يكونوا الأفضل في بلدهم، مصحوبة بتسليط الضوء على الفائزين والجوائز. يتضمن القسم المركزي "مسار التعلم" التفاعلي مع الفئات الملونة ونقاط التقدم. يسلط الصندوق الضوء على اقتباس ملهم لمحمد بن راشد آل مكتوم. وفي الجزء السفلي، تحدد المنصة رسالتها ورؤيتها وأهدافها، إلى جانب روابط لتنزيل التطبيقات على أنظمة iOS وAndroid، وكل ذلك مكتمل بمخطط ألوان أرجواني وأبيض لتصميم جذاب واحترافي.
واجهة المستخدم: إنشاء النوافذ المنبثقة. اختيار الصورة الرمزية. تخصيص الصورة الرمزية – مدرسة.
تُظهر الصورة نافذة منبثقة من منصة مدرسة مخصصة لتخصيص الصورة الرمزية. تتميز المنطقة الرئيسية بمجموعة مختارة من أيقونات الديناصورات المصورة مع مجموعة متنوعة من الملحقات والموضوعات. يأتي كل رمز مصحوبًا بأسطورة تشير إلى عدد النقاط المطلوبة لفتحه. العناصر المفتوحة تكون ملونة، بينما العناصر المقفلة تكون باللون الرمادي مع شارة "مقفلة". الواجهة، ذات الخلفية الأرجوانية، بسيطة وجذابة، وتشجع المستخدمين على التفاعل وتخصيص تجربتهم على المنصة.
UX: إنشاء إطار سلكي لصفحة الملف الشخصي. الملف الشخصي التفاعلي للمستخدم على مدرسة.
الصورة توضح نموذجًا لصفحة "ملفي الشخصي" على منصة مدرسة التعليمية. في الجزء العلوي، يتم عرض مستوى المستخدم واللقب الخاص به، بالإضافة إلى زر لتحسين رتبته. يقدم قسم "الدرس اليومي" فيديو تعليميًا مع إمكانية كسب نقاط بعد المشاهدة. فيما يلي مجموعة من الشارات التي تشير إلى إنجازات المستخدم في فئات مختلفة. وأخيرًا، تتيح لك قائمتا "قائمة المشاهدة" و"دروسي الخمسة الأخيرة" تتبع مقاطع الفيديو التي تمت مشاهدتها أو التي سيتم مشاهدتها، مع النقاط المرتبطة بكل محتوى. التصميم بديهي ويركز على التفاعل وإشراك المتعلم.
واجهة المستخدم: إنشاء النافذة المنبثقة للخريطة. أفضل 10 مستخدمين للمدرسة في مصر.
تُظهر الصورة نموذجًا لأفضل 10 مستخدمين في منصة مدرسة التعليمية في مصر. كل مرتبة، من المركز الأول إلى المركز العاشر، مصحوبة باسم المستخدم، وصورة رمزية، ومؤشر لعدد مقاطع الفيديو المكتملة (هنا، 50 مقطع فيديو لكل مستخدم). تم تقسيم التصنيف إلى عمودين، بتصميم واضح وألوان أرجوانية مميزة. في الجزء العلوي، يتم عرض اسم الدولة مع علمها الوطني، مما يعزز الطبيعة التنافسية والمجتمعية للمنصة.
واجهة المستخدم: الانتهاء من تخطيط ملف التعريف الخاص بي. صفحة الملف الشخصي للمستخدم على مدرسة.
تظهر الصورة صفحة الملف الشخصي للمستخدم على منصة مدرسة التعليمية. في الجزء العلوي، يتم عرض المرتبة والنقاط مع صورة الكأس الذهبية المميزة. يتضمن القسم التالي درسًا يوميًا، بالإضافة إلى فيديو تعليمي ونقاط يمكنك كسبها مقابل مشاهدته. في الأسفل، يعرض قسم "الشارات" التميزات المختلفة التي تم الحصول عليها أو التي سيتم فتحها، مع أيقونات ملونة. وأخيرًا، يستطيع المستخدم الاطلاع على "قائمة المشاهدة" و"آخر 5 دروس" الخاصة به، والتي تم تنظيمها حسب الفئة والنقاط التي حصل عليها. تم تصميم الصفحة بتصميم نظيف مع لمسات من اللون الأرجواني، وهو ما يميز الميثاق الرسومي للمدرسة.
نعم ؛ الانتهاء من نموذج مسار التعلم. دورة تعليمية عن المدرسة.
تمثل هذه الصورة قسم "مسار التعلم" في المدرسة. في أعلى الصفحة، تظهر رسالة تهنئ المستخدم على رتبته الحالية ونقاطه. يحتوي القسم المركزي على مسارات تعليمية مختلفة ("قائمة المسارات") مع معلومات حول النقاط التي يجب كسبها وعدد مقاطع الفيديو والوقت المقدر لإكمالها. يعرض مشغل الفيديو أدناه درسًا نموذجيًا يحتوي على محتوى علمي تعليمي. على اليمين، تسمح "قائمة مراقبة المسار" للمستخدم بتتبع التعلم الخاص به. التصميم واضح وبديهي، ويتميز بدرجات اللون الأرجواني التي تتناسب مع الهوية البصرية للمنصة.
واجهة المستخدم: نموذج لوحة المتصدرين. التصنيفات والأداءات على مدرسة.
تُظهر هذه الصورة قسم "لوحة المتصدرين" في مدرسة، حيث يمكن للمستخدمين عرض التصنيفات استنادًا إلى النقاط المتراكمة. يعرض الجزء العلوي رسالة تهنئة تحتوي على رتبة المستخدم الحالي ونقاطه. تُظهر لوحة المتصدرين الرئيسية أفضل 100 مستخدم مع رتبهم ونقاطهم وصورهم الرمزية. في الأسفل، يتم تقسيم التصنيفات المحددة حسب الفئات (أ، ب، ج) مع علامات تبويب ملونة لكل جزء. يوضح القسم السفلي "أفضل 10 حسب البلد" باستخدام خريطة تفاعلية للدول العربية، حيث تشير العلامات الأرجوانية إلى المواقع النشطة. تعكس لوحة الألوان الأرجوانية والزرقاء الهوية البصرية لـMadrasa، مما يوفر تجربة مستخدم واضحة وجذابة.
UX: الإطار السلكي للصفحة الرئيسية، الإصدار 2. نموذج الصفحة الرئيسية للمدرسة (الإصدار 2).
تقدم هذه الصورة إطارًا سلكيًا لصفحة رئيسية مقترحة للمدرسة، وهي تعرض تخطيطًا واضحًا ومنظمًا. يتضمن القسم العلوي دعوة للعمل بشأن المسابقة والفائزين، يليه قسم لاختيار مجال التعلم. ويقدم قسم آخر مسارات تعليمية في شكل خرائط ومؤشرات تقدم. يمكن للمستخدمين أيضًا تتبع تقدمهم من خلال زر تسجيل الدخول أو إنشاء حساب. في الأسفل، يصف قسم "حول" مهمة مدرسة ورؤيتها وأهدافها، بينما تسمح لك الأزرار بتنزيل تطبيقات الهاتف المحمول. يتضمن التصميم أشكالاً مستديرة وانتقالات سلسة، مما يعزز التنقل الممتع والبديهي.
