%% 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/1 Le vocabulaire de l'expérience utilisateur\|← Le vocabulaire de l'expérience utilisateur]] | [[Design et Création Numérique/Design/User eXperience I/3 Repérer et qualifier un défaut\|Repérer et qualifier un défaut →]] | > |:---|---:| %% nav-fin %% # 📘 2. Les éléments d'une interface Un retour qui dit « le truc en haut à droite » demande un échange de plus. Un retour qui dit « le menu de navigation » se traite tout de suite. Cette page nomme les éléments qui composent les écrans d'une application web comme SkillQuest. ## 2.1 La structure d'un écran | Élément | Rôle | Ce qu'on vérifie | |---|---|---| | **Barre de navigation** | Donne accès aux grandes sections : arbre de compétences, planning, classement, profil. | La section en cours est repérable. Le retour à l'accueil est possible depuis tout écran. | | **Fil d'Ariane** | Indique où l'on est dans la hiérarchie : Domaine > Sous-domaine > Compétence. | Chaque niveau est cliquable. | | **Titre de page** | Nomme l'écran. | Il correspond à l'entrée de navigation qui y mène. | | **Zone de contenu** | Porte l'information principale. | L'information cherchée apparaît sans défilement sur ordinateur. | | **Pied de page** | Liens secondaires, contact, version. | Présent et identique sur tous les écrans. | ## 2.2 Les actions - L'**action principale** est ce que l'écran attend de l'utilisateur : « S'inscrire », « Valider mon semestre », « Démarrer mon aventure ». Un écran a une seule action principale, mise en évidence par sa couleur et sa position. - Les **actions secondaires** sont possibles sans être attendues : « Annuler », « Retour », « Exporter ». Elles sont visibles et moins saillantes. - Une **action destructrice** supprime ou annule quelque chose : se désinscrire, supprimer. Elle demande une confirmation et se distingue par sa couleur. - Un **lien** mène vers un autre écran. Un **bouton** déclenche une action sur l'écran en cours. Un lien qui ressemble à un bouton, ou l'inverse, trompe l'utilisateur. ## 2.3 Les retours de l'interface L'interface répond à chaque action. L'absence de réponse est un défaut. | Retour | Quand | Exemple attendu | |---|---|---| | **Retour visuel immédiat** | Au clic, au survol, à la saisie. | Le bouton change d'aspect au clic. | | **Indicateur de chargement** | Quand la réponse prend plus d'une seconde. | Une roue ou une barre pendant l'inscription. | | **Message de succès** | Après une action réussie. | « Inscription enregistrée. » | | **Message d'erreur** | Après une action échouée. | « Inscription impossible : le pré-requis Design est à valider avant. » Le message dit la cause et la suite à donner. | | **État vide** | Quand une liste n'a rien à afficher. | « Aucune activité cette semaine. Consultez le planning de la semaine prochaine. » Une page blanche est un défaut. | ## 2.4 Les fenêtres et les panneaux - Une **fenêtre modale** s'ouvre par-dessus l'écran et bloque le reste tant qu'elle est ouverte. Elle sert à une confirmation ou à une information courte. Elle se ferme par un bouton, par la touche Échap et par un clic hors de la fenêtre. - Un **pop-up d'aide** explique un élément de l'écran. Les 27 pop-ups de l'onboarding en sont un exemple. - Une **infobulle** apparaît au survol et disparaît au départ du pointeur. Sur un téléphone, le survol n'existe pas : l'information doit être accessible autrement. - Un **panneau latéral** s'ouvre sur le côté et laisse l'écran visible. ## 2.5 Les formulaires - Chaque champ a une **étiquette** visible, placée au-dessus ou à gauche. Un texte grisé à l'intérieur du champ disparaît à la saisie et remplace mal une étiquette. - Les champs **obligatoires** sont signalés avant la validation. - L'erreur de saisie est signalée **au niveau du champ**, avec la correction attendue. - Le bouton de validation porte le nom de l'action : « Enregistrer », « S'inscrire ». « OK » et « Valider » sont moins précis. ## 2.6 Les tableaux et les listes - Un tableau a un **en-tête** qui reste visible au défilement. - Les colonnes triables le montrent. - Une liste longue se **filtre** ou se **pagine**. - Une carte, comme la carte d'une compétence dans l'arbre, porte les informations de décision : nom, XP, type, catégorie, pré-requis, état de l'inscription. ## 2.7 Les indicateurs de progression SkillQuest en emploie plusieurs : jauge d'XP, barres Validation et Excellence, flammes, niveau. Pour chacun, on vérifie : - l'**unité** est indiquée ; - la **valeur** et le **maximum** sont lisibles ; - le **sens** est clair : qu'est-ce qui la fait monter ; - la **mise à jour** suit l'action : la jauge bouge après la validation d'une compétence. ## 2.8 À retenir - Un écran a une seule action principale. - Chaque action reçoit un retour : visuel, message ou chargement. - Un message d'erreur donne la cause et la suite à donner. - Une liste vide affiche un texte, jamais une page blanche. - Un retour nomme l'élément avec le mot de cette page. %% 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/1 Le vocabulaire de l'expérience utilisateur\|← Le vocabulaire de l'expérience utilisateur]] | [[Design et Création Numérique/Design/User eXperience I/3 Repérer et qualifier un défaut\|Repérer et qualifier un défaut →]] | > |:---|---:| %% nav-fin %% --- 🗓️ Historique Dernière mise à jour : `26 septembre 2026` Rédigé par : [[Julien DUQUENNOY]]