- ACN_ATLAS
- Cours pratique
- Informatique
Formation UX Design et ergonomie pour tablettes et smartphones
Concevoir des interfaces attractives et performantes pour les mobiles et tablettes
- Durée
- 3 jours
- Niveau
- Intermédiaire
- Modalités
- Distanciel
Description de la formation Ergonomie interfaces tactiles
Les équipements mobiles sont indissociables de notre quotidien.On est donc particulièrement exigeant avec « son » mobile ou « sa » tablette qu'il s'agisse d'applications grand public, métier, ou spécialisée. Cette formation vous expliquera les contraintes ergonomiques que doivent intégrer les développeurs et les graphistes d'une façon générale en zoomant tout particulièrement sur les spécificités du développement mobile et tablette. Elle vous permettra de disposer d'une culture d'ergonome et d'un cadre méthodologique global et rigoureux (charte graphique, navigation, guidage, esthétique, coût, robustesse, adaptabilité, performance, etc.) qui vous permettra non seulement de concevoir des interfaces innovantes et de qualité professionnelle mais aussi de les auditer.
Objectifs pédagogiques
Objectifs pédagogiques :
À l'issue de cette formation, vous aurez acquis les connaissances et compétences nécessaires pour :
- Comprendre les concepts clés de l'ergonomie adaptée aux sites web via tablettes et smartphone
- Appréhender les actions de l’utilisateur pour optimiser l’ergonomie (lecture ou interaction)
- Concevoir et organiser les informations pour une expérience optimale sur outil mobile
- Optimiser le parcours utilisateur, notamment en fonction de sa posture
- Améliorer l'accessibilité spécifique aux outils mobiles de consultation du site web
Objectifs opérationnels
Objectif opérationnel :
Savoir concevoir ou améliorer un site web pour optimiser l'expérience utilisateur sur tablettes et smartphones.
Programme
Contenu du cours, module par module
10 modules
- 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.
- 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 design
Travaux pratiques
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.
- 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 pratiques
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…).
- 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 be
Travaux pratiques
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.).
- 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 pratiques
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 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 professionnelles
- 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 Figma
Travaux pratiques
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.).
- 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 Agile
- 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 pratiques
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.
- Peut-on valider une interface ?
- La validation par analyse experte (audit)
- Monter et mener des tests utilisateurs
- Interprétation des résultats.
Travaux pratiques
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…
Programme mis à jour le 25/01/2026
Public concerné
Ce cours s’adresse aux webmasters, webdesigners, chefs de projet digitaux, graphistes et concepteurs de sites web chargés de prendre en charge ou de participer à la conception ou l’amélioration d’un site web et d‘en optimiser l’expérience utilisateur sur tablettes et smartphones.
Plus concrètement, cette formation intéressera tout à la fois les développeurs web manipulant du code (HTML, CSS...) et souhaitant acquérir les bonnes pratiques de développement relatives à l’accessibilité numérique que les graphistes ou chefs de projet travaillant sur l’UX Design pour le biais de maquettes évolutives comme Figma.
Prérequis
Les participants à cette formation possèdent une bonne connaissance préalable du web et de l’utilisation des supports mobiles.
Une expérience préalable sur un projet de développement mobile peut être utile afin d’avoir plus rapidement à l’esprit les spécificités liées aux supports mobiles en comparaison des supports PC traditionnels.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,8/5
5 avis
« Mon avis sur le contenu du stage : "très riche, complète, très bonne idée d'avoir un support de documentation sous la main et à conserver" Mon avis sur le formateur : "très bonne maîtrise du sujet, dynamique, on ne décroche pas un instant" Ce que j'ai le plus apprécié : "La maîtrise du sujet par le formateur et son enthousiasme. Le fait d'avoir pu traiter des sujets concret par rapport à son travail est un plus. Les documents à conserver (classeurs, pdf, grilles excel...) bien meilleur que n'importe quel ouvrage du marché ! Mise à disposition des cafés/thés/goûter très sympathique et agréable. Bon matériel." Ce que j'ai le moins apprécié : "l'accès à l'endroit de formation un peu fastidieux en transports quand on ne connait pas." »
KL « Mon avis sur le contenu du stage: L'intégration de d'avantage d'exemples de "best practices" ou d'infos précises sur le design serait la bienvenue. On comprend bien ce qu'il ne faut pas faire en terme d'ergonomie, mais la formation gagnerait à développer les conseils concrets de ce qu'il faut faire pour une meilleure ergonomie. Mon avis sur le formateur: Excellente animatrice. Bon partage de ses expériences personnelles, ce qui enrichit grandement la formation. »
DV « Mon avis sur le contenu du stage: Support de cours très complet et mis à disposition dès le début de la formation Bon équilibre entre les travaux pratiques et la théorie Mon avis sur le formateur: L'animatrice est dynamique et avenante, et rend le cours réellement passionnant. Ce que j'ai le plus apprécié: Matériel à disposition dès le début de cours : ordinateur, bloc-notes Ce que j'ai le moins apprécié: Salle un peu petite quand on est nombreux. »
JérémieSNAL - ALBUS
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- Vue.JS - Développement d'applications webRéf. IVJS3 joursIntermédiaireProchaine session : 19 oct.2 090 €
- Web Services REST - Mise en œuvre avec PythonRéf. OPYW3 joursIntermédiaireProchaine session : 19 oct.2 090 €
- Web Services REST - Mise en œuvre en C#Réf. DWSR3 joursIntermédiaireProchaine session : 26 oct.2 090 €
- Web services REST en PHPRéf. WSPHP3 joursIntermédiaireProchaine session : 16 déc.2 090 €