تصميم التفاعل في الواقع الافتراضي — المستوى الثاني: متوسط

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

أهداف التعلم

في نهاية هذه الدورة، سيتمكن الطلاب من:

1. تطبيق (بلوم: التطبيق) 4 أنماط تفاعل مكاني على الأقل تناسب سياقات مختلفة
2. تشخيص (التحليل) مشكلات الإرغونوميا (دوار الحركة، سوء وضع الواجهة، أخطاء المسافة/الحجم)
3. تصميم (الإنشاء) واجهة مستخدم ثلاثية الأبعاد متسقة: لوحات مرتبطة بالعالم، نص مقروء في العمق، تسلسل هرمي بصري
4. بناء (الإنشاء) تنقل واقع افتراضي متعدد المناطق مع نقاط طريق في A-Frame
5. تصميم (الإنشاء) تصميم صوت مكاني بـ3 طبقات (محيط / موضعي / واجهة مستخدم)
6. تقييم (التقييم) تجربة واقع افتراضي بمقياس SUS (10 أسئلة مُكيَّفة + صيغة الحساب)
7. تحديد الأولويات (التطبيق) تصحيحات التصميم بشبكة P0/P1/P2

الوحدة 1 — أنماط التفاعل المكاني (2 ساعة)

المفهوم

النمط المكاني التفاعلي هو حل قابل لإعادة الاستخدام لمشكلة تفاعل متكررة في الواقع الافتراضي. معرفة هذه الأنماط تُجنّب إعادة اختراع حلول مُختبرة ومُتحقق منها.

الأنماط الخمسة الأساسية:

كيف تختار؟

• التلاعب القريب → الإمساك القريب
• الاختيار البعيد → رمي الأشعة
• إتاحة (أيدٍ حرة) → النظرة + التوقف
• تعليم خطوة بخطوة → الإمساك بالمقبس
• التنقل بين المناطق → الانتقال الفوري

التمرين المعملي 1.1 — تدقيق الأنماط

الخطوات:

1. افتح تجربة واقع افتراضي موجودة (YouTube VR، Wander، Rec Room على Quest)
2. لكل تفاعل: حدد النمط المستخدم، التغذية الراجعة المُقدَّمة، تحسينًا محتملًا
3. ارسم جدولًا بعمودَين: "التفاعل الملاحَظ" / "النمط المستخدم / البدائل"

تمرين مصغر: لمشروعك الختامي المستقبلي (الوساطة الثقافية)، أدرج 5 تفاعلات مخططة واختر النمط المناسب لكل منها.

الوحدة 2 — إرغونوميا الواقع الافتراضي ودوار الحركة (2 ساعة)

المفهوم

دوار الواقع الافتراضي (Cybersickness) هو العدو الأول لمصمم الواقع الافتراضي. ينتج عن تعارض بين الإشارات البصرية (الحركة في الواقع الافتراضي) والإشارات الدهليزية/الحسية الجسدية (السكون الجسدي أو الحركة).

العوامل التقنية للتحكم فيها:

• معدل الإطارات (Framerate): الحد الأدنى 60 fps (مثالي 90–120 fps حسب الخوذة). تحت 45 fps → غثيان مضمون.
• تأخر الحركة إلى الفوتون (Motion-to-photon latency): الحد الأقصى 20ms. فوق ذلك → تنافر مرئي بين حركة الرأس وتحديث الصورة.
• لا حركة كاميرا غير مُبادَر بها: يجب ألا تتحرك الكاميرا أبدًا إلا إذا بادر المستخدم بذلك.
• لا تسارعات مفاجئة: تجنب التلاشيات السريعة، الصدمات البصرية، التكبير المفاجئ.
• IPD: تحقق من ضبط المسافة بين الحدقتين بشكل صحيح على الخوذة.

قائمة التحقق من الراحة (تطبيقها قبل أي اختبار مستخدم):

التمرين المعملي 2.1 — تدقيق الإرغونوميا على تجربة موجودة

الخطوات:

1. اختر تجربة WebVR متاحة بحرية (مثال A-Frame أو مشابه)
2. تنقّل لمدة 5 دقائق من منظور مستخدم غير معتاد
3. أملأ قائمة التحقق من الراحة: ما الذي ينجح، ما الذي لا ينجح؟
4. اقترح 3 تحسينات ملموسة للمشكلة الأكثر أهمية

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

الوحدة 3 — واجهة المستخدم ثلاثية الأبعاد: تصميم الواجهات المكانية (2 ساعة)

المفهوم

يجب تصميم واجهة المستخدم ثلاثية الأبعاد في الواقع الافتراضي بشكل مختلف عن الواجهة المسطحة. ثلاثة أنواع من التثبيت:

