تصميم تفاعل الواقع المعزّز — المستوى 2: متوسط

ملخص: تُعمِّق هذه الدورة المتوسطة مهارات تصميم تفاعل AR مع التركيز على أنماط التفاعل المكاني وبيئة العمل واختبار المستخدمين المنظَّم والمشاهد متعددة الأماكن. يعمل الطلاب مع ARKit/ARCore (عبر Unity AR Foundation أو 8thWall) ويُنجزون مشروع وساطة ثقافية أو تعليمية. المحاور: أنماط UX المكانية ← بيئة العمل والراحة ← مشاهد متعددة الأماكن ← الصوت المكاني ← اختبار مستخدمين منظَّم ← تكرار قائم على البيانات ← التصميم البصري في AR ← مشروع البورتفوليو.

أهداف التعلم

في نهاية هذه الدورة، سيكون الطالب قادراً على:

1. تحليل (تحليل) تجربة AR قائمة وفق معايير المؤثر والراحة والاتساق المكاني.
2. تصميم (إنشاء) أنماط تفاعل متقدمة: تفاعل قريب/بعيد، Dwell، صوت، UI مرتبطة بالجسم مقابل مرتبطة بالعالم.
3. تنفيذ (تطبيق) مشهد AR متعدد الأماكن مع صوت مكاني وانتقالات حالة.
4. إجراء (تطبيق) اختبارات مستخدمين منظَّمة واستخلاص رؤى قابلة للتنفيذ.
5. تكرار (تقييم + إنشاء) نموذج أولي استناداً إلى بيانات اختبارات حقيقية.
6. إنتاج (إنشاء) مشروع وساطة ثقافية AR موثَّق وقابل للعرض والاختبار.

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

المفهوم

تتمايز أنماط تفاعل AR عن أنماط الواجهة ثنائية الأبعاد بعُمقها المكاني وقيودها الجسدية.

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

المرجع: Apple Human Interface Guidelines — Spatial UI: https://developer.apple.com/design/human-interface-guidelines/spatial-ui

المختبر 1.1 — جرد الأنماط

الخطوات:

1. اختر تطبيقَي AR معروفَين (Pokémon GO، IKEA Place، Google Lens، أو آخر)
2. لكل منهما، أدرج جميع أنماط التفاعل الموجودة (5 دقائق اختبار نشط)
3. لكل نمط: سمِّه، صف المُشغِّل، صف التغذية الراجعة
4. قارن التطبيقَين: ما الأنماط التي يمتلكها أحدهما دون الآخر؟

تمرين قصير: صمِّم على الورق مسار التفاعل (user flow) لتجربة AR من اختيارك — 5 خطوات كحد أقصى، كل خطوة مع نمطها الرئيسي.

الوحدة 2 — بيئة العمل وراحة AR (ساعتان)

المفهوم

يفرض الواقع المعزّز قيوداً جسدية محددة. تجاهلها يفضي إلى تجارب مُتعِبة أو مؤلمة.

المشكلات الرئيسية والحلول:

منطقة الراحة البصرية: بين 0.5 م و10 م من المستخدم، على مستوى العين (±30°).

المصدر: Caudell, T., & Mizell, D. (1992). Augmented Reality: an application of heads-up display technology to manual manufacturing processes. HICSS, pp. 659–669.

المختبر 2.1 — تدقيق بيئة العمل

الخطوات:

1. خذ النموذج الأولي من المستوى 1 (أو نموذجاً قائماً)
2. اجعل شخصين يختبرانه لمدة 5 دقائق لكل منهما
3. قِس: على أي ارتفاع يُمسك المستخدم هاتفه؟ هل يرفع ذراعَيه؟ هل يُحرِّك قدمَيه؟
4. حدِّد مشكلة بيئية واحدة واقترح تصحيحاً في التصميم

تمرين قصير: ارسم «المنطقة المثلى» لتجربتك AR: أين في الفضاء المادي يكون التفاعل مثالياً؟ على أي مسافة، على أي ارتفاع؟

الوحدة 3 — واجهة المستخدم المكانية المتقدمة (ساعتان)

المفهوم

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

قواعد التصميم:

• مرتبطة بالعالم (World-locked) (افتراضياً): أفضل اتساق مكاني، تُقلِّل الإجهاد
• مرتبطة بالجسم (Body-locked) (مثال: لوحة على المعصم): محجوزة للأدوات المُستخدمة كثيراً
• مرتبطة بالرأس (Head-locked): تجنَّبها إلا للتنبيهات الحرجة العابرة (< 3 ثوانٍ)
• دييجيتية (Diegetic): يُفضَّل حين يمكن للواجهة أن تكون جزءاً من السرد

الطباعة في AR:

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

المرجع: Microsoft MRTK UX Guidelines: https://docs.microsoft.com/windows/mixed-reality/design/typography

المختبر 3.1 — نمذجة أولية لواجهة مكانية

الخطوات:

