- Référence : PEIT
- Durée : 3 jours (21h)
- Lieu : Au choix. À distance ou en présentiel, à Paris ou en Régions
1990€ HT
Choisir une date et Réserver- Best
- AC
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
Classe à distance
Possible
Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...
Référence
PEIT
Éligible CPF
Non
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.
Objectif opérationnel :
Savoir concevoir ou améliorer un site web pour optimiser l'expérience utilisateur sur tablettes et smartphones.
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
Public :
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 ce test.
Jour 1
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.
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.
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…).
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 2
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).
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
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 3
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
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 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…
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/tablettesSpé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 quantitativesProto-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 2
Concevoir une interface mobile
La définition de l'objet de travail et des actionsUtiliser 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 mobileLangage 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
Maquetter l'interface
Les principes du Design Centré Utilisateur appliqués aux supports mobilesMaquettage 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 3
Professionnaliser son application
Intégrer le Cloud dans votre conceptionLes 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
Accessibilité 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…
Dates et lieux
1
2
3
4
1
2
3
4
Votre formation prise en charge jusqu'à 100% des coûts pédagogiques ! *
Depuis 2011, Atlas (ex-Fafiec) a sélectionné PLB Consultant pour vous proposer les meilleures formations autour du développement objet avec .NET, Java et C++.
- Sessions inter-entreprise sur Paris et Lille.
- Sessions intra-entreprise sur toute la France.
* jusqu'à 100% des coûts pédagogiques selon votre branche d'activité dans la limite des fonds mutualisés dédiés aux actions collectives et en application des critères de prise en charge en vigueur (cf conditions détaillées sur le site d'Atlas)
Vous pouvez retrouver le lien direct vers cette formation sur le site d'Atlas, à l'adresse suivante :
Avis des participants à la formation UX Design et ergonomie pour tablettes et smartphones
Les avis figurant ci-dessous 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.
KL
5/5
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."
ME
5/5
Mon avis sur le contenu du stage :
"Formation très dense et rapide, mais très complète. "
Ce que j'ai le plus apprécié :
"Support écrit de la formation. Salle de pause. Accès à un dossier partagé"
Ce que j'ai le moins apprécié :
"Bureau un peu petit"
Jérémie
5/5
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.
DV
4/5
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.
Thierry
5/5
Mon avis sur la salle de formation:
Pas de repas organisé le midi. Dommage pour la convivialité et la qualité des échanges entre les stagiaires.
Ces formations peuvent aussi vous intéresser :
Comprendre les fondements de l’UX
- Niveau : Fondamental
- Certification : UX-PM Niveau 1
- Référence : UX-PM1
Gérer un projet avec les méthodes UX
- Niveau : Intermédiaire
- Certification : UX-PM Niveau 2
- Référence : UX-PM2
Diriger avec l’UX
- Niveau : Avancé
- Certification : UX-PM Niveau 3
- Référence : UX-PM3
- Niveau : Fondamental
- Référence : ATOM
Formations Informatique
et Management
en ligne à ce jour
+
Stagiaires dans nos salles
de cours sur
l'année
4,7/5
94% de nos participants
sont satisfaits ou
très satisfaits
Formateurs experts
validés par
PLB
%
Des participants
recommandent
nos formations