تجنب واجهة المستخدم المرتبطة بالرأس: قائمة ملصقة بمجال الرؤية تُسبب إجهاد تقارب العيون بعد 2–3 دقائق. تفضيل المرتبط بالعالم أو الدرامي.

نص مقروء في ثلاثي الأبعاد:

• الحجم الأدنى للخط: 0.1م على مسافة 1م (≈ 10°)
• عرض السطر الأقصى: 40–50 حرفًا (راحة القراءة)
• تباين كافٍ: نسبة ≥ 4.5:1 (WCAG AA)
• لا أكثر من 3 مستويات طباعية في اللوحة ذاتها

لوحة مرتبطة بالعالم في A-Frame: html <a-entity id="info-panel" position="0 1.6 -2" rotation="0 0 0"> <a-plane width="0.8" height="0.6" color="#1a1a2e" opacity="0.85"></a-plane> <a-text value="العنوان" position="0 0.2 0.01" color="white" align="center" width="1.2" font="roboto"></a-text> <a-text value="نص الجسم. 50 حرفًا كحد أقصى في السطر." position="0 0 0.01" color="#cccccc" align="center" width="1.0" font="roboto" wrap-count="50"></a-text> </a-entity>

التمرين المعملي 3.1 — لوحة واجهة مستخدم ثلاثية الأبعاد

الخطوات:

1. في مشهد A-Frame، أنشئ 3 لوحات مرتبطة بالعالم متمايزة على ارتفاعات ومسافات مختلفة
2. لكل منها: عنوان + 2–3 أسطر نص + زر إغلاق (رسوم متحركة عند النقر)
3. اختبر على مسافة 1م، 2م، 3م: أي المسافات مقروءة؟ أيها يُسبب تقارب العيون؟
4. راجع بناءً على الملاحظات

تمرين مصغر: لمشروعك الختامي، ارسم 3 لوحات واجهة مستخدم مكانية: الموضع في الفضاء، محتوى مقروء من 1م، التسلسل الهرمي البصري (عنوان / جسم / فعل).

الوحدة 4 — التنقل متعدد المناطق (2 ساعة)

المفهوم

تجربة الواقع الافتراضي متعددة المناطق منظمة حول نقاط الطريق (Waypoints): نقاط تنقل محددة مسبقًا ينتقل منها المستخدم.

المبادئ:

• يجب أن تكون نقطة الطريق مرئية وضوحًا ومفهومة كـ"وجهة محتملة"
• لا أكثر من 7 نقاط طريق في منطقة واحدة (الحمل المعرفي)
• أعطِ تغذية راجعة على "الوصول": رسوم متحركة قصيرة، صوت، تغيير بيئي

قالب نقاط الطريق متعددة المناطق في A-Frame: `html <!-- نقطة طريق 1 — المنطقة أ --> <a-entity id="waypoint-a" position="-3 0 -2"> <a-cylinder radius="0.3" height="0.02" color="#00ff88" animation="property: position; from: -3 0.02 -2; to: -3 0.12 -2; dir: alternate; loop: true; dur: 1500; easing: easeInOutSine"> </a-cylinder> <a-text value="المنطقة أ" position="0 0.3 0" align="center" color="white" width="1"></a-text> </a-entity>

<!-- نقطة طريق 2 — المنطقة ب --> <a-entity id="waypoint-b" position="3 0 -4"> <a-cylinder radius="0.3" height="0.02" color="#0088ff" animation="property: position; from: 3 0.02 -4; to: 3 0.12 -4; dir: alternate; loop: true; dur: 1500; easing: easeInOutSine"> </a-cylinder> <a-text value="المنطقة ب" position="0 0.3 0" align="center" color="white" width="1"></a-text> </a-entity> `

الخريطة المعرفية: يجب أن يتمكن المستخدم من إعادة بناء بنية المساحة من تجربته. المعالم البصرية وألوان المناطق المتنوعة والكشف التدريجي تُساعد في بناء هذه الخريطة الذهنية.

التمرين المعملي 4.1 — تجربة منطقتَين

الخطوات:

1. أنشئ مشهدًا بمنطقتَين متمايزتَين بوضوح (لون، محتوى، جو)
2. أضف 2–3 نقاط طريق لكل منطقة (بما فيها نقطة طريق بين المنطقتَين)
3. أضف رسوم متحركة "عند الوصول" على كل نقطة طريق (دوران أو نبضة لون قصيرة)
4. اختبر مع شخصَين: هل يمكنهما رسم خريطة المساحة بعد زيارتها؟

تمرين مصغر: لمشروعك الختامي، ارسم خريطة المناطق مع: البداية، نقاط الطريق بين المناطق، كثافة المعلومات لكل منطقة، المدة المقدرة لكل منطقة.

الوحدة 5 — معمارية الصوت المكاني (2 ساعة)

