🎨 1.2 Les standards ergonomiques et l'expérience utilisateur

Module 335 – Réaliser une application pour mobile

🎯 Objectif d'apprentissage

À la fin de ce chapitre, vous serez capable :

• d'expliquer ce qu'est un standard ergonomique et pourquoi il est essentiel dans la conception mobile
• de décrire les principes de la norme EN ISO 9241-110
• d'identifier les principes fondamentaux de l'UX/UI mobile
• d'appliquer des bonnes pratiques d'ergonomie dans la conception d'interfaces

📖 1.2.1 Introduction à l'ergonomie mobile

L'ergonomie désigne l'ensemble des principes visant à adapter un système à ses utilisateurs afin qu'il soit :

• facile à utiliser
• efficace
• agréable

Une interface ergonomique permet d'accomplir une tâche :

• rapidement
• sans effort inutile
• sans frustration

📖 1.2.1 Pourquoi l’ergonomie est critique sur mobile ?

Sur mobile, l’ergonomie est particulièrement importante :

• L'écran est petit → chaque pixel compte
• L'utilisateur est souvent en mouvement → attention limitée
• Les interactions se font par tactile → gestes parfois imprécis
• Le contexte peut être bruyant, instable ou très lumineux

📖 1.2.1 💬 Différence entre ergonomie et esthétique

💬 Une application peut être visuellement superbe… mais difficile à utiliser.
À l'inverse, une interface simple et sobre peut offrir une excellente expérience utilisateur.

• Ergonomie → efficacité, clarté, facilité d’usage
• Esthétique → style, couleurs, identité visuelle

📖 1.2.1 💡 Exemple concret

💡 Exemple : application de messagerie

Pour être ergonomique, elle doit permettre d’envoyer un message en moins de trois actions :

1. Ouvrir la conversation
2. Taper le message
3. Envoyer

Si l'utilisateur doit naviguer dans plusieurs menus avant de trouver le champ de texte,
→ l'application échoue sur le plan ergonomique.

📖 1.2.1 🎯 Objectif

🎯 Objectif à garder en tête :

Vous devez apprendre à concevoir des interfaces qui s'adaptent à l'humain,
et non l'inverse.

📜 1.2.2 La norme EN ISO 9241-110

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.

• Initialement conçue pour les logiciels de bureau
• S'applique aujourd'hui aux applications web et mobiles

📜 1.2.2 Les 7 principes (vue d’ensemble)

Les 7 principes de la norme :

1. Conformité aux attentes de l’utilisateur
2. Auto-descriptivité
3. Contrôle utilisateur
4. Conformité à la tâche
5. Tolérance aux erreurs
6. Cohérence
7. Adaptabilité

📜 1.2.2 1️⃣ Conformité aux attentes de l’utilisateur

Principe :
L’interface doit se comporter comme prévu selon les conventions connues.

💡 Exemple concret :

• Boutons “Retour” et “Partager” sont placés là où les utilisateurs s’y attendent
• Les icônes et gestes (ex : “swipe back”) respectent les usages du système

📜 1.2.2 2️⃣ Auto-descriptivité

Principe :
Chaque action ou icône doit être compréhensible sans explication supplémentaire.

💡 Exemple concret :

• Icône 🗑️ pour supprimer
• Icône ❤️ pour aimer / ajouter en favori
• Icône 🔍 pour rechercher

Si l’utilisateur doit deviner, l’interface manque d’auto-descriptivité.

📜 1.2.2 3️⃣ Contrôle utilisateur

Principe :
L’utilisateur doit pouvoir :

• annuler
• corriger
• revenir en arrière

💡 Exemple concret :

• Annulation d’un envoi d’email dans Gmail mobile
• Bouton “Annuler” après une suppression
• Navigation claire pour revenir à l’écran précédent

📜 1.2.2 4️⃣ Conformité à la tâche

Principe :
L’application doit être adaptée à la façon dont la tâche est réellement effectuée.

💡 Exemple concret :

• Dans une app de notes : créer une note en un seul tap
• Dans une app de scanner : ouverture directe sur la caméra
• Dans une app de messagerie : accès immédiat aux conversations récentes

📜 1.2.2 5️⃣ Tolérance aux erreurs

Principe :
L’interface doit :

• prévenir les erreurs
• permettre de les corriger facilement

💡 Exemple concret :

• “Annuler” après la suppression d’un message
• Confirmation avant une action irréversible (ex : suppression de compte)
• Messages d’erreur clairs et actionnables

📜 1.2.2 6️⃣ Cohérence

Principe :
Les éléments similaires doivent avoir :

