Kamel Ghabte
Design d'interaction — Réalité Augmentée
Cours AR

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

Parcours Réalité AugmentéeBibleNiveau 1Niveau 2Niveau 3Formation sur mesure (payant) →
Résumé EN (abstract): This beginner course introduces augmented reality interaction design with no prior coding or AR experience required. Students build their first interactive AR prototype using A-Frame and WebAR tools (marker-based, then markerless), learn the core principles of spatial feedback and anchoring, and complete a portfolio project. Outline: Introduction to AR concepts → First AR scene (HTML/A-Frame) → Marker-based interaction → Surface anchoring → Visual & audio feedback → 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é augmentée, ses types (marker-based, markerless) et ses applications concrètes.
  2. Créer (creating) une scène AR fonctionnelle dans le navigateur avec A-Frame sans serveur ni compilation.
  3. Appliquer (applying) des marqueurs visuels pour déclencher du contenu AR et configurer un ancrage sur surface plane.
  4. Concevoir (creating) des interactions de base : tap-to-place, rotation d'objet, retour visuel sur sélection.
  5. Évaluer (evaluating) la qualité de son prototype AR selon des critères de lisibilité, d'ancrage et de feedback.
  6. Produire (creating) un projet fil rouge documenté et présentable.

Module 1 — Qu'est-ce que l'AR ? (2h)

Concept

La réalité augmentée superpose des éléments numériques à la perception du monde physique en temps réel. Elle se distingue de la VR (immersion totale) et de l'interface traditionnelle (écran 2D).

Trois critères d'Azuma (1997) : combine réel + virtuel / interactif en temps réel / espace 3D.

Source : Azuma, R. (1997). A Survey of Augmented Reality. Presence, 6(4), 355–385.

Types d'AR à retenir :

Lab 1.1 — Observer et analyser

Objectif : développer un regard critique sur des expériences AR existantes.