المفهوم

الصوت المكاني الجيد في الواقع الافتراضي منظم في 3 طبقات:

التلاشي التبادلي بين المناطق (JavaScript): javascript AFRAME.registerComponent('zone-audio', { schema: { from: {type: 'selector'}, to: {type: 'selector'}, duration: {default: 2000} }, init: function() { this.el.addEventListener('zone-enter', () => { const from = this.data.from.components.sound; const to = this.data.to.components.sound; this.fade(from, to, this.data.duration); }); }, fade: function(from, to, duration) { let startVol = from.data.volume; let elapsed = 0; const interval = setInterval(() => { elapsed += 100; const t = elapsed / duration; from.el.setAttribute('sound', 'volume', startVol * (1 - t)); to.el.setAttribute('sound', 'volume', t * 0.3); if (elapsed >= duration) { clearInterval(interval); from.el.components.sound.stopSound(); } }, 100); to.el.components.sound.playSound(); } });

التمرين المعملي 5.1 — معمارية صوت بـ3 طبقات

الخطوات:

1. لمشهد منطقتَيك: أضف صوتًا محيطيًا لكل منطقة
2. أضف مصدرَي صوت موضعي على الأقل (أشياء "تُصدر" صوتًا)
3. أضف 3 أصوات تفاعل (طبقة واجهة المستخدم)
4. اختبر بعيون مغمضة: هل يمكنك تحديد موضع كل منطقة من الصوت وحده؟ هل يمكنك معرفة تأكيد التفاعل؟

تمرين مصغر: اكتب دليل التصميم الصوتي لمشروعك الختامي: أدرج كل مصدر صوت (نوع، طبقة، ملف، مستوى صوت).

الوحدة 6 — تقييم SUS: اختبار المستخدم (2 ساعة)

المفهوم

مقياس سهولة الاستخدام للنظام (SUS — System Usability Scale) استبيان معياري من 10 بنود لتقييم سهولة استخدام الواجهة الإجمالية. مُكيَّف للواقع الافتراضي، يقيس الراحة الإجمالية وقابلية التعلم.

المصدر: Brooke, J. (1996). SUS: A "Quick and Dirty" Usability Scale. In Jordan, P. W. et al. (Eds.), Usability Evaluation in Industry. Taylor & Francis, pp. 189–194.

10 بنود مُكيَّفة للواقع الافتراضي (متناوبة: إيجابية/سلبية):

1. أعتقد أنني أودّ استخدام تجربة الواقع الافتراضي هذه بشكل متكرر.
2. وجدت هذه التجربة معقدة بلا داعٍ.
3. اعتقدت أن التجربة كانت سهلة الاستخدام.
4. أعتقد أنني سأحتاج إلى مساعدة شخص تقني لاستخدام هذه التجربة.
5. وجدت الميزات المختلفة في هذه التجربة متكاملة جيدًا.
6. اعتقدت أن هناك الكثير من التناقضات في هذه التجربة.
7. أتخيل أن معظم الناس سيتعلمون استخدام هذه التجربة بسرعة كبيرة.
8. وجدت التجربة صعبة الاستخدام للغاية.
9. شعرت بثقة كبيرة في استخدام التجربة.
10. احتجت إلى تعلم أشياء كثيرة قبل أن أتمكن من البدء في هذه التجربة.

صيغة الحساب: كل بند يُصنَّف من 1 (لا أوافق بشدة) إلى 5 (أوافق بشدة). درجة SUS = Σ[(درجة البند الفردي − 1) + (5 − درجة البند الزوجي)] × 2.5

التمرين المعملي 6.1 — اختبار SUS

الخطوات:

1. جهّز 10 أسئلة مُكيَّفة للواقع الافتراضي على نموذج مطبوع أو رقمي
2. اختبر مع ≥ 3 مختبرين (مثالًا: ملفات غير معتادة: غير لاعبين، أشخاص لا يعرفون الواقع الافتراضي)
3. احسب درجة SUS لكل مختبر والمتوسط
4. حدد البندَين الأقل درجةً → يدلان على المشكلات ذات الأولوية

تمرين مصغر: بفرض درجات 4، 2، 5، 1، 4، 2، 5، 2، 4، 1 — احسب درجة SUS. فسّر النتيجة.

(الحل: (4-1)+(5-2)+(5-1)+(5-1)+(4-1)+(5-2)+(5-1)+(5-2)+(4-1)+(5-1) = 3+3+4+4+3+3+4+3+3+4 = 34 → 34×2.5 = 85. الدرجة: 85/100 — ممتاز.)

الوحدة 7 — تحديد الأولويات: شبكة P0/P1/P2 (2 ساعة)

المفهوم

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

شبكة P0/P1/P2:

