Kamel Ghabte
Design d'interaction — Réalité Virtuelle
Cours VR

Design d'Interaction VR — Niveau 1 : Débutant

Parcours Réalité VirtuelleBibleNiveau 1Niveau 2Niveau 3Formation sur mesure (payant) →
Résumé EN (abstract): This beginner course introduces virtual reality interaction design with no prior coding or VR experience required. Students build their first interactive VR environment using A-Frame and WebXR, understand the core principles of presence and cybersickness prevention, design basic locomotion and object interaction, and complete a portfolio project viewable in any WebXR-compatible browser or headset. Outline: Introduction to VR concepts → First VR scene (A-Frame) → Locomotion & navigation → Object interaction → Feedback & spatial audio → Portfolio project.

Objectifs d'apprentissage

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

  1. Expliquer (Bloom : remembering/understanding) ce qu'est la réalité virtuelle, la différence entre présence et immersion, et les principaux types d'expériences VR.
  2. Créer (creating) une scène VR interactive dans le navigateur avec A-Frame sans serveur ni compilation.
  3. Appliquer (applying) un pattern de locomotion simple (téléportation ou déplacement keyboard) adapté à une expérience WebVR.
  4. Concevoir (creating) des interactions d'objet basiques : clic, grab, animation de feedback.
  5. Évaluer (evaluating) le confort d'une expérience VR selon les critères de latence, framerate et mouvement.
  6. Produire (creating) un projet fil rouge documenté et présentable (en navigateur, sans casque requis).

Module 1 — Qu'est-ce que la VR ? (2h)

Concept