1. اختر سيناريو: دليل متحف AR، أو مساعدة تجميع، أو استكشاف نبتة
2. صمِّم 3 أشكال بديلة للواجهة (مرتبطة بالعالم / مرتبطة بالجسم / دييجيتية)
3. نمِّذج ورقياً كل منها في 5 دقائق
4. اجعل شخصين يختاران الشكل الأكثر طبيعية — دوِّن أسبابهما

تمرين قصير: حدِّد لمشروع التخرج: أي نوع واجهة مستخدم أنسب ولماذا في 3 جمل.

الوحدة 4 — مشاهد متعددة الأماكن (ساعتان)

المفهوم

يمكن لتجربة AR أن تحتوي كائنات مثبَّتة على أسطح مختلفة، ومراسي صورية، وكائنات مستمرة بين الجلسات.

بنية مشهد متعدد الأماكن:

• لكل رسو معرِّف فريد
• تُرجِع الكائنات إلى رسوها الأصلي
• الانتقالات بين المراسي مُتحرِّكة (تلاشٍ، إزاحة)
• الاستمرارية (مراسي سحابية) تستلزم خدمة خلفية

مع A-Frame + AR.js: html <!-- علامتان مختلفتان تُفعِّلان كائنَين مختلفَين --> <a-marker type="pattern" url="pattern-a.patt"> <a-sphere position="0 0.5 0" color="blue"></a-sphere> </a-marker> <a-marker type="pattern" url="pattern-b.patt"> <a-cone position="0 0.5 0" color="red"></a-cone> </a-marker>

مولّد علامات A-Frame: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

المختبر 4.1 — مشهد بـ3 علامات

الخطوات:

1. أنشئ 3 علامات مخصصة (صور بسيطة)
2. أنشئ مشهد A-Frame يعرض كائناً مختلفاً على كل علامة
3. تُشكِّل الكائنات الثلاثة مجموعة سردية متسقة (مثال: 3 خطوات لعملية، 3 حالات لكائن واحد)
4. اختبر مع 3 علامات مطبوعة على ورقة A4 واحدة

تمرين قصير: كيف تُشير للمستخدم بوجود علامات أخرى ليجدها؟ صمِّم المؤثر (بلا نص صريح).

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

المفهوم

يُثبِّت الصوت المكاني (الصوت ثلاثي الأبعاد) الأصوات في الفضاء المادي. كائن AR على اليسار يُصدر صوتاً من اليسار؛ حين يقترب المستخدم، يزداد الصوت.

لماذا الصوت المكاني أساسي:

• يُعوِّض غياب الاستجابة اللمسية
• يُوجِّه الانتباه نحو كائنات خارج الشاشة
• يُعزِّز حضور كائن AR

في A-Frame: html <a-box position="-2 1 -3"> <a-sound src="#mysound" autoplay="true" positional="true" rolloff-factor="1"></a-sound> </a-box>

مصادر صوتية مجانية (CC0): https://freesound.org · https://pixabay.com/music/

المختبر 5.1 — تغذية راجعة صوتية مكانية

الخطوات:

1. خذ مشهد المختبر 4.1 (3 علامات)
2. أضف صوتاً مختلفاً لكل كائن (3 أصوات < 2 ثانية، CC0)
3. تُشغَّل الأصوات عند التحويم (hover) على كل كائن
4. اختبر: هل يأتي الصوت من المكان الصحيح في الفضاء؟

تمرين قصير: حدِّد 3 مواقف في مشروع التخرج حيث يمكن للصوت أن يحل محل تغذية راجعة بصرية أو يُكمِّلها.

الوحدة 6 — اختبار المستخدمين المنظَّم (ساعتان)

المفهوم

ينتج اختبار المستخدمين المنظَّم بيانات قابلة للمقارنة بين المشاركين. الطرق الملائمة للـAR:

بروتوكول التفكير بصوت عالٍ (Think-aloud): يصف المستخدم ما يفعله ويشعر به في الوقت الفعلي.

Eriksson, M., & Wiberg, M. (2003). Towards a theory of mobile work.

شبكة ملاحظة منظَّمة:

• أُنجزت المهمة: نعم/لا
• وقت الإنجاز
• عدد الأخطاء
• لحظات التردد (> 3 ثوانٍ)
• التعليقات العفوية

SUS (مقياس قابلية الاستخدام للنظام): استبيان 10 أسئلة معياري (Brooke، 1996) يُحسب منه درجة من 0 إلى 100.

Brooke, J. (1996). SUS: A "quick and dirty" usability scale. In Jordan et al. (Eds.), Usability Evaluation in Industry. Taylor & Francis. https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html

المختبر 6.1 — اختبار منظَّم مع SUS

الخطوات:

1. حدِّد مهمتَين ملموستَين لنموذجك الأولي (مثال: «ضع الكائن الأزرق على الطاولة» + «نشِّط الكائن الأحمر»)
2. جهِّز شبكة الملاحظة (أعمدة: مشارك / المهمة 1 مُنجزة / الوقت / الأخطاء / التردد)
3. اختبر مع 3 أشخاص
4. اجعل كل مشارك يملأ استبيان SUS بعد الجلسة
5. احسب متوسط درجة SUS