شجرة قرار التصحيح:

1. هل تتكرر هذه المشكلة لدى ≥ 2 مختبر؟ → نعم → P0 أو P1 / لا → P2 أو تجاهل
2. هل تُسبب هذه المشكلة فشل المهمة أو دوار الحركة؟ → نعم → P0 / لا → P1
3. هل التصحيح سريع (< 1 ساعة)؟ → نعم → أصلحه فورًا / لا → جدوله للتكرار التالي

التمرين المعملي 7.1 — تحديد أولويات نتائج SUS

الخطوات:

1. أدرج جميع المشكلات الملاحظة من التمرين المعملي 6.1 (SUS + ملاحظات مباشرة)
2. صنّف كل مشكلة P0 / P1 / P2 باستخدام شجرة القرار
3. ضع خطة تصحيح لأسبوع واحد: P0 في أول يومَين، P1 في الأيام 3–5
4. لكل تصحيح P0: صِف الحل المقترح وكيف ستتحقق منه

تمرين مصغر: يتقيأ مختبر أثناء الواقع الافتراضي. آخر لا يجد زر البداية. ثالث يجد النص ثلاثي الأبعاد صغيرًا جدًا. صنّف هذه المشكلات وبرر.

الوحدة 8 — التصميم البصري ثلاثي الأبعاد (2 ساعة)

المفهوم

التصميم البصري ثلاثي الأبعاد في الواقع الافتراضي يخضع لمبادئ خاصة بالفضاء التجسيمي.

قواعد النص ثلاثي الأبعاد:

لوحة الألوان ثلاثية الأبعاد:

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

العمق والفضاء السلبي:

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

التمرين المعملي 8.1 — تدقيق بصري

الخطوات:

1. التقط لقطة شاشة لمشهد الواقع الافتراضي في المتصفح
2. طبّق فلتر رمادي (Photoshop، GIMP، أو فلتر DevTools في المتصفح)
3. قيّم: هل التسلسل الهرمي البصري مرئي بدون لون؟ أي عناصر تضيع؟
4. طبّق مدقق التباين (https://webaim.org/resources/contrastchecker/) على كل نص
5. صحّح أكثر مشكلتَين أهمية

تمرين مصغر: لكل من لوحاتك الثلاث المرتبطة بالعالم، تحقق من: حجم الخط (بوحدات CSS px أو A-Frame)، نسبة التباين، عدد الحروف في السطر.

مشروع الختام — "واقع افتراضي للوساطة الثقافية"

الإيجاز

صمّم تجربة واقع افتراضي حول موضوع ثقافي من اختيارك (موقع تراثي، متحف، أرشيف تاريخي، عمل فني) تسمح لمستخدم باستكشاف الموضوع وفهمه بشكل مستقل.

القيود

• التكنولوجيا: A-Frame (WebXR) أو Unity (مع بناء WebGL/WebXR)
• منطقتان متمايزتان مع نقطتَي طريق على الأقل لكل منهما
• 3 لوحات معلومات مرتبطة بالعالم (عنوان + نص + صورة اختيارية)
• 3 مختبرين على الأقل لتقييم SUS (احسب الدرجة + شبكة تحديد الأولويات)
• لا تلزم خوذة للعرض — وظيفي في متصفح سطح المكتب

المحصّلات

1. رابط وظيفي (Glitch.com، itch.io، أو خادم شخصي)
2. توثيق التصميم (2–3 صفحات A4): المفهوم، خريطة المناطق، خيارات الأنماط، التصميم الصوتي
3. تقرير تقييم SUS: الدرجات الخام، المتوسط، 3 مشكلات ذات أولوية
4. عرض شفهي (8 دقائق): عرض مباشر + تأمل في قرارات التصميم + الدروس المستفادة

مقياس التقييم

القراءات والموارد

• Brooke, J. (1996). SUS: A "Quick and Dirty" Usability Scale. In Usability Evaluation in Industry.
• Boletsis, C., & Cedergren, J. E. (2019). VR Locomotion. https://doi.org/10.1155/2019/7420781
• LaViola Jr., J. J. (2000). A Discussion of Cybersickness. ACM SIGCHI Bulletin, 32(1), 47–56.
• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• مكونات A-Frame: https://www.npmjs.com/search?q=keywords:aframe
• A-Frame Teleport Controls: https://www.npmjs.com/package/aframe-teleport-controls
• مواصفات WebXR W3C: https://www.w3.org/TR/webxr/

→ المستوى السابق: تصميم التفاعل في الواقع الافتراضي — المستوى الأول → المستوى التالي: تصميم التفاعل في الواقع الافتراضي — المستوى الثالث → ورشة مخصصة لمدرستك أو استوديوك: احجزوا مكالمة 30 دقيقة — مجاناً