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)
- Hook (5’) : audit Mobile-Friendly d’un site “ok desktop / nul mobile”.
- Mini-démo (10’) : targets, nav bas, states, perfs (Lighthouse).
- Binômes (30’) : refonte mobile d’un écran + test à une main.
- AR “wow” (15’) : POC 8th Wall/AR.js (asset simple).
- Preuves (15’) : exports + mini-vidéos geste/lecteur d’écran.
- 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.