تمرين قصير: قارن درجة SUS مع المعايير المرجعية (< 50 = سيئ، 50–70 = مقبول، 70–85 = جيد، > 85 = ممتاز). حدِّد المشكلة الأكثر تكراراً في بياناتك.

الوحدة 7 — التكرار القائم على البيانات (ساعتان)

المفهوم

يتبع التكرار في تصميم AR الدورة الكلاسيكية: نموذج أولي ← اختبار ← تحليل ← تصحيح ← إعادة اختبار. الخصوصية في AR أن التصحيحات قد تمس التصميم البصري ومنطق التفاعل والأجهزة المستهدفة في آنٍ واحد.

أولوية التصحيحات:

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

تصميم AR Sprint: أسبوع لاختبار فرضية تفاعل — مستوحى من جاك ناب، Sprint (2016).

المختبر 7.1 — تكرار واحد موثَّق

الخطوات:

1. خذ نتائج المختبر 6.1
2. حدِّد المشكلة الأولى (الأكثر تكراراً/عائقاً)
3. اقترح حلَّين مختلفَين على الورق (شكلان بديلان)
4. طبِّق الحل المختار في النموذج الأولي
5. أعد الاختبار مع شخص واحد: هل حُلَّت المشكلة؟

تمرين قصير: وثِّق دورة التصحيح: المشكلة الملحوظة ← فرضية الحل ← التغيير المُنفَّذ ← نتيجة الاختبار. فقرة واحدة، واقعية.

الوحدة 8 — التصميم البصري في AR (ساعتان)

المفهوم

تتعايش كائنات AR مع بيئات تصويرية حقيقية ومتغيرة ولا يمكن التنبؤ بها. يجب أن يكون التصميم البصري في AR قادراً على التكيف مع هذا التغيُّر.

المبادئ:

• تباين تكيُّفي: يجب أن تبقى كائنات AR مقروءة على الخلفية الفاتحة والداكنة
• ظل موضوع: محاكاة ظل تحت كائن AR تُعزِّز إدراك العمق بشكل ملحوظ
• مواد PBR (التصيير القائم على الفيزياء): تستجيب للإضاءة المحيطة المُقدَّرة ← اتساق بصري
• تجنُّب الأبيض الخالص والأسود الخالص: تباين مفرط مع البيئات الطبيعية

في A-Frame، مادة عاكسة: html <a-sphere material="color: #888888; metalness: 0.5; roughness: 0.2; envMap: #envmap"></a-sphere>

فحص إمكانية الوصول: ألوان تلتزم WCAG 2.1 AA (نسبة تباين ≥ 4.5:1 للنص).

المختبر 8.1 — مراجعة بصرية للنموذج الأولي

الخطوات:

1. اختبر نموذجك الأولي في 3 بيئات مختلفة (داخلي بضوء اصطناعي، داخلي بجانب نافذة، خارجي في الظل)
2. التقط صورة لكل حالة: هل كائنات AR مقروءة؟
3. حدِّد الإخفاقات البصرية (سطوع ساحق، فقدان التباين)
4. طبِّق تصحيحَين بصريَّين: ظل موضوع محاكى + مادة أقل تشبُّعاً

مشروع التخرج — «وساطة ثقافية AR»

الموجز

صمِّم ونمِّذج تجربة وساطة ثقافية AR لفضاء قائم (متحف، مكتبة، فضاء عام، فصل دراسي). يجب أن تُثري التجربة فهم كائن أو مكان أو مفهوم.

القيود

• التكنولوجيا: A-Frame + AR.js أو 8thWall (WebAR)
• المدة المستهدفة: 3–5 دقائق لمستخدم
• على الأقل نوعا تفاعل مختلفان (tap-to-place + صوت مكاني، أو علامة + dwell)
• مُختبَر مع 3 مستخدمين كحد أدنى (SUS + شبكة ملاحظة)
• تكرار مرة واحدة على الأقل بناءً على الاختبارات

المُسلَّمات

1. نموذج أولي وظيفي (رابط أو ملفات)
2. تقرير التصميم (3–5 صفحات): المفهوم، مسار المستخدم، 5 قرارات تصميمية مع مبرراتها، نتائج الاختبارات (بيانات خام + تحليل)
3. عرض (10 دقائق): عرض حي + نتائج الاختبارات + تأمل فيما نجح / لم ينجح

معيار التقييم

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

• Apple HIG — Spatial UI: https://developer.apple.com/design/human-interface-guidelines/spatial-ui
• Microsoft MRTK Design: https://docs.microsoft.com/windows/mixed-reality/design/
• Brooke, J. (1996). SUS: A "quick and dirty" usability scale. https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html
• Freesound.org (أصوات CC0): https://freesound.org
• AR.js docs: https://ar-js-org.github.io/AR.js-Docs/
• 8thWall: https://www.8thwall.com
• Knapp, J. (2016). Sprint. Simon & Schuster.

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