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

Résumé EN (abstract): This intermediate course deepens AR interaction design skills with a focus on spatial interaction patterns, ergonomics, structured user testing, and multi-anchor scenes. Students work with ARKit/ARCore (via Unity AR Foundation or 8thWall) and tackle a cultural mediation or educational AR project. Outline: Spatial UX patterns → Ergonomics & comfort → Multi-anchor scenes → Spatial audio → Structured user testing → Iteration based on data → Visual design in AR → Portfolio project (cultural mediation).

Objectifs d'apprentissage

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

1. Analyser (analyzing) une expérience AR existante selon les critères d'affordance, de confort et de cohérence spatiale.
2. Concevoir (creating) des patterns d'interaction avancés : near/far interaction, dwell, voice, UI body-locked vs world-locked.
3. Implémenter (applying) une scène AR multi-ancres avec du son spatial et des transitions d'état.
4. Conduire (applying) des tests utilisateurs structurés et en extraire des insights actionnables.
5. Itérer (evaluating + creating) un prototype sur la base de données de tests réels.
6. Produire (creating) un projet de médiation culturelle AR documenté, présentable et testable.

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

Concept

Les patterns d'interaction AR se distinguent des patterns d'interface 2D par leur dimension spatiale et leurs contraintes physiques.

Patterns fondamentaux :

Référence : Apple Human Interface Guidelines — Spatial UI : https://developer.apple.com/design/human-interface-guidelines/spatial-ui

Lab 1.1 — Inventaire de patterns

Étapes :

1. Choisir 2 applications AR connues (Pokémon GO, IKEA Place, Google Lens, ou autre)
2. Pour chacune, lister tous les patterns d'interaction présents (5 min de test actif)
3. Pour chaque pattern : nommer, décrire le déclencheur, décrire le feedback
4. Comparer les deux apps : quels patterns manquent à l'une qu'a l'autre ?

Mini-exercice : Concevoir sur papier le parcours d'interaction (user flow) d'une expérience AR de votre choix — 5 étapes max, chaque étape avec son pattern principal.

Module 2 — Ergonomie et confort AR (2h)

Concept

L'AR impose des contraintes physiques spécifiques. Les ignorer conduit à des expériences fatigantes ou douloureuses.

Problèmes principaux et solutions :

Zone de confort visuel : entre 0,5 m et 10 m de l'utilisateur, à hauteur des yeux (±30°).

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

Lab 2.1 — Audit ergonomique

Étapes :

1. Prendre le prototype du Niveau 1 (ou un prototype existant)
2. Le faire tester par 2 personnes pendant 5 minutes chacune
3. Mesurer : à quelle hauteur est-ce que l'utilisateur tient son téléphone ? Lève-t-il les bras ? Bouge-t-il les pieds ?
4. Identifier 1 problème ergonomique et proposer une correction dans le design

Mini-exercice : Dessiner le "sweet spot" de votre expérience AR : où dans l'espace physique l'interaction est-elle optimale ? À quelle distance, quelle hauteur ?

Module 3 — UI spatiale avancée (2h)

Concept

En AR, l'interface graphique doit coexister avec le monde réel. Les quatre types d'UI spatiale (vus en Bible) ont des cas d'usage distincts.

Règles de conception :

• World-locked (par défaut) : meilleure cohérence spatiale, évite la fatigue
• Body-locked (ex. palette sur le poignet) : réservé aux outils fréquemment utilisés
• Head-locked : éviter sauf pour les alertes critiques et éphémères (< 3 secondes)
• Diégétique : préférer quand l'interface peut faire partie de la narration

Tipographie en AR :

• Taille minimale : 80 pt à 1 m de distance (expérimentation nécessaire selon la plateforme)
• Fond semi-transparent derrière le texte si l'environnement est potentiellement chargé
• Contraste : blanc sur fond sombre OU noir sur fond clair — éviter les couleurs vives sur fond variable

