À la fin de ce chapitre, vous serez capable :
L'ergonomie désigne l'ensemble des principes visant à adapter un système à ses utilisateurs afin qu'il soit :
Une interface ergonomique permet d'accomplir une tâche :
Sur mobile, l’ergonomie est particulièrement importante :
💬 Une application peut être visuellement superbe… mais difficile à utiliser.
À l'inverse, une interface simple et sobre peut offrir une excellente expérience utilisateur.
💡 Exemple : application de messagerie
Pour être ergonomique, elle doit permettre d’envoyer un message en moins de trois actions :
Si l'utilisateur doit naviguer dans plusieurs menus avant de trouver le champ de texte,
→ l'application échoue sur le plan ergonomique.
🎯 Objectif à garder en tête :
Vous devez apprendre à concevoir des interfaces qui s'adaptent à l'humain,
et non l'inverse.
La norme EN ISO 9241-110 définit les principes ergonomiques de base pour les interfaces homme-machine.
Elle fournit un cadre de référence pour évaluer si une application est réellement centrée sur l'utilisateur.
Les 7 principes de la norme :
Principe :
L’interface doit se comporter comme prévu selon les conventions connues.
💡 Exemple concret :
Principe :
Chaque action ou icône doit être compréhensible sans explication supplémentaire.
💡 Exemple concret :
Si l’utilisateur doit deviner, l’interface manque d’auto-descriptivité.
Principe :
L’utilisateur doit pouvoir :
💡 Exemple concret :
Principe :
L’application doit être adaptée à la façon dont la tâche est réellement effectuée.
💡 Exemple concret :
Principe :
L’interface doit :
💡 Exemple concret :
Principe :
Les éléments similaires doivent avoir :
💡 Exemple concret :
Principe :
L’application doit pouvoir s’ajuster :
💡 Exemple concret :
💡 À retenir :
L'UX (User Experience) s'intéresse :
L'UI (User Interface) concerne :
Objectif commun de l’UX et de l’UI :
Créer une application utile, simple, cohérente
et agréable à utiliser.
Une bonne interface :
Les éléments importants doivent être visibles immédiatement :
💡 Exemple :
Sur une app de transport, le bouton “Acheter un billet” est plus visible que “Historique des voyages”.
Les couleurs, icônes et comportements doivent rester identiques d'un écran à l'autre.
💡 Exemple :
Si le bouton de validation est vert sur un écran, il ne doit pas être rouge sur un autre.
Chaque action doit déclencher un feedback :
💡 Exemple :
L'utilisateur doit toujours savoir :
Outils :
💡 Exemple :
Une barre de navigation montrant l'onglet actif : “Accueil”, “Profil”, “Paramètres”.
Une interface inclusive doit être utilisable par tous, y compris les personnes avec :
Bonnes pratiques :
💡 Exemple :
Les boutons “+” et “–” d'une calculatrice doivent être bien espacés pour éviter les erreurs tactiles.
Les deux principaux écosystèmes mobiles ont chacun leurs lignes directrices de conception :
Elles servent de références mondiales pour :
Les Human Interface Guidelines définissent les règles de conception pour :
Idée clé :
La technologie doit s'effacer au profit de l'expérience.
📘 Principes clés des HIG :
🎯 Objectif :
Obtenir une interface fluide, élégante et discrète, où tout semble “aller de soi”.
💡 Exemples :
🔗 Ressource officielle :
https://developer.apple.com/design/human-interface-guidelines/
Material Design est le système visuel de Google, introduit en 2014.
Il repose sur la métaphore du :
papier et de la lumière
Les éléments semblent flotter sur des plans différents, avec des ombres et de la profondeur.
📘 Principes clés de Material Design :
💡 Exemples :
🎯 Objectif :
Obtenir une interface vivante, dynamique et familière pour l'utilisateur Android.
🔗 Ressource officielle :
https://m3.material.io/
| Aspect | Apple HIG | Google Material Design |
|---|---|---|
| Philosophie | Minimalisme et élégance | Dynamisme et matérialité |
| Interaction | Gestes naturels, transitions douces | Animations et ombres pour guider |
| Ton visuel | Neutre, lumineux | Coloré, structuré |
| Flexibilité | Environnement fermé et cohérent | Environnement ouvert et personnalisable |
💡 À retenir :
Concevoir une interface ergonomique, c’est avant tout :
Principales bonnes pratiques :
Chaque écran doit avoir une intention claire :
Si plusieurs actions majeures cohabitent, l'utilisateur risque de se perdre.
💡 Exemple :
Une application bancaire sépare clairement les écrans “Solde”, “Paiements” et “Paramètres”.
L'utilisateur doit toujours savoir :
Bonnes pratiques :
💡 Exemple :
Une barre de navigation en bas d'écran avec 3 à 5 onglets maximum (“Accueil”, “Recherche”, “Profil”, etc.).
Sur mobile, l'espace est limité → il faut aller à l’essentiel.
💡 Exemple :
Une app météo affiche d'abord la température actuelle, puis les prévisions détaillées.
Les erreurs doivent être :
Préférez :
“Le mot de passe doit contenir au moins 8 caractères”
plutôt que :
“Erreur 401”.
💡 Bonus : proposer toujours une solution ou un lien pour corriger l’erreur.
Une interface réussie n'est jamais parfaite du premier coup.
Les tests utilisateurs permettent :
👉 Le chapitre 5.2 - Test non-fonctionnels détaillera comment évaluer ergonomie et satisfaction.
Choisissez une application mobile que vous utilisez fréquemment (Instagram, CFF, etc.).
Analysez-la selon trois principes de la norme EN ISO 9241-110 :
Comparez la même application sur :
Questions :