Étapes :

  1. Ouvrir deux expériences WebAR sur smartphone (ex. un exemple A-Frame : https://aframe.io/examples/showcase/helloworld/ — adapter avec un marqueur AR, ex. 8thWall demos)
  2. Pour chaque expérience, noter sur une feuille : Qu'est-ce qui est ancré ? Quel feedback visuel ? Qu'est-ce qui marche/ne marche pas ?
  3. Partager en 3 phrases : « Ce qui fonctionne / Ce qui ne fonctionne pas / Ce que j'améliorerais »

Mini-exercice : Dessiner à la main (paper prototype) une expérience AR simple pour expliquer quelque chose dans votre espace immédiat.

Module 2 — Première scène AR 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.

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-box position="0 1.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
 <a-sky color="#ECECEC"></a-sky>
 </a-scene>
 </body>
</html>

Attributs fondamentaux : position (x y z), rotation (degrés), scale, color, visible

Lab 2.1 — Ma première scène AR

Étapes :

  1. Créer un fichier index.html sur votre bureau
  2. Copier le template ci-dessus, ouvrir dans Chrome
  3. Modifier : changer la couleur, ajouter une sphère (<a-sphere>), un cylindre (<a-cylinder>)
  4. Ajouter un plan pour simuler le sol : <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

Mini-exercice : Créer une scène représentant 3 objets simples (formes géométriques) à différentes hauteurs. Nommer chaque objet avec un texte 3D (<a-text>).

Module 3 — AR par marqueur avec AR.js (2h)

Concept

AR.js est une bibliothèque qui ajoute le tracking AR à A-Frame. La version marker-based détecte des marqueurs Hiro ou des images personnalisées et ancre du contenu 3D dessus.

AR.js docs : https://ar-js-org.github.io/AR.js-Docs/

Template marker-based :

<html>
 <head>
 <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
 <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
 </head>
 <body style="margin: 0; overflow: hidden;">
 <a-scene embedded arjs>
 <a-marker preset="hiro">
 <a-box position="0 0.5 0" material="color: red;"></a-box>
 </a-marker>
 <a-entity camera></a-entity>
 </a-scene>
 </body>
</html>

Prérequis matériel : smartphone avec caméra + navigateur Chrome/Firefox + le marqueur Hiro imprimé (https://ar-js-org.github.io/AR.js-Docs/marker-based/)

Lab 3.1 — Objet sur marqueur

Étapes :

  1. Imprimer ou afficher à l'écran le marqueur Hiro
  2. Créer le fichier HTML marker-based ci-dessus
  3. Servir le fichier sur un serveur local (ex. npx serve. dans le terminal, ou VS Code Live Server)
  4. Ouvrir sur smartphone, pointer vers le marqueur
  5. Observer l'ancrage et le tracking

Mini-exercice : Remplacer le cube rouge par une tour de 3 formes géométriques empilées. Chaque forme a une couleur différente et une rotation propre.

Module 4 — Ancrage sur surface (markerless) (2h)

Concept

Le tap-to-place est le pattern d'interaction mobile AR le plus universel : l'utilisateur pointe vers une surface, une preview apparaît, il tape pour placer l'objet. ARKit et ARCore utilisent SLAM pour détecter les surfaces planes.

Pour le web, MindAR.js propose un tracking de surface simple sans app :

https://hiukim.github.io/mind-ar-js-doc/

Alternativement, 8thWall (solution commerciale/freemium) offre un SLAM de haute qualité dans le navigateur :

https://www.8thwall.com

Lab 4.1 — Preview & placement (papier/maquette)

(Si accès à 8thWall ou MindAR impossible, réaliser le prototype sur papier/Figma.)

Étapes version papier :

  1. Dessiner 5 écrans : état initial → détection surface (grille au sol) → objet en preview (semi-transparent) → tap → objet placé → interaction sur l'objet placé
  2. Annoter chaque écran : quelle information visuelle indique l'état du système ?
  3. Identifier 3 questions à tester avec un utilisateur réel

Mini-exercice : Écrire en 5 phrases comment indiquer à l'utilisateur que son téléphone « voit » une surface détectable — sans texte à l'écran.

Module 5 — Feedback visuel et sonore (2h)

Concept

En AR, le feedback remplace le retour haptique des objets physiques. Il informe l'utilisateur de l'état du système (objet sélectionné, action accomplie, erreur).

Trois niveaux de feedback :

  1. Indicateur d'état (idle → hover → selected → action) : changement de couleur, taille, halo
  2. Confirmation d'action : animation, particule, son
  3. Erreur / limite : clignotement rouge, vibration (si mobile), son d'erreur

Règle critique : la latence du feedback doit être < 100ms pour être perçue comme immédiate (Nielsen, 1994 — règle des délais d'interface).

Source : Nielsen, J. (1994). Usability Engineering. Morgan Kaufmann.

Lab 5.1 — Ajouter un feedback sur objet A-Frame

Étapes :

  1. Reprendre la scène du Lab 2.1
  2. Ajouter un événement click sur le cube :
<a-box id="mycube" position="0 1.5 -3" color="#4CC3D9"
 event-set__click="_target: #mycube; color: #FF5733">
</a-box>
  1. Ajouter un son de clic (fichier audio libre — ex. Freesound.org, licence CC0)
  2. Tester : l'objet change-t-il de couleur immédiatement ?

Mini-exercice : Définir pour votre projet fil rouge (voir §Projet) : quels sont les 3 états principaux d'un objet AR dans votre scène ? Décrire le feedback visuel de chaque transition.

Module 6 — Tests utilisateurs de base (2h)

Concept

Un test utilisateur AR n'a pas besoin d'être sophistiqué pour révéler des problèmes critiques. Même un prototype sur papier ou un prototype markerless basique permet de tester les affordances.

Protocol de test minimal (Jakob Nielsen : 5 utilisateurs suffisent) :

Nielsen, J., & Landauer, T. (1993). A Mathematical Model of the Finding of Usability Problems. CHI '93 Proceedings. https://doi.org/10.1145/169059.169166
  1. Préparer une tâche concrète ("Place l'objet sur la table")
  2. Observer sans intervenir (ne pas aider)
  3. Noter : hésitations, erreurs, abandons, feedback verbal spontané
  4. Après la tâche : 3 questions ouvertes

Lab 6.1 — Test avec 2 personnes

Étapes :

  1. Préparer votre prototype (numérique ou papier)
  2. Rédiger 1 tâche claire (pas "explore l'application" — "place l'objet rouge sur la surface de ton choix")
  3. Tester avec 2 personnes de profils différents
  4. Remplir une grille d'observation : Tâche réussie ? Temps ? Hésitations ? Commentaires ?

Mini-exercice : Lister les 3 problèmes principaux révélés par vos tests et proposer une correction concrète pour chacun.

Projet fil rouge — "Mon premier objet AR"

Brief

Créer une expérience AR simple (marker-based ou surface) qui explique, présente ou augmente un objet ou un espace que vous connaissez bien — une plante, un objet de design, une œuvre, un lieu.

Contraintes

Livrables

  1. Fichier HTML fonctionnel (prototype ou lien vers hébergement)
  2. Documentation courte (1 page A4) : concept, choix d'interaction, 3 décisions de design et pourquoi
  3. Grille d'observation du test utilisateur (1–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 fonctionne pas sur smartphoneFonctionne avec difficultésFonctionne de façon fiableFonctionne sans friction, états gérés
Qualité de l'ancrageObjet flottant, instableAncré mais instableAncré stableAncrage naturel + occlusion simulée
Feedback d'interactionAucun feedbackFeedback présent mais tardif ou confusFeedback clair (< 100ms)Feedback multimodal, cohérent
DocumentationAbsente ou incompréhensiblePrésente mais incomplèteConcept clair + 3 décisionsRéflexion profonde + alternatives envisagées
Tests utilisateursAbsents1 testeur, peu de données2 testeurs, grille remplie2+ testeurs, itération documentée

Lectures & ressources

→ Niveau suivant : Design d'Interaction AR — 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) →