• le même comportement
• le même aspect visuel

💡 Exemple concret :

• Même style de bouton dans toute l’application
• Même couleur pour les actions positives / négatives
• Même type de navigation d’un écran à l’autre

📜 1.2.2 7️⃣ Adaptabilité

Principe :
L’application doit pouvoir s’ajuster :

• au contexte
• aux préférences de l’utilisateur

💡 Exemple concret :

• Mode sombre
• Taille de texte ajustable
• Orientation portrait/paysage
• Paramètres de langue, unités, etc.

📜 1.2.2 💡 À retenir

💡 À retenir :

• Ces principes ne sont pas des règles rigides
• Ce sont des repères universels pour juger si une interface est :
  • intuitive
  • claire
  • rassurante

🧭 1.2.3 Les grands principes UX/UI sur mobile

L'UX (User Experience) s'intéresse :

• à l'expérience vécue par l'utilisateur
• à l'utilité, l'efficacité, les émotions ressenties

L'UI (User Interface) concerne :

• l'aspect visuel et interactif
• les boutons, typographies, couleurs, icônes

🧭 1.2.3 🧠 Objectif commun

Objectif commun de l’UX et de l’UI :

Créer une application utile, simple, cohérente
et agréable à utiliser.

🧭 1.2.3 🪶 Clarté et hiérarchie visuelle

Une bonne interface :

• hiérarchise les informations
• guide le regard de l’utilisateur

Les éléments importants doivent être visibles immédiatement :

• un titre clair
• un bouton d’action principal mis en avant
• des espacements cohérents

💡 Exemple :
Sur une app de transport, le bouton “Acheter un billet” est plus visible que “Historique des voyages”.

🧭 1.2.3 🔁 Cohérence graphique

Les couleurs, icônes et comportements doivent rester identiques d'un écran à l'autre.

• éviter de “réapprendre” l’interface à chaque écran
• renforcer le sentiment de maîtrise

💡 Exemple :
Si le bouton de validation est vert sur un écran, il ne doit pas être rouge sur un autre.

🧭 1.2.3 ⚡ Feedback immédiat

Chaque action doit déclencher un feedback :

• visuel (changement d’état, animation)
• sonore (notification)
• haptique (vibration)

💡 Exemple :

• Icône qui se coche après l'ajout d'un favori
• Message “Message envoyé” qui apparaît brièvement
• Vibration légère après une action importante

🧭 1.2.3 🔮 Prévisibilité et contrôle

L'utilisateur doit toujours savoir :

• où il se trouve
• ce qui va se passer en appuyant sur un bouton

Outils :

• titres d'écran clairs
• transitions cohérentes
• barre de navigation visible

💡 Exemple :
Une barre de navigation montrant l'onglet actif : “Accueil”, “Profil”, “Paramètres”.

🧭 1.2.3 👁️‍ Accessibilité

Une interface inclusive doit être utilisable par tous, y compris les personnes avec :

• handicaps visuels
• auditifs
• moteurs

Bonnes pratiques :

• taille de texte ajustable
• contraste suffisant (WCAG 2.1 : ratio ≥ 4.5:1)
• éléments tactiles espacés d’au moins 48 px
• compatibilité avec VoiceOver, TalkBack, etc.

💡 Exemple :
Les boutons “+” et “–” d'une calculatrice doivent être bien espacés pour éviter les erreurs tactiles.

🪧 1.2.4 Les guidelines officielles (Apple & Google)

Les deux principaux écosystèmes mobiles ont chacun leurs lignes directrices de conception :

• 🍎 Apple – Human Interface Guidelines (HIG)
• 🤖 Google – Material Design

Elles servent de références mondiales pour :

• garantir la cohérence
• améliorer la qualité des applications

🪧 1.2.4 🍎 Apple - Human Interface Guidelines (HIG)

Les Human Interface Guidelines définissent les règles de conception pour :

• iOS
• iPadOS
• watchOS
• macOS

Idée clé :

La technologie doit s'effacer au profit de l'expérience.

🪧 1.2.4 🍎 Principes clés

📘 Principes clés des HIG :

• Clarté : chaque élément doit avoir une fonction identifiable
• Déférence : l'interface doit servir le contenu, sans le distraire
• Profondeur : les transitions et mouvements créent du sens et de la hiérarchie

🎯 Objectif :
Obtenir une interface fluide, élégante et discrète, où tout semble “aller de soi”.

🪧 1.2.4 🍎 Exemples concrets

💡 Exemples :

