Design d'Interaction VR — Niveau 2 : Intermédiaire

Résumé EN (abstract): This intermediate VR interaction design course builds on WebXR basics to develop rigorous spatial design skills. Students learn VR-specific ergonomics (cybersickness prevention, comfort zones, spatial UI), implement multi-room navigation with teleportation, design 3D interfaces (world-locked menus, wrist UI), conduct structured user testing using the System Usability Scale (SUS), and iterate based on data. The capstone project is a cultural mediation VR experience tested with ≥3 users. Outline: Spatial patterns → VR ergonomics → Advanced spatial UI → Multi-zone navigation → Spatial audio design → Structured user testing (SUS) → Data-driven iteration → Visual design in 3D space.

Objectifs d'apprentissage

À la fin de ce cours, l'étudiant·e sera capable de :

1. Analyser (Bloom : analyzing) une expérience VR existante selon les critères de présence, confort et affordances spatiales.
2. Appliquer (applying) les principes ergonomiques VR (zones de confort, limites de locomotion, gestion de la cybersickness).
3. Concevoir (creating) une interface VR diégétique ou world-locked (panneau, poignet, tableau de bord).
4. Implémenter (applying) une navigation multi-zones avec téléportation et waypoints en A-Frame.
5. Évaluer (evaluating) une expérience VR avec le questionnaire SUS (System Usability Scale) et interpréter les scores.
6. Produire (creating) une expérience VR de médiation culturelle itérée après tests documentés.

Module 1 — Patterns d'interaction spatiale (2h)

Concept

Les patterns d'interaction spatiale sont des solutions récurrentes à des problèmes récurrents en design VR. Les connaître évite de réinventer des solutions mal conçues.

Cinq patterns fondamentaux :

Règle de cohérence : ne pas mélanger plusieurs patterns d'entrée sans logique claire. Si le raycasting est le mode principal, l'utilisateur ne doit pas deviner qu'il faut parfois marcher physiquement.

Lab 1.1 — Audit de patterns

Étapes :

1. Choisir une expérience VR existante en navigateur (ou un exemple A-Frame)
2. Identifier les patterns utilisés (au moins 2)
3. Pour chaque pattern : est-il bien signalé ? Cohérent avec les autres patterns ? Accessible aux non-gamers ?
4. Proposer 1 amélioration concrète

Module 2 — Ergonomie VR et prévention de la cybersickness (2h)

Concept

L'ergonomie VR est l'ensemble des contraintes qui permettent à un être humain d'utiliser une expérience VR pendant une durée prolongée sans inconfort ni danger.

Zone de confort visuel (depth of field) :

• Zone confortable : 0.5 m à 10 m de la caméra
• En dessous de 0.5 m : inconfort vergence-accommodation
• Au-delà de 10 m : perte de profondeur

Prévention cybersickness — checklist :

