Ergonomie et UX sur web & mobile
- Durée
- Durée :3 jours
- Niveau
- Niveau :Intermédiaire
- Certification
- Certification :Non
Intra uniquement
Aucune session prévue
UI Design et ergonomie des IHM
Design System et création d’interfaceDescription de la formation UI Design
Qu'est-ce que l’UI Design et l’ergonomie des IHM ?
L’UI Design (User Interface Design) et l’ergonomie des interfaces homme-machine visent à concevoir des interfaces graphiques intuitives, esthétiques et adaptées aux besoins des utilisateurs. Ils reposent sur des principes de design system, d’accessibilité et de cohérence graphique.
Pourquoi suivre une formation UI Design et ergonomie des IHM ?
Dans un monde où l’expérience utilisateur est un facteur clé de réussite des produits digitaux, maîtriser l’UI Design et les bonnes pratiques ergonomiques permet de créer des interfaces efficaces et attractives. Cette formation offre les méthodes et outils indispensables pour améliorer la qualité visuelle et fonctionnelle des applications et sites web, tout en favorisant l’adoption par les utilisateurs.
Programme de la formation
Objectif opérationnel :
Savoir concevoir des interfaces graphiques ergonomiques et cohérentes à l’aide d’un design system.
Objectif pédagogiques :
À l'issue de cette formation UI Design et ergonomie des IHM, vous aurez acquis les connaissances nécessaires pour :
- Identifier les enjeux du design d'interface utilisateur
- Appliquer les règles du Design System
- Créer des interfaces de sites Web, d'applications et de logiciels
- Maintenir une cohérence graphique
- Trouver l'harmonie d'une interface
- Créer un dialogue interface / utilisateur
- Rendre une interface compréhensible
- Concevoir des prototypes d'interface
- Intégrer les notions de base de l'ergonomie des interfaces
- Identifier clairement les clés de la réussite
- Appliquer l'UX Design à la conception d'interfaces
- Adopter des démarches de conception itératives
- Organiser la récolte et l'analyse de données
- Améliorer la qualité des applications et des sites Web
- Estimer les implications dans le marketing.
Jour 1
Le rôle de l'UI Designer
Comparaison avec l'UX Design
Contexte des approches user centric (UI, IxD, UX, CX, HX)
Interfaces monochromes
Le fenêtrage
Le skeuomorphisme
Le flat design
Le neumorphisme
Règles et valeurs évocatrices des typographies
Mise en page et ergonomie
Images et visuels
Dialoguer avec les boutons et les interactions
Hiérarchisation des contenus
Le sens de lecture
Harmonie et contraste
La cohérence graphique
Moodboard, Guide UI et Design System
Formats pour le Web
Le maquettage : sketching, zoning, wireframe, prototype
Les outils de prototypage (Figma, Sketch, Invision, Balsamiq...)
Test and LearnExemples de travaux pratiques (à titre indicatif)Atelier : préparation des matières premières
Création d'un trend board, moodboard et art board
Création d'une palette de couleurs (Adobe Color)
Recherche iconographique
Elaboration d'un guide UI
L'approche Atomic Design
Apple iOS
Google Material Design
Microsoft Windows
Trouver l'inspiration avec les kits UIJour 2
Les normes ISO 9241-210 et Afnor 267
Le principe d'utilisabilité
Les critères de Bastien et Scapin
Les heuristiques de Jakob Nielsen
Les lois de la Gestalt :
- Distinction
- Proximité
- Similarité
- Continuité
- Clôture
- La loi de Hick
- La loi de Fitts
La notion d'affordance
Ergonomie par l'exemple
- Pattern de lecture
- Formulaires
- Boutons
- Tableau de données...Exemples de travaux pratiques (à titre indicatif)Atelier : Evaluer l'ergonomie d'une interface
Utiliser une grille d'analyse
Recueil des informations
Recommandations et pistes d'amélioration
La mécanique du responsive
Anticiper les contraintes du développeur
Les bonnes pratiques
Méthodologie de travail
Méthodologie de travail pour la création d'un ensemble d'écrans
Enjeux et risquesExemples de travaux pratiques (à titre indicatif)Atelier : création d'interface utilisateur
A partir du guide UI élaboré dans le premier atelier
Elaborer un prototype papier puis digital
Les bonnes questions à se poser
Atelier d'idéation (card sorting et 6to1)
Qu'est-ce que l'UI Design ?
Définition du terme UI DesignLe rôle de l'UI Designer
Comparaison avec l'UX Design
Contexte des approches user centric (UI, IxD, UX, CX, HX)
Les tendances design
Historique des interfaces homme-machineInterfaces monochromes
Le fenêtrage
Le skeuomorphisme
Le flat design
Le neumorphisme
Les éléments de base d'une interface
Analyser et définir une palette de couleursRègles et valeurs évocatrices des typographies
Mise en page et ergonomie
Images et visuels
Dialoguer avec les boutons et les interactions
Hiérarchisation des contenus
Le sens de lecture
Harmonie et contraste
La cohérence graphique
Moodboard, Guide UI et Design System
Rappels sur les formats de fichier
Fichier bitmap vs vectorielFormats pour le Web
Les étapes du design d'interface
Les étapes de conception dans un projet digitalLe maquettage : sketching, zoning, wireframe, prototype
Les outils de prototypage (Figma, Sketch, Invision, Balsamiq...)
Test and LearnExemples de travaux pratiques (à titre indicatif)Atelier : préparation des matières premières
Création d'un trend board, moodboard et art board
Création d'une palette de couleurs (Adobe Color)
Recherche iconographique
Elaboration d'un guide UI
L'approche Atomic Design
Les kits d'interface
Les wireframesApple iOS
Google Material Design
Microsoft Windows
Trouver l'inspiration avec les kits UIJour 2
Règles de base de l'ergonomie
Définition de l'ergonomie d'interfaces pour écransLes normes ISO 9241-210 et Afnor 267
Le principe d'utilisabilité
Les critères de Bastien et Scapin
Les heuristiques de Jakob Nielsen
Les lois de la Gestalt :
- Distinction
- Proximité
- Similarité
- Continuité
- Clôture
- La loi de Hick
- La loi de Fitts
La notion d'affordance
Ergonomie par l'exemple
- Pattern de lecture
- Formulaires
- Boutons
- Tableau de données...Exemples de travaux pratiques (à titre indicatif)Atelier : Evaluer l'ergonomie d'une interface
Utiliser une grille d'analyse
Recueil des informations
Recommandations et pistes d'amélioration
Concevoir trois interfaces pour le responsive
Comprendre les enjeux du responsiveLa mécanique du responsive
Anticiper les contraintes du développeur
Les bonnes pratiques
Méthodologie de travail
User Flow
Savoir interpréter un parcours utilisateurMéthodologie de travail pour la création d'un ensemble d'écrans
Enjeux et risquesExemples de travaux pratiques (à titre indicatif)Atelier : création d'interface utilisateur
A partir du guide UI élaboré dans le premier atelier
Elaborer un prototype papier puis digital
Les bonnes questions à se poser
Atelier d'idéation (card sorting et 6to1)
Public cible :
Cette formation est destinée aux chefs de projets digitaux, directeurs artistiques, développeurs Front, webdesigners, développeurs Web.
Prérequis :
Une bonne pratique des fonctionnalités telles que la conception et/ou le développement de sites Web, d'applications mobiles ou la conduite de projet digital. Connaître un logiciel de prototypage (Adobe XD, Sketch, Figma, Framer, InVision...) est un plus.
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.
Date de mise à jour du programme : 26/08/2025
Dates et lieux
Période souhaitée
Lieux
Type d'affichage