Jour 1
Vocabulaire autour des interfaces mobiles et de l'ergonomie mobile
Qu'est-ce qu'une interface ?
Les critères de base de l'ergonomie
Qu'entend-on par approche cognitive ?
La charte graphique d'une application
Cinématique d'une application et d'un site mobile
La « satisfaction » de l'utilisateur (expérience utilisateur)
La réalité augmentée
La place du toucher (haptique)
Les événements mobiles (touch, multi-touch, drag, scroll, etc.)
Interaction, utilisabilité, adaptabilité, etc.Le décor technique
Capteurs et comportements communs aux smartphone/tablettes
Spécificités du mobile par rapport à l'utilisation clavier/souris
Spécificités du mobile par rapport à la tablette
L'interaction homme-machine sur supports mobiles
Les composants graphiques (bouton, slider, listes, etc.)
Les applications connexes (FaceBook, Twitter, etc.) et le SoLoMo
Les acteurs principaux (Android, iPhone/iPad, Microsoft, etc.) : quelles différences en termes d'ergonomie
Impacts du contexte technique pour l'ergonome
Desktop sites, Applications et responsive designTravaux pratiquesObjectif : Identifier les différences ergonomiques entre interfaces mobiles en tenant compte des critères fondamentaux, des composants graphiques et des contextes techniques.
Description : Par binômes, les participants choisissent deux applications mobiles similaires (ex. : messagerie, e-commerce, actualités) disponibles sur Android et iOS. À l’aide d’une grille fournie, ils comparent : type d’interface, navigation, comportements tactiles (scroll, swipe, press...), organisation visuelle, composants utilisés et prise en compte des contraintes techniques (taille d’écran, capteurs, responsive, posture). Chaque binôme présente les principales différences constatées et discute de leur impact sur l'expérience utilisateur.Le cœur de l'ergonomie mobile
Ce que la main veut faire naturellement (anatomie cinétique)
Impact de la posture dans l’interaction avec une app sur smartphone ou tablette
Communication spontanée avec une interface
Les processus perceptifs
Les processus cognitifs
Les différents modèles d'interactions
L'évolution de l'internaute
Approche cognitive du geste
Comportements attendus par l'utilisateur
La sémantique des symboles (luminosité, sonore, visuel, etc.)
Beau et subjectivitéTravaux pratiquesObjectif : Comprendre l’influence des gestes naturels et de la posture sur l’ergonomie mobile.
Description : En binôme, les participants testent différents scénarios d’usage (app debout, allongé, en transport, etc.) sur des terminaux mobiles. Ils observent les zones faciles/difficiles d’accès, notent les gestes intuitifs, et en déduisent des règles pour la conception (zones de confort tactile, minimisation des mouvements…).Comprendre les utilisateurs
Comment recueille-t-on les besoins des utilisateurs : techniques qualitatives et quantitatives
Proto-personas et personas
Modéliser l’interaction avec le support mobile : scénarios et experience maps as is et to beTravaux pratiquesObjectif : Prototyper l’interface mobile cible à partir d’un parcours utilisateur modélisé.
Description : En s’appuyant sur l’experience map “to be”, les participants conçoivent les écrans clés de l’application (ex. : accueil, recherche, fiche produit) en utilisant Figma. Ils appliquent les principes du design mobile (taille des cibles tactiles, hiérarchie visuelle, gestures, etc.).Jour 2Concevoir une interface mobile
La définition de l'objet de travail et des actions
Utiliser le bon composant pour le bon traitement (formulaires, tableaux, listes, etc.)
Faciliter l'utilisation de l'interface (affordance)
Comment rendre fluide la navigation (contextuelle, structurelle, etc.) ?
Conseils sur la gestion de l'orientation et du blocage
Évènements impactant le design (batterie, touch, scrolling, zoom, etc.)
Scrolling ou mode statique (Pages) ?Travaux pratiquesObjectif : Sélectionner les composants UI les plus ergonomiques selon les usages mobiles.
Description : À partir de cas d’usage (inscription, recherche, formulaire, navigation), les participants choisissent les composants adaptés (boutons, sliders, listes, menus contextuels…) et justifient leur choix au regard des contraintes mobiles (taille d’écran, manipulations tactiles, feedback utilisateur).La présentation de l'interface
La place de la présentation dans l'ergonomie mobile
Langage et symbolique des couleurs
Harmonie des couleurs (palette chromatique, synthèse soustractive)
Conseils sur les polices de caractères
Bien gérer le contraste entre le fond et le texte
Règles de positionnement des objets
Organisation et mise en valeur de l'information
Illustration ou texte ?
Offrir une expérience sensorielle et émotionnelle
Professionnaliser l'image et rassurer
Traduire une stratégie marketing : le message
Identité et charte graphique
Exemple de chartes graphiques simples et professionnellesMaquetter l'interface
Les principes du Design Centré Utilisateur appliqués aux supports mobiles
Maquettage horizontal et vertical
Présentation des principaux outils de maquettage
Présentation détaillée de FigmaTravaux pratiquesObjectif : Prototyper l’interface mobile cible à partir d’un parcours utilisateur modélisé.
Description : En s’appuyant sur l’experience map “to be”, les participants conçoivent les écrans clés de l’application (ex. : accueil, recherche, fiche produit) en utilisant Figma. Ils appliquent les principes du design mobile (taille des cibles tactiles, hiérarchie visuelle, gestures, etc.).Jour 3Professionnaliser son application
Intégrer le Cloud dans votre conception
Les incontournables réseaux sociaux
Interfaces avec les applications existantes (messagerie, ...)
Comment on passe de la conception, à la maquette écran (métier du graphiste) puis au développement (CSS, XML, etc.), qui fait quoi ?
Ergonomie et méthode AgileAccessibilité des applications mobiles
Pourquoi l’accessibilité est-elle essentielle pour tous les publics ?
Identifier les types de handicaps (visuels, moteurs, cognitifs, auditifs…)
Exploitation d’un smartphone en situation de handicap : commandes vocales, utilisation des doigts, loupes…
VoiceOver et TalkBack
Référentiels : RGAA et Référentiel d'évaluation de l'Accessibilité des Applications Mobiles (RAAM)Travaux pratiquesObjectif : Identifier les barrières d’accessibilité et expérimenter les aides techniques mobiles.
Description : Les participants activent VoiceOver (iOS) ou TalkBack (Android) sur un terminal pour simuler un handicap visuel. Ils testent une application donnée, relèvent les obstacles à l’usage, et proposent des ajustements. D’autres modes (zoom, navigation au doigt, contraste) sont explorés.La validation de l'interface
Peut-on valider une interface ?
La validation par analyse experte (audit)
Monter et mener des tests utilisateurs
Interprétation des résultats.Travaux pratiquesObjectif : Évaluer la qualité ergonomique d’une interface mobile à l’aide d’outils structurés.
Description : Les stagiaires utilisent une grille d’audit (inspirée de Bastien & Scapin ou ISO 9241) pour analyser une application mobile (réelle ou fictive). Ils identifient les défauts et proposent des améliorations concrètes en matière de lisibilité, navigation, retour utilisateur, affordance…