• [ ] Framerate ≥ 60 fps constant (90 fps recommandé pour casques)
• [ ] Latence motion-to-photon < 20ms
• [ ] Téléportation plutôt que locomotion continue pour les non-gamers
• [ ] Pas de mouvements de caméra non initiés par l'utilisateur (cut, zoom, rotation automatique)
• [ ] Horizon stable dans la scène (une ligne d'horizon rassure)
• [ ] Durée session recommandée < 30 min pour débutants

Références :

LaViola Jr., J. J. (2000). A Discussion of Cybersickness. ACM SIGCHI Bulletin, 32(1), 47–56.

Lab 2.1 — Audit de confort

Étapes :

1. Reprendre votre projet de Niveau 1
2. Appliquer la checklist cybersickness
3. Identifier 3 points d'inconfort potentiels
4. Proposer 1 fix par point

Module 3 — Interfaces spatiales avancées (2h)

Concept

En VR, l'interface utilisateur 2D plate désoriente. Les meilleures VR intègrent l'UI dans l'espace :

Types d'UI en VR :

Panneau world-locked en A-Frame :

<a-entity id="info-panel" position="-1.5 1.5 -2.5" rotation="0 15 0">
 <a-plane width="1.5" height="0.8" color="#1a1a2e" opacity="0.85"></a-plane>
 <a-text value="Œuvre : DATA RUG\nArtiste : Kamel Ghabte\nTechnique : tapis IA génératif"
 position="0 0 0.01" width="1.3" color="white" align="center"></a-text>
</a-entity>

Lab 3.1 — Panneau d'information world-locked

Étapes :

1. Créer un panneau world-locked dans votre scène
2. Positionnement : placez-le là où l'utilisateur le verra naturellement sans chercher
3. Contenu : 3 lignes d'information sur un objet de la scène
4. Ajouter une interaction : click sur le panneau → l'objet auquel il correspond s'illumine

Module 4 — Navigation multi-zones avec waypoints (2h)

Concept

Les expériences VR avec plusieurs zones (salles, espaces distincts) nécessitent un système de navigation cohérent. Les waypoints de téléportation sont les marqueurs visuels qui indiquent où l'utilisateur peut aller.

Bonnes pratiques waypoints :

• Visibilité depuis la position de départ (l'utilisateur ne doit pas chercher)
• Forme reconnaissable (cercle au sol, flèche, halo lumineux)
• Feedback hover (le waypoint s'anime quand visé)
• Feedback confirmation (flash ou animation au moment de la téléportation)

Template multi-zones A-Frame (structure) :

<!-- Zone 1 — Espace d'accueil -->
<a-entity id="zone-accueil" position="0 0 0">
 <a-plane id="waypoint-zone2" class="waypoint"
 position="0 0.01 -5" rotation="-90 0 0"
 width="0.8" height="0.8" color="#00ffcc" opacity="0.7"
 animation__pulse="property: opacity; from: 0.5; to: 1; dir: alternate; loop: true; dur: 1200">
 </a-plane>
</a-entity>
<!-- Zone 2 — Galerie -->
<a-entity id="zone-galerie" position="0 0 -10">
 <!--... -->
</a-entity>

Lab 4.1 — Expérience 2 zones

Étapes :

1. Créer 2 zones distinctes (sol de couleur différente pour les distinguer visuellement)
2. Ajouter 1 waypoint dans chaque zone (pour revenir)
3. Ajouter une transition visuelle minimale au moment de la téléportation (fade in/out)
4. Tester : un utilisateur sans explication trouve-t-il les waypoints en moins de 30 secondes ?

Module 5 — Audio spatial avancé (2h)

Concept

Le design sonore est le parent pauvre des prototypes VR — et pourtant il compte pour 30–40% du sentiment de présence. Un environnement VR sonore convainc même sur un écran 2D.

Architecture sonore d'une expérience VR :

Couche 1 : Ambiance (loop, bas volume)
 └─ Son d'environnement global (vent, hall, salle)

Couche 2 : Sons positionnels (anchored in 3D)
 └─ Source sonore A liée à l'objet A (positional: true)
 └─ Source sonore B liée à l'objet B (positional: true)

Couche 3 : Sons d'UI/feedback
 └─ Sons de validation d'interaction (courts, 100–300ms)
 └─ Sons d'erreur / limite

Sonification des transitions de zone :

• Chaque zone a sa propre ambiance sonore
• Le crossfade entre zones crée un sentiment de passage physique

Implémentation crossfade simplifié (JavaScript A-Frame) :

document.querySelector('#ambiance-zone1').setAttribute('sound', 'volume', 0);
document.querySelector('#ambiance-zone2').setAttribute('sound', 'volume', 0.4);

Lab 5.1 — Design sonore 2 zones

Étapes :

1. Trouver 2 ambiances sonores CC0 distinctes (ex. nature/urbain, intérieur/extérieur)
2. Assigner 1 ambiance par zone
3. Ajouter 2 sons positionnels (un par zone, liés à un objet)
4. Tester les yeux fermés : peut-on savoir dans quelle zone on est au son seul ?

Module 6 — Tests utilisateurs structurés : SUS (2h)

Concept

Le System Usability Scale (SUS) est un questionnaire standardisé de 10 questions qui mesure l'utilisabilité perçue d'un système. Score de 0 à 100. Score ≥ 68 = utilisabilité acceptable ; ≥ 85 = excellent.

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

Les 10 questions SUS (adaptées VR) :

1. Je pense que j'aimerais utiliser cette expérience VR fréquemment.
2. J'ai trouvé cette expérience VR inutilement complexe.
3. J'ai trouvé l'expérience VR facile à utiliser.
4. Je pense que j'aurais besoin du soutien d'une personne technique pour utiliser cette expérience VR.
5. J'ai trouvé que les différentes interactions de cette expérience VR étaient bien intégrées.
6. Je pense qu'il y avait trop d'incohérences dans cette expérience VR.
7. J'imagine que la plupart des gens apprendraient à utiliser cette expérience VR très rapidement.
8. J'ai trouvé l'expérience VR très inconfortable à utiliser.
9. Je me suis senti·e très confiant·e en utilisant cette expérience VR.
10. J'ai dû apprendre beaucoup de choses avant de pouvoir utiliser cette expérience VR.

Échelle de Likert 1–5 pour chaque question. Calcul SUS : Σ[(score questions impaires - 1) + (5 - score questions paires)] × 2.5

Lab 6.1 — Test SUS avec 3 testeurs

Étapes :

1. Préparer l'expérience avec les zones (Lab 4.1) + le son (Lab 5.1)
2. Rédiger 3 tâches concrètes pour le test
3. Faire tester 3 personnes (sans aide pendant les tâches)
4. Faire remplir le SUS immédiatement après la session
5. Calculer le score SUS pour chaque testeur + moyenne

Module 7 — Itération basée sur les données (2h)

Concept

Les données de test servent à prioriser les corrections. Toutes les observations ne se valent pas.

Grille de priorisation (Eisenhower VR) :

Règle d'itération :

• Fixer les P0 avant de présenter (bloquant = non-recevable)
• Documenter les P1 dans le README du projet (pour la prochaine version)
• Ne pas sur-corriger : chaque changement doit être retesté

Lab 7.1 — Plan d'itération

Étapes :

1. Lister tous les problèmes révélés en Module 6
2. Les classer P0/P1/P2
3. Fixer les P0 dans votre prototype
4. Retester avec 1 testeur : le P0 est-il résolu ?

Module 8 — Design visuel dans l'espace 3D (2h)

Concept

Le design visuel VR suit les règles du design graphique mais dans 3 dimensions. Les erreurs classiques :

• Texte trop petit (lisible à 1m mais pas à 2m)
• Contraste insuffisant sur fond de ciel/paysage variable
• Profusion d'éléments visuels qui créent un "bruit" cognitif

Règles pratiques :

• Taille minimale de texte à 2m de distance : valeur > 0.08 en A-Frame (<a-text width="1.5">)
• Fond du panneau : toujours une couleur unie + opacité pour garantir le contraste
• Palette VR : limiter à 3–4 couleurs dans une scène (une principale, une secondaire, une d'accent)
• Espace négatif : les objets ont besoin d'air autour d'eux pour être lisibles spatialement

Grille typographique 3D :

<!-- Titre principal -->
<a-text value="Titre" width="2.5" color="white" align="center"
 position="0 2 -3" font="roboto"></a-text>
<!-- Sous-titre -->
<a-text value="Sous-titre" width="1.8" color="#cccccc" align="center"
 position="0 1.6 -3" font="roboto"></a-text>
<!-- Corps -->
<a-text value="Texte de corps" width="1.5" color="#aaaaaa"
 position="0 1.2 -3" font="roboto"></a-text>

Lab 8.1 — Audit visuel

Étapes :

1. Prendre 3 screenshots de votre expérience depuis la position de départ
2. Vérifier le contraste texte/fond sur chaque screenshot
3. Identifier les éléments visuellement surchargés
4. Appliquer 2 corrections visuelles et documenter le before/after

Projet fil rouge — "Médiation culturelle VR"

Brief

Créer une expérience VR de médiation culturelle (art, patrimoine, science, design) qui guide et informe un visiteur à travers 2 espaces distincts, avec au moins 3 œuvres ou objets présentés.

Contraintes

• Technologie : A-Frame (WebXR)
• Au minimum 2 zones navigables (téléportation)
• Au moins 3 panneaux d'information world-locked
• Au moins 3 objets interactifs (3 états)
• Design sonore : ambiance par zone + sons d'interaction
• Tests : ≥ 3 testeurs, SUS documenté, ≥ 1 itération

Livrables

1. Fichier HTML fonctionnel (ou lien hébergement)
2. Documentation de design (2 pages A4) : concept, personas, plan de navigation, décisions de design
3. Rapport de test : grilles SUS des 3 testeurs, score moyen, problèmes identifiés
4. Rapport d'itération : P0 fixés, P1 planifiés
5. Présentation (8 min) : démo live + analyse des retours

Rubrique d'évaluation

Lectures & ressources

• A-Frame documentation : https://aframe.io/docs/
• SUS — System Usability Scale : https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html
• Brooke, J. (1996). SUS: A "quick and dirty" usability scale.
• LaViola Jr., J. J. (2000). A Discussion of Cybersickness. ACM SIGCHI Bulletin.
• Slater, M., & Wilbur, S. (1997). FIVE framework. Presence, 6(6).
• Freesound.org (sons CC0) : https://freesound.org
• Glitch.com (hébergement WebXR) : https://glitch.com

→ Niveau suivant : Design d'Interaction VR — Niveau 3 → Formation sur mesure pour votre école ou équipe : Prendre rendez-vous