• Boutons plats et minimalistes, sans bordures inutiles
• Animations (glissements, fondus) qui renforcent la compréhension
• Geste “Swipe back” pour revenir en arrière naturellement

🔗 Ressource officielle :
https://developer.apple.com/design/human-interface-guidelines/

🪧 1.2.4 🤖 Google - Material Design

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.

🪧 1.2.4 🤖 Principes clés

📘 Principes clés de Material Design :

• Matérialité : chaque composant a une “épaisseur” virtuelle et réagit à la lumière
• Hiérarchie visuelle : ombres et couleurs guident l’attention
• Cohérence : mêmes composants et comportements sur toutes les apps Android

🪧 1.2.4 🤖 Exemples concrets

💡 Exemples :

• Floating Action Button (FAB) pour une action principale (ex : “+ Nouveau”)
• Utilisation d’ombres pour indiquer la profondeur
• Transitions douces et cohérentes entre les écrans

🎯 Objectif :
Obtenir une interface vivante, dynamique et familière pour l'utilisateur Android.

🔗 Ressource officielle :
https://m3.material.io/

🪧 1.2.4 ⚖️ Comparaison HIG vs Material Design

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

🪧 1.2.4 ⚖️ À retenir

💡 À retenir :

• Chaque système a sa logique propre
• Il faut respecter les conventions du système sur lequel on travaille
• Ne pas “dépayser” l’utilisateur = meilleure ergonomie

👍 1.2.5 Bonnes pratiques d'ergonomie mobile

Concevoir une interface ergonomique, c’est avant tout :

• réduire la charge cognitive
• rendre les actions naturelles

Principales bonnes pratiques :

• 🎯 Un objectif par écran
• 🗺️ Navigation simple et cohérente
• 🗒️ Prioriser le contenu essentiel
• ⚠️ Messages d'erreurs clairs
• 🧪 Tester, observer, ajuster

👍 1.2.5 🎯 Un objectif par écran

Chaque écran doit avoir une intention claire :

• consulter
• acheter
• envoyer
• paramétrer

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”.

👍 1.2.5 🗺️ Navigation simple et cohérente

L'utilisateur doit toujours savoir :

• où il est
• comment revenir en arrière

Bonnes pratiques :

• menus visibles
• structure logique
• éléments constants (mêmes icônes, mêmes positions)

💡 Exemple :
Une barre de navigation en bas d'écran avec 3 à 5 onglets maximum (“Accueil”, “Recherche”, “Profil”, etc.).

👍 1.2.5 🗒️ Prioriser le contenu essentiel

Sur mobile, l'espace est limité → il faut aller à l’essentiel.

• Informations les plus importantes en haut de l'écran
• Détails et options secondaires plus bas

💡 Exemple :
Une app météo affiche d'abord la température actuelle, puis les prévisions détaillées.

👍 1.2.5 ⚠️ Messages d'erreurs clairs

Les erreurs doivent être :

• compréhensibles
• utiles
• réparables

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.

👍 1.2.5 🧪 Tester, observer, ajuster

Une interface réussie n'est jamais parfaite du premier coup.

Les tests utilisateurs permettent :

• d’identifier les points de friction
• de comprendre comment l’application est vraiment utilisée
• d’améliorer progressivement l’expérience

👉 Le chapitre 5.2 - Test non-fonctionnels détaillera comment évaluer ergonomie et satisfaction.

🧩 1.2.6 Activités pédagogiques

📝 Exercice 1 - Évaluer l'ergonomie d'une application mobile

Choisissez une application mobile que vous utilisez fréquemment (Instagram, CFF, etc.).

Analysez-la selon trois principes de la norme EN ISO 9241-110 :

• Quelles forces et faiblesses remarquez-vous ?
• L'application respecte-t-elle la cohérence et la tolérance aux erreurs ?

🧩 1.2.6 ⚖️ Exercice 2 - Comparaison iOS / Android

Comparez la même application sur :

• un téléphone Android
• un iPhone

Questions :

• Quelles différences d'apparence, d'interaction ou de logique notez-vous ?
• Selon vous, laquelle est la plus ergonomique, et pourquoi ?

🔗 1.2.7 - Référence et ressources

• EN ISO 9241-110:2020 – Ergonomic principles for human-system interaction
• Google Material Design 3 – https://m3.material.io/
• Apple Human Interface Guidelines – https://developer.apple.com/design/human-interface-guidelines/
• Nielsen Norman Group (NN/g) – Ten Usability Heuristics
  https://www.nngroup.com/articles/ten-usability-heuristics/
• W3C - Accessibility Principles –
  https://www.w3.org/WAI/fundamentals/accessibility-principles/