Outils mobile & AR : enseigner l’ergonomie au-delà du responsive

Former au mobile en 2025, c’est intégrer contexte d’usage, gestes, voix, caméra/AR et guidelines OS — pas seulement “ça passe en 375 px”.

Outils d’analyse & test mobile

• Responsively / Polypane — multi-devices en temps réel, mode touch, préférences utilisateurs.
• BrowserStack (démo ponctuelle) — vrais devices (iOS/Android/pliables) pour valider tactile & perfs.
• Google Mobile-Friendly Test — check rapide de compatibilité.

Guidelines officielles (la bible)

• Apple HIG — cibles tactiles min. 44×44 pt, feedback, navigation.
• Material Design 3 — composants adaptatifs, dark mode, motion, a11y.

Exercice : applique HIG ou Material à une page → compare les écarts culturels d’usage.

Prototypage mobile avancé

• Figma + plugins mobile — frames iOS/Android, Auto-layout, Mirror pour tests sur device.
• ProtoPie ❤️ — prototypes avec capteurs (accéléromètre, caméra, GPS) & gestes (swipe, long-press).

AR accessible en formation (Web-based)

• 8th Wall — AR dans le navigateur (WebXR), parfait pour POC étudiants (produit 3D, musée virtuel).
• AR.js — lib open source légère (front + Three.js).
• Spark AR — filtres AR sociaux (Instagram/Facebook).

Atelier : “AR qui enrichit un produit” (ex. un paquet de café qui raconte son origine).

Checklist ergonomie mobile (à évaluer)

• Touch targets ≥ 48 dp (Android) / 44 pt (iOS)
• Usage à une main (nav en bas, actions primaires accessibles)
• Viewport & lisibilité (pas de zoom requis)
• Feedback tactile/visuel clair (:active, states)
• LCP < 2,5 s (profil 3G) • assets optimisés
• Pas de pop-up intrusif au chargement
• Accessibilité mobile : VoiceOver/TalkBack OK

À ignorer en formation initiale

• Unity + AR Foundation, Apple Vision Pro SDK (trop niches/3D pro)
• Outils de motion complexes (à garder pour module expert)

Preuves à exiger (et à livrer)

Un formateur démontre :

• Captures Responsively/Polypane (3 largeurs + préférences)
• Rapports Mobile-Friendly / Lighthouse (mobile) avec LCP/INP/CLS
• Enregistrements courts (caméra au mobile) montrant gestes/une-main
• Tests lecteurs d’écran (VoiceOver/TalkBack) – 1 à 2 min
• Spéc HIG/Material : tableau de conformité (tailles, espaces, patterns)
• POC AR : URL + vidéo de démonstration + contraintes identifiées

Livrables : dossier /proofs-mobile/ (PDF/JSON/vidéos) relié au README.

Trame d’atelier (90 min)

1. Hook (5’) : audit Mobile-Friendly d’un site “ok desktop / nul mobile”.
2. Mini-démo (10’) : targets, nav bas, states, perfs (Lighthouse).
3. Binômes (30’) : refonte mobile d’un écran + test à une main.
4. AR “wow” (15’) : POC 8th Wall/AR.js (asset simple).
5. Preuves (15’) : exports + mini-vidéos geste/lecteur d’écran.
6. Debrief (15’) : écarts HIG/Material et plan d’améliorations.

Conclusion

L’ergonomie mobile, c’est l’empathie en mouvement : gestes, contexte, lumière, attention partielle — et, désormais, AR.
Avec cette stack (tests, guidelines, prototypage, AR) + preuves exigées, tu formes des concepteurs d’expériences réellement utilisables.