Objectifs
- Comprendre le vocabulaire et les concepts clés de l’ergonomie et de l’UX design
- Connaître les exigences ergonomiques du développement d’applications sur les appareils tactiles
- Appréhender la conception centrée sur l’utilisateur
- Disposer d’une méthode de conception et d’évaluation d’interfaces mobiles : charte graphique, navigation, guidage…
- Découvrir l’analyse heuristique des IHM mobiles
- Connaître les bonnes pratiques pour conduire le cycle de maquettage d’une application Web compatible avec les mobiles
Programme de la formation
Introduction et définition : qu’est-ce que l’ergonomie ?
- Définition de l’ergonomie. Pourquoi a-t-on besoin d’ergonomes ?
- Le rôle et les bénéfices de l’ergonomie.
- L’ergonomie, l’UX Research, l’UX Design et l’UI Design.
- L’ergonomie et l’accessibilité : contrainte ou complémentarité ?
- Des normes ISO pour une base standardisée.
- Introduire l’ergonomie dans le cycle de conception.
- Compatibilité des méthodes UX avec le processus Agile.
- Types d’intervention : conception ou correction.
Echanges
Présentation de sites affichés sur mobile, d’Apps dédiées. Echanges d’expérience sur l’accessibilité, sur l’utilisation d’une application mobile…
Spécificités des IHM mobiles
- Affichage, interactions tactiles.
- L’évolution de l’utilisation des applications mobiles.
- Contraintes liées à l’usage mobile.
- Apps dédiées, une application pour chaque plateforme d’exploitation. Tendances.
- Application native. Tendances.
- Web App.
- Le Responsive Design.
- Les limites du site Web responsive : approche mobile first.
- Contraintes d’affichage, résolution d’écran, dimension en DPI, les coins et bord infinis.
Étudier les utilisateurs, leurs tâches et le contexte
- Le fonctionnement cognitif humain.
- La population cible : établir des Personas.
- Mécanismes psychologique des Personas.
- Buts, motivations et émotions de l’utilisateur.
- Experience Map et contexte d’utilisation.
- Analyse des besoins.
- Exemples de scénarios utilisateur.
- Modélisation des tâches : tri de cartes, arbre des tâches.
Travaux pratiques
Identification de Personas et plusieurs taches/scénarios d’interaction. Expérience Map et arbres de tâches.
Maquetter une interface mobile
- Qu’est-ce que le maquettage ?
- Sketching, le maquettage basse fidélité.
- Le maquettage moyenne fidélité.
- Le maquettage haute fidélité.
- Les outils disponibles du marché.
- Les principes de conception d’une maquette en « Material Design ».
Travaux pratiques
Conception d’interface à partir d’outils basse fidélité visuelle (Balsamiq, Wireframe Sketcher).
Les critères d’ergonomie universels
- Les critères « universels » : simplicité, intuitivité, cohérence, sensation de contrôle, affordance.
- Les lois de la Gestalt.
- Mouvements oculaires sur IHM.
- Loi de FITTS.
- Loi de Hick.
- Ergonomie du contenu, sémantique, wording.
- Principe de coopération de Grice.
Ergonomie des IHM mobiles
- Menus mobiles.
- Textes lisibles, taille des polices.
- Zones d’information, zones d‘interaction.
- Couleurs, images, une affaire de culture.
- Ergonomie des icônes mobiles, des widgets.
- Ergonomie des formulaires, gestion des erreurs, call-to-action.
- La navigation dans une interface mobile : surface d’affichage et quantité d’info.
- La navigation : navigation à tiroirs, à onglets.
- Gestion du temps.
Echanges
Présentation d’exemples de site mobiles et échanges.
L’analyse d’interface avec problèmes d’ergonomie
- La méthode de l’analyse heuristique : points forts, points faibles, ROI.
- Méthodologie de l’analyse heuristique.
- Une grille d’analyse des IHM mobiles.
- Étude de grilles d’analyse et d’audit.
Travaux pratiques
Audit de différentes interfaces sur Smartphones / tablettes présentant des problèmes d’ergonomie. Observation et identification des points à améliorer par les participants.