%% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User eXperience I/User eXperience I|Accueil · User eXperience I]] > > | [[Design et Création Numérique/Design/User eXperience I/2 Les éléments d'une interface\|← Les éléments d'une interface]] | [[Design et Création Numérique/Design/User eXperience I/4 Rédiger un retour exploitable\|Rédiger un retour exploitable →]] | > |:---|---:| %% nav-fin %% # 📘 3. Repérer et qualifier un défaut Repérer un défaut demande de l'attention. Le qualifier demande une grille. Cette page donne la grille : les dix heuristiques de Nielsen pour dire de quel type de défaut il s'agit, quatre niveaux de gravité pour dire à quel point il gêne, et cinq vérifications d'accessibilité. ## 3.1 Les dix heuristiques de Nielsen Jakob Nielsen a publié en 1994 dix principes qui restent la référence pour évaluer une interface. Chaque défaut d'ergonomie se rattache à l'un d'eux. Le numéro de l'heuristique figure dans le retour. | # | Heuristique | Question à se poser | Exemple de défaut | |---|---|---|---| | 1 | **Visibilité de l'état du système** | Est-ce que je sais ce qui se passe ? | Le clic sur « S'inscrire » ne montre rien pendant trois secondes. | | 2 | **Correspondance avec le monde réel** | Les mots et les images sont-ils ceux de l'utilisateur ? | Le bouton affiche « Commit » au lieu de « Enregistrer ». | | 3 | **Contrôle et liberté** | Puis-je annuler, revenir, sortir ? | La désinscription est impossible après confirmation. | | 4 | **Cohérence et standards** | Le même élément se comporte-t-il pareil partout ? | Le bouton d'inscription est vert sur l'arbre et gris sur la page de la compétence. | | 5 | **Prévention des erreurs** | L'interface m'empêche-t-elle de me tromper ? | L'inscription à deux outils du même parent est acceptée puis refusée. | | 6 | **Reconnaissance plutôt que rappel** | Ai-je tout sous les yeux ou dois-je me souvenir ? | Le nom du pré-requis manquant est absent du message d'erreur. | | 7 | **Flexibilité et efficacité** | L'habitué peut-il aller plus vite ? | Le planning demande quatre clics pour changer de semaine. | | 8 | **Esthétique et design minimaliste** | Tout ce qui est affiché est-il utile ? | La carte de compétence affiche un identifiant technique. | | 9 | **Aide à la reconnaissance et à la correction des erreurs** | Le message d'erreur dit-il quoi faire ? | « Erreur 400 » sans explication. | | 10 | **Aide et documentation** | L'aide est-elle là où j'en ai besoin ? | Le pop-up d'explication de la flamme est absent de l'écran de la flamme. | **À manipuler :** retournez chaque carte pour lire la question à se poser. ```sq-cartes H1 Visibilité de l'état du système :: Est-ce que je sais ce qui se passe ? H2 Correspondance avec le monde réel :: Les mots et les images sont-ils ceux de l'utilisateur ? H3 Contrôle et liberté :: Puis-je annuler, revenir, sortir ? H4 Cohérence et standards :: Le même élément se comporte-t-il pareil partout ? H5 Prévention des erreurs :: L'interface m'empêche-t-elle de me tromper ? H6 Reconnaissance plutôt que rappel :: Ai-je tout sous les yeux ou dois-je me souvenir ? H7 Flexibilité et efficacité :: L'habitué peut-il aller plus vite ? H8 Esthétique et design minimaliste :: Tout ce qui est affiché est-il utile ? H9 Aide à la correction des erreurs :: Le message d'erreur dit-il quoi faire ? H10 Aide et documentation :: L'aide est-elle là où j'en ai besoin ? ``` **À manipuler :** rattachez chaque défaut à son heuristique. ```sq-quiz ? Après un clic sur « Enregistrer », rien ne change à l'écran pendant cinq secondes. - [x] H1 Visibilité de l'état du système - [ ] H5 Prévention des erreurs - [ ] H8 Esthétique et design minimaliste > L'utilisateur ne sait pas si l'action est en cours. ? Le menu affiche « Sync DB » pour l'action « Mettre à jour mes compétences ». - [ ] H4 Cohérence et standards - [x] H2 Correspondance avec le monde réel - [ ] H10 Aide et documentation > Le mot est celui des développeurs, pas celui de l'utilisateur. ? Une suppression de semestre se fait en un clic, sans confirmation ni retour possible. - [x] H3 Contrôle et liberté - [ ] H6 Reconnaissance plutôt que rappel - [ ] H7 Flexibilité et efficacité > L'utilisateur ne peut ni annuler ni revenir en arrière. ? Le bouton principal est bleu sur une page et orange sur la suivante. - [ ] H1 Visibilité de l'état du système - [x] H4 Cohérence et standards - [ ] H9 Aide à la correction des erreurs > Le même élément change d'aspect d'un écran à l'autre. ? Le formulaire accepte une date de fin antérieure à la date de début, puis affiche une erreur au moment d'enregistrer. - [x] H5 Prévention des erreurs - [ ] H2 Correspondance avec le monde réel - [ ] H8 Esthétique et design minimaliste > L'interface pouvait empêcher l'erreur avant la saisie. ? Le message affiche « Échec de la requête » sans dire quoi faire. - [ ] H10 Aide et documentation - [ ] H3 Contrôle et liberté - [x] H9 Aide à la correction des erreurs > Un message d'erreur dit la cause et la suite à donner. ``` ## 3.2 Les quatre niveaux de gravité | Gravité | Définition | Exemple | |---|---|---| | **Bloquant** | La tâche est impossible à terminer. | L'inscription échoue pour toute compétence recommandée. | | **Gênant** | La tâche est possible avec une erreur, un détour ou une perte de temps notable. | Le classement se lit après un défilement horizontal sur téléphone. | | **Mineur** | La tâche réussit, avec une hésitation ou une gêne courte. | L'infobulle des XP met deux secondes à apparaître. | | **Cosmétique** | L'apparence est en cause, sans effet sur la tâche. | Un alignement décalé de quelques pixels. | La gravité se justifie par la conséquence sur la tâche. « Bloquant parce que je ne peux pas m'inscrire » se vérifie. « Bloquant parce que c'est moche » se conteste. Deux critères font monter la gravité : - la **fréquence** : le défaut touche tous les utilisateurs ou un cas rare ; - la **persistance** : le défaut se contourne une fois ou gêne à chaque usage. ## 3.3 Défaut, bug ou préférence Avant de qualifier, on classe. Trois questions dans l'ordre : 1. Le programme fait-il ce qu'il est censé faire ? Si non, c'est un **bug**. On décrit les étapes pour le reproduire. 2. Un utilisateur se trompe-t-il, hésite-t-il ou cherche-t-il ? Si oui, c'est un **défaut d'ergonomie**. On cite l'heuristique et la gravité. 3. La tâche réussit-elle sans hésitation ? Alors la remarque est une **préférence**. Elle reste hors du retour. Une préférence partagée par plusieurs testeurs devient un signal. Le panel la remonte comme mineure, avec le nombre de testeurs concernés. ## 3.4 Les bases de l'accessibilité Cinq vérifications rapides, sans outil. | Vérification | Seuil | Comment vérifier | |---|---|---| | **Contraste** | Rapport de 4,5 : 1 au moins entre le texte et son fond, y compris pour le texte gris. | Mesurer le couple de couleurs avec le composant de contraste de [[Design et Création Numérique/Design/User Interface/2 Typographie et couleur\|User Interface, section 2.5]]. Sans outil : baisser la luminosité de l'écran de moitié ; le texte reste lisible. | | **Taille des cibles** | Un bouton se touche avec le doigt sans toucher le voisin. | Sur téléphone, cliquer chaque bouton du pouce. | | **Lecture sur téléphone** | L'écran se lit sans zoom ni défilement horizontal. | Ouvrir l'écran sur son téléphone. | | **Navigation au clavier** | Chaque action est atteignable avec la touche Tabulation et se déclenche avec Entrée. | Parcourir l'écran sans souris. | | **Information par la couleur seule** | Une information portée par une couleur l'est aussi par un texte ou un symbole. | Repérer les états signalés par la seule couleur : validé, en cours, verrouillé. | ## 3.5 À retenir - Chaque défaut d'ergonomie se rattache à une heuristique, citée par son numéro. - La gravité se justifie par la conséquence sur la tâche. - Bug, défaut d'ergonomie et préférence se traitent différemment. On classe avant de qualifier. - Cinq vérifications d'accessibilité se font sans outil, dont deux sur téléphone. %% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User eXperience I/User eXperience I|Accueil · User eXperience I]] > > | [[Design et Création Numérique/Design/User eXperience I/2 Les éléments d'une interface\|← Les éléments d'une interface]] | [[Design et Création Numérique/Design/User eXperience I/4 Rédiger un retour exploitable\|Rédiger un retour exploitable →]] | > |:---|---:| %% nav-fin %% --- 🗓️ Historique Dernière mise à jour : `26 septembre 2026` Rédigé par : [[Julien DUQUENNOY]]