La réalité virtuelle remplace la perception du monde réel par un environnement entièrement généré par ordinateur. Elle repose sur trois piliers : immersion (isolation sensorielle), présence (sentiment subjectif d'être "là"), interactivité (l'environnement répond à l'utilisateur).

Distinction fondamentale :

Source : Slater, M., & Wilbur, S. (1997). A Framework for Immersive Virtual Environments (FIVE). Presence, 6(6), 603–616.

Trois types d'expériences VR :

Cybersickness : inconfort (nausées, vertiges) causé par le conflit entre mouvement visuel et immobilité physique. Règle d'or : framerate ≥ 60 fps + latence < 20ms + éviter les mouvements de caméra non initiés par l'utilisateur.

Lab 1.1 — Observer et analyser

Objectif : développer un regard critique sur des expériences VR existantes (en navigateur).

Étapes :

  1. Ouvrir un exemple A-Frame sur ordinateur (sans casque) : https://aframe.io/examples/showcase/helloworld/
  2. Naviguer en cliquant-glissant la souris. Observer : que ressent-on ? Quel objet est interactif ? Qu'est-ce qui manque ?
  3. Ouvrir un second exemple (https://aframe.io/examples/) — choisir librement.
  4. Pour chaque exemple, noter : Qu'est-ce qui crée une impression de profondeur ? Quel feedback indique l'interactivité ? Qu'amélioreriez-vous ?

Mini-exercice : Dessiner à la main (paper prototype) une pièce virtuelle simple avec 3 objets. Indiquer pour chacun : est-il interactif ? Quel comportement déclenche-t-il ?

Module 2 — Première scène VR avec A-Frame (2h)

Concept

A-Frame est un framework HTML déclaratif pour créer des scènes 3D WebXR. Pas de compilation, pas de serveur — juste un fichier HTML ouvert dans Chrome ou Firefox.

Documentation : https://aframe.io/docs/

Structure minimale :

<!DOCTYPE html>
<html>
 <head>
 <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
 </head>
 <body>
 <a-scene>
 <a-sky color="#87CEEB"></a-sky>
 <a-plane position="0 0 -4" rotation="-90 0 0"
 width="10" height="10" color="#228B22"></a-plane>
 <a-box position="-1.5 0.5 -3" color="#EF2D5E"
 shadow="cast: true; receive: false"></a-box>
 <a-sphere position="0 1 -3.5" radius="0.5" color="#FFC65D"></a-sphere>
 <a-cylinder position="1.5 0.75 -3" radius="0.3" height="1.5" color="#4CC3D9"></a-cylinder>
 <a-entity id="rig" position="0 1.6 0">
 <a-camera></a-camera>
 </a-entity>
 </a-scene>
 </body>
</html>

Attributs fondamentaux : position (x y z en mètres), rotation (degrés), scale, color, visible, shadow

Entité caméra : l'<a-entity id="rig"> à hauteur 1.6m simule la hauteur yeux d'un adulte.

Lab 2.1 — Ma première scène VR

Étapes :

  1. Créer un fichier vr-scene.html sur votre bureau
  2. Copier le template ci-dessus, ouvrir dans Chrome
  3. Naviguer avec souris (drag) + WASD pour se déplacer
  4. Modifier : changer les couleurs, ajouter un torus (<a-torus>), un texte 3D (<a-text value="Bonjour VR" position="0 2 -3">)
  5. Observer la profondeur et la perspective — comment les distances se lisent-elles ?

Mini-exercice : Créer une scène représentant une pièce fermée (4 murs + sol + plafond) avec 3 objets de tailles différentes à des positions distinctes. Chaque objet doit "raconter" quelque chose sur l'espace.

Module 3 — Locomotion et navigation (2h)

Concept

La locomotion est le mode de déplacement dans l'espace virtuel. C'est le facteur de cybersickness le plus important — un mauvais pattern de locomotion rend l'expérience inutilisable.

Deux patterns principaux pour les débutants :

PatternMécanismeConfortQuand l'utiliser
TéléportationPointer + confirmer → saut instantanéExcellentGrand public, longues sessions
Navigation souris/clavierWASD + drag (desktop)Acceptable (desktop)Prototypage rapide

Ajouter la téléportation en A-Frame (npm component) :

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-teleport-controls.min.js"></script>
<a-entity id="rig" position="0 1.6 0">
 <a-camera>
 <a-cursor></a-cursor>
 </a-camera>
 <a-entity teleport-controls="cameraRig: #rig; teleportOrigin: #camera; button: trigger"
 laser-controls="hand: left"></a-entity>
</a-entity>

Règles de confort locomotion :

Lab 3.1 — Zone de navigation

Étapes :

  1. Reprendre la scène du Lab 2.1
  2. Délimiter une zone navigable visible au sol (texture quadrillée ou couleur différente)
  3. Ajouter des marqueurs de destination téléportation (cercles lumineux au sol)
  4. Tester avec 2 collègues ou membres de la famille : observent-ils les marqueurs ? Comprennent-ils qu'ils peuvent se déplacer ?

Mini-exercice : Dessiner le plan de navigation de votre projet fil rouge : où l'utilisateur démarre, quelles zones il peut atteindre, quelles zones sont bloquées et pourquoi.

Module 4 — Interaction avec les objets (2h)

Concept

L'interaction avec les objets VR doit respecter les affordances physiques : un objet manipulable doit le signaler visuellement.

Pattern cursor/gaze en A-Frame : L'<a-cursor> est un réticule au centre de l'écran — l'objet est sélectionné en pointant dessus et en cliquant (ou après un délai).

<a-camera>
 <a-cursor color="#FF5733" fuse="true" fuse-timeout="1500"></a-cursor>
</a-camera>

Répondre aux interactions :

<a-box id="mybox" position="0 1 -3" color="#4CC3D9"
 animation__hover="property: scale; to: 1.2 1.2 1.2; startEvents: mouseenter; dur: 200"
 animation__unhover="property: scale; to: 1 1 1; startEvents: mouseleave; dur: 200"
 animation__click="property: color; to: #FF5733; startEvents: click; dur: 300">
</a-box>

Trois états d'un objet interactif :

  1. Idle : apparence neutre
  2. Hover : indication que l'objet est ciblé (scale, outline, couleur)
  3. Active : confirmation de l'action (animation, son)

Lab 4.1 — Objets interactifs

Étapes :

  1. Dans votre scène, choisir 2 objets et ajouter les 3 états (idle / hover / active)
  2. Utiliser les animation__* d'A-Frame pour chaque transition
  3. Pour le feedback "active" : ajouter un changement de couleur net + une petite animation de scale (1 → 1.3 → 1)
  4. Tester : est-ce que l'on comprend qu'on peut interagir avant de pointer sur l'objet ?

Mini-exercice : Lister les 3 objets de votre projet fil rouge et définir pour chacun ses 3 états. Comment l'utilisateur sait-il, avant d'interagir, que l'objet est cliquable ?

Module 5 — Feedback et audio spatial (2h)

Concept

Le son est le deuxième vecteur de présence après le visuel. En VR desktop, ajouter du son spatial transforme radicalement l'expérience.

Son positionnel en A-Frame :

<a-entity position="0 1 -3"
 sound="src: url(click.mp3); on: click; positional: true; rolloffFactor: 2">
</a-entity>

Audio d'ambiance (son d'environnement) :

<a-entity sound="src: url(ambience.mp3); autoplay: true; loop: true; volume: 0.3">
</a-entity>

Règle de confort audio :

Ressources sons CC0 : https://freesound.org (filtrer "CC0") · https://pixabay.com/music/

Lab 5.1 — Scène avec son

Étapes :

  1. Trouver un son d'ambiance CC0 (ex. vent léger, espace intérieur calme)
  2. Trouver 2 sons d'interaction CC0 (ex. clic, carillon, pop)
  3. Ajouter l'ambiance à la scène + un son par objet interactif
  4. Tester sans regarder l'écran : peut-on comprendre l'espace uniquement au son ?

Mini-exercice : Décrire en 3 phrases le design sonore de votre projet fil rouge. Quel son informe l'utilisateur de chaque action clé ?

Module 6 — Tests utilisateurs de base (2h)

Concept

Même un prototype WebVR en navigateur desktop peut être testé sans casque. L'objectif est de valider que les interactions sont compréhensibles et le déplacement confortable.

Protocol de test minimal (desktop, 2 testeurs) :

Nielsen & Landauer (1993) : 5 testeurs révèlent ~85% des problèmes. 2 testeurs suffisent en début de projet pour les problèmes critiques.
  1. Préparer 2 tâches concrètes ("Va jusqu'à l'objet rouge et interagis avec lui")
  2. Observer sans intervenir
  3. Noter : hésitations, blocages, commentaires spontanés
  4. 3 questions ouvertes post-test

Lab 6.1 — Test avec 2 personnes

Étapes :

  1. Préparer votre prototype sur un ordinateur dédié au test
  2. Rédiger 2 tâches (pas "explore" — "fais X")
  3. Tester avec 2 profils différents (non-gamers si possible)
  4. Remplir la grille : Tâche réussie ? Temps ? Hésitations ? Comments ?

Mini-exercice : Lister les 3 problèmes révélés par vos 2 tests. Pour chacun, proposer une correction concrète et la priorité (bloquant / important / mineur).

Projet fil rouge — "Mon premier espace VR"

Brief

Créer un espace VR simple dans le navigateur qui présente, explore ou raconte quelque chose — un lieu imaginaire, un objet significatif, un univers personnel.

Contraintes

Livrables

  1. Fichier HTML fonctionnel (ou lien hébergement type Glitch.com, CodePen)
  2. Documentation courte (1 page A4) : concept, 3 décisions de design et pourquoi, plan de navigation
  3. Grille d'observation du test utilisateur (2 testeurs)
  4. Présentation (5 min) : démo live + retour réflexif

Rubrique d'évaluation

CritèreInsuffisant (1)Satisfaisant (2)Bon (3)Excellent (4)
Fonctionnement techniqueNe s'ouvre pas ou planteFonctionne avec difficultésFonctionne de façon fiableFonctionne sans friction, 60 fps stable
Navigation & confortDésorientation, cybersicknessNavigable avec aideNavigation claireNavigation intuitive, 0 cybersickness
InteractionsAucune interaction fonctionnelle1–2 interactions sans feedback3 interactions avec feedback3+ interactions + 3 états bien définis
AudioAbsentSon présent mais mal équilibréSon d'ambiance + interactionsSon spatial positionnel + design sonore cohérent
DocumentationAbsentePrésente mais incomplèteConcept + 3 décisionsRéflexion profonde + alternatives envisagées

Lectures & ressources

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

Formation sur mesure

Workshop intensif (1–2 j) — écoles, studios, musées. Théorie condensée + labs + accompagnement projet.

Prendre rendez-vous (30 min, gratuit) →