%% 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 →]] | > |:---|---:| %% nav-fin %% # 📘 1. Le vocabulaire de l'expérience utilisateur Une équipe de développement et un utilisateur parlent du même écran avec des mots différents. Cette page fixe les mots employés dans les deux compétences User eXperience. Un retour rédigé avec ces mots se comprend sans échange supplémentaire. ## 1.1 Expérience utilisateur et interface | Terme | Définition | Exemple dans SkillQuest | |---|---|---| | **Expérience utilisateur (UX)** | Ce que vit une personne en utilisant un produit : ce qu'elle cherche à faire, ce qu'elle comprend, ce qu'elle ressent, ce qu'elle obtient. | S'inscrire à une compétence recommandée depuis la première connexion du semestre jusqu'à la confirmation. | | **Interface utilisateur (UI)** | Ce qui est affiché à l'écran et ce qui réagit aux actions : textes, boutons, couleurs, mise en page. | La page d'une compétence avec son bouton d'inscription. | | **Ergonomie** | L'adaptation de l'interface aux capacités et aux habitudes de la personne : effort demandé, risque d'erreur, temps nécessaire. | Le bouton d'inscription est visible sans faire défiler la page. | | **Utilisabilité** | La mesure de l'ergonomie sur une tâche précise : la tâche est-elle réussie, en combien de temps, avec combien d'erreurs. | 9 étudiants sur 10 trouvent leur classement en moins de 30 secondes. | | **Accessibilité** | La possibilité d'utiliser l'interface avec une vision, une motricité ou un matériel différents : contraste, taille des cibles, lecture au clavier, écran de téléphone. | Le planning se lit sur un téléphone sans zoom. | L'UX est le résultat. L'UI est un moyen. Une interface soignée avec un parcours confus donne une mauvaise expérience. Une interface sobre avec un parcours clair donne une bonne expérience. **À manipuler :** retournez chaque carte pour lire la définition. ```sq-cartes Expérience utilisateur (UX) :: Ce que vit une personne en utilisant un produit : ce qu'elle cherche, comprend, ressent et obtient. Interface utilisateur (UI) :: Ce qui est affiché à l'écran et ce qui réagit aux actions. Ergonomie :: L'adaptation de l'interface aux capacités et aux habitudes de la personne. Utilisabilité :: La mesure de l'ergonomie sur une tâche précise : réussite, temps, erreurs. Accessibilité :: La possibilité d'utiliser l'interface avec une vision, une motricité ou un matériel différents. Régression :: Un bug qui apparaît sur une fonction qui marchait avant la livraison. Reproduire :: Refaire les mêmes actions et obtenir le même défaut. Responsive :: La capacité d'un écran à s'adapter à la largeur de l'appareil. ``` ## 1.2 Le parcours, l'écran, le composant - Un **parcours** est la suite d'écrans et d'actions qui mène à un but. Exemple : construire son semestre. Il commence à la première connexion et se termine sur « Démarrer mon aventure ». - Un **écran** est une page ou une vue de l'application. Il porte un titre et une adresse. Un retour cite toujours l'écran. - Un **composant** est un élément réutilisé sur plusieurs écrans : un bouton, une carte de compétence, une jauge d'XP, un tableau. Un défaut sur un composant se retrouve partout où il est employé. - Une **maquette** est un dessin de l'écran avant sa réalisation. L'équipe de développement en produit avant de coder. Le panel teste l'écran réalisé. ## 1.3 Les mots de l'équipe de développement | Terme | Définition | |---|---| | **Livraison** | La mise en service d'une nouvelle version de l'application. Elle apporte des écrans nouveaux ou modifiés. Les tests du panel portent sur chaque livraison. | | **Environnement de production** | L'application telle que les étudiants l'utilisent, avec les vraies données. Dans User eXperience II, les tests se font en production, sur son propre profil. | | **Bug** | Un comportement qui contredit ce que le programme est censé faire : une erreur, un chiffre faux, un bouton qui ne réagit pas. | | **Régression** | Un bug qui apparaît sur une fonction qui marchait avant la livraison. | | **Ticket** | La fiche d'un défaut ou d'une demande, dans l'outil de suivi de l'équipe. Un ticket bien rédigé contient tout ce qu'il faut pour reproduire le défaut. | | **Reproduire** | Refaire les mêmes actions et obtenir le même défaut. Un défaut qu'on reproduit se corrige. Un défaut qu'on ne reproduit pas s'oublie. | | **Responsive** | La capacité d'un écran à s'adapter à la largeur de l'appareil : ordinateur, tablette, téléphone. | ## 1.4 Les trois natures de remarque Toute remarque sur une interface appartient à l'une de ces trois natures. Les distinguer est la première compétence du panel. | Nature | Ce que c'est | Exemple | Ce qu'on en fait | |---|---|---|---| | **Bug** | Le programme fait autre chose que prévu. | La jauge d'XP affiche 45 alors que le total des compétences validées fait 50. | Retour avec les étapes pour reproduire. | | **Défaut d'ergonomie** | Le programme fait ce qui est prévu, mais l'utilisateur se trompe, hésite ou cherche. | Le bouton « Se désinscrire » ressemble au bouton « S'inscrire ». | Retour avec l'heuristique et la gravité. | | **Préférence** | L'utilisateur aurait fait autrement, sans conséquence sur la réussite de la tâche. | « Je préfère le bleu au vert. » | Elle reste hors des retours, sauf si elle est partagée par plusieurs testeurs. | **À manipuler :** classez chaque remarque. ```sq-quiz ? « Le total d'XP affiché sur l'accueil vaut 45, la somme des compétences validées vaut 50. » - [x] Bug - [ ] Défaut d'ergonomie - [ ] Préférence > Le programme affiche un chiffre faux : il fait autre chose que prévu. ? « J'ai cliqué deux fois sur Se désinscrire en croyant m'inscrire : les deux boutons se ressemblent. » - [ ] Bug - [x] Défaut d'ergonomie - [ ] Préférence > Le programme fait ce qui est prévu, mais l'utilisateur se trompe. ? « Je trouverais la page plus jolie avec une police à empattements. » - [ ] Bug - [ ] Défaut d'ergonomie - [x] Préférence > La tâche réussit sans hésitation. La remarque reste hors des retours. ? « Le bouton Valider ne réagit pas au clic sur téléphone. » - [x] Bug - [ ] Défaut d'ergonomie - [ ] Préférence > Un bouton qui ne réagit pas contredit ce que le programme doit faire. ? « J'ai cherché une minute le classement : il est caché dans le menu Profil. » - [ ] Bug - [x] Défaut d'ergonomie - [ ] Préférence > L'utilisateur cherche : le programme fonctionne, l'interface le gêne. ? « Après la livraison de mardi, le filtre par semestre ne filtre plus rien. » - [x] Bug - [ ] Défaut d'ergonomie - [ ] Préférence > C'est un bug, et plus précisément une régression : la fonction marchait avant la livraison. ``` ## 1.5 À retenir - L'UX est ce que vit l'utilisateur. L'UI est ce qui est affiché. - Un retour cite l'écran, l'action, le résultat attendu et le résultat observé. - Un bug se corrige quand il se reproduit. Un défaut d'ergonomie se corrige quand il est qualifié. - Une préférence personnelle reste hors des retours. %% 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 →]] | > |:---|---:| %% nav-fin %% --- 🗓️ Historique Dernière mise à jour : `26 septembre 2026` Rédigé par : [[Julien DUQUENNOY]]