Référence : Microsoft MRTK UX Guidelines : https://docs.microsoft.com/windows/mixed-reality/design/typography

Lab 3.1 — Prototyper une UI spatial

Étapes :

1. Choisir un scénario : guide muséal AR, ou aide à l'assemblage, ou exploration d'une plante
2. Concevoir 3 variantes de l'UI (world-locked / body-locked / diégétique)
3. Paper prototype chacune en 5 minutes
4. Faire choisir à 2 personnes la variante la plus naturelle — noter leurs raisons

Mini-exercice : Pour votre projet fil rouge, définir : quel type d'UI est le plus adapté et pourquoi en 3 phrases.

Module 4 — Scènes multi-ancres (2h)

Concept

Une expérience AR peut contenir plusieurs objets ancrés à des surfaces différentes, des image anchors, et des objets persistants entre sessions.

Architecture d'une scène multi-ancres :

• Chaque ancre a un identifiant unique
• Les objets référencent leur ancre parent
• Les transitions entre ancres sont animées (fade, déplacement)
• La persistance (cloud anchors) nécessite un service backend

Avec A-Frame + AR.js :

<!-- Deux marqueurs différents déclenchent deux objets différents -->
<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>

Générateur de marqueurs A-Frame : https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Lab 4.1 — Scène à 3 marqueurs

Étapes :

1. Générer 3 marqueurs personnalisés (images simples)
2. Créer une scène A-Frame qui affiche un objet différent sur chaque marqueur
3. Les 3 objets forment un ensemble narratif cohérent (ex. 3 étapes d'un processus, 3 états d'un même objet)
4. Tester avec les 3 marqueurs imprimés sur la même feuille A4

Mini-exercice : Comment indiquer à l'utilisateur qu'il y a d'autres marqueurs à trouver ? Concevoir l'affordance (sans texte explicite).

Module 5 — Son spatial en AR (2h)

Concept

Le son spatial (3D audio / spatial audio) ancre les sons dans l'espace physique. Un objet AR à gauche émet depuis la gauche ; quand l'utilisateur s'en approche, le son devient plus fort.

Pourquoi le son spatial est critique :

• Compense l'absence d'haptique
• Guide l'attention vers des objets hors champ
• Renforce la présence de l'objet AR

En A-Frame :

<a-box position="-2 1 -3">
 <a-sound src="#mysound" autoplay="true" positional="true" rolloff-factor="1"></a-sound>
</a-box>

Sources audio libres (CC0) : https://freesound.org · https://pixabay.com/music/

Lab 5.1 — Feedback sonore spatial

Étapes :

1. Reprendre la scène du Lab 4.1 (3 marqueurs)
2. Ajouter un son différent à chaque objet (3 sons de < 2 sec, CC0)
3. Les sons se déclenchent au survol (hover) de chaque objet
4. Tester : est-ce que le son vient du bon endroit dans l'espace ?

Mini-exercice : Identifier 3 situations dans votre projet fil rouge où le son peut remplacer ou compléter un feedback visuel.

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

Concept

Un test utilisateur structuré produit des données comparables entre participants. Méthodes adaptées à l'AR :

Think-aloud protocol : l'utilisateur verbalise ce qu'il fait et ressent en temps réel.

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

Grille d'observation structurée :

• Tâche réussie : oui/non
• Temps de complétion
• Nombre d'erreurs
• Moments d'hésitation (> 3 sec)
• Commentaires spontanés

SUS (System Usability Scale) : questionnaire standardisé de 10 questions (Brooke, 1996) permettant de calculer un score de 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

Lab 6.1 — Test structuré avec SUS

Étapes :

1. Définir 2 tâches concrètes pour votre prototype (ex. "Place l'objet bleu sur la table" + "Activez l'objet rouge")
2. Préparer la grille d'observation (colonnes : participant / tâche 1 réussie / temps / erreurs / hésitations)
3. Tester avec 3 personnes
4. Faire remplir le questionnaire SUS après chaque test
5. Calculer le score SUS moyen

Mini-exercice : Comparer votre score SUS avec les benchmarks (< 50 = mauvais, 50–70 = passable, 70–85 = bon, > 85 = excellent). Identifier le problème le plus fréquent dans vos données.

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

Concept

L'itération en design AR suit le cycle classique : prototype → test → analyse → correction → re-test. La spécificité AR est que les corrections peuvent toucher à la fois le design visuel, la logique d'interaction ET le hardware cible.

Priorisation des corrections :

• Bloquants (erreur qui empêche de compléter la tâche) : corriger immédiatement
• Friction majeure (confusion, délai) : corriger avant le test suivant
• Cosmétique (préférences, esthétique) : reporter

Design sprint AR : 1 semaine pour tester une hypothèse d'interaction — inspiré de Jake Knapp, Sprint (2016).

Lab 7.1 — Une itération documentée

Étapes :

1. Reprendre les résultats du Lab 6.1
2. Identifier le problème #1 (le plus fréquent/bloquant)
3. Proposer 2 solutions différentes sur papier (2 variantes)
4. Implémenter la solution choisie dans le prototype
5. Re-tester avec 1 personne : le problème est-il résolu ?

Mini-exercice : Documenter le cycle de correction : problème observé → hypothèse de solution → changement effectué → résultat du re-test. 1 paragraphe, factuel.

Module 8 — Design visuel en AR (2h)

Concept

Les objets AR coexistent avec des environnements photographiques réels, variables et imprévisibles. Le design visuel AR doit être robuste à cette variabilité.

Principes :

• Contraste adaptatif : les objets AR doivent rester lisibles sur fond clair ET sombre
• Ombre portée : simuler une ombre sous l'objet AR renforce considérablement la perception de profondeur
• Matériaux PBR (Physically Based Rendering) : réagissent à l'éclairage ambiant estimé → cohérence visuelle
• Éviter le blanc pur et le noir pur : trop de contraste avec les environnements naturels

En A-Frame, matériau réfléchissant :

<a-sphere material="color: #888888; metalness: 0.5; roughness: 0.2; envMap: #envmap"></a-sphere>

Accessibility check : couleurs conformes WCAG 2.1 AA (rapport de contraste ≥ 4.5:1 pour le texte).

Lab 8.1 — Révision visuelle du prototype

Étapes :

1. Tester votre prototype dans 3 environnements différents (intérieur lumière artificielle, intérieur fenêtre, extérieur ombre)
2. Photographier chaque situation : les objets AR sont-ils lisibles ?
3. Identifier les défaillances visuelles (blancheur écrasante, perte de contraste)
4. Appliquer 2 corrections visuelles : ombre portée simulée + matériau moins saturé

Projet fil rouge — "Médiation culturelle AR"

Brief

Concevoir et prototyper une expérience AR de médiation culturelle pour un espace existant (musée, bibliothèque, espace public, classe). L'expérience doit enrichir la compréhension d'un objet, d'un lieu ou d'un concept.

Contraintes

• Technologie : A-Frame + AR.js ou 8thWall (WebAR)
• Durée cible : 3–5 minutes pour un utilisateur
• Au moins 2 types d'interaction différents (tap-to-place + son spatial, ou marqueur + dwell)
• Testé avec minimum 3 utilisateurs (SUS + grille d'observation)
• Itéré au moins une fois sur la base des tests

Livrables

1. Prototype fonctionnel (lien ou fichiers)
2. Rapport de design (3–5 pages) : concept, parcours utilisateur, 5 décisions de design avec justification, résultats des tests (données brutes + analyse)
3. Présentation (10 min) : démo + résultats tests + réflexion sur ce qui a marché / pas marché

Rubrique d'évaluation

Lectures & ressources

• 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 (sons 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.

→ Niveau précédent : Design d'Interaction AR — Niveau 1 → Niveau suivant : Design d'Interaction AR — Niveau 3 → Formation sur mesure : Prendre rendez-vous