Repository navigation
20 04 conception interface
But : traduire les App Flows en expériences compréhensibles, cohérentes et accessibles.
Source visuelle actuelle : le design system du wiki et les composants réellement utilisés dans les vues.
- Une action principale par écran stagiaire. La prochaine étape doit être visible sans comprendre l'organisation interne du LMS.
- Le vocabulaire dépend du rôle. Côté stagiaire : « Ma formation » ; côté formateur : « Catalogue », « Créations » et « Parcours ».
- La simplicité ne supprime pas l'information. Les erreurs, délais, états de sauvegarde et conséquences d'une action restent explicites.
- La couleur n'est jamais le seul signal. Texte, icône et structure accompagnent les statuts.
- Le mobile et le clavier sont des cas nominaux. Ils ne sont pas vérifiés seulement en fin de projet.
- Les interfaces d'administration peuvent être denses ; les interfaces d'apprentissage doivent rester guidantes.
Pour chaque App Flow prioritaire, produire :
- schéma basse fidélité de tous les écrans et embranchements ;
- prototype cliquable des étapes critiques ;
- textes réels des titres, aides, confirmations et erreurs ;
- états chargement, vide, succès, erreur, hors ligne et accès refusé ;
- comportement mobile, tablette et bureau ;
- ordre de tabulation, focus, annonces et alternative non visuelle ;
- compte rendu de test auprès d'utilisateurs représentatifs.
Chaque composant partagé documente : usage, variantes, contenu obligatoire, états, comportement clavier, nom accessible et exemples à éviter. Les composants existants doivent être réutilisés avant de créer une nouvelle variante.
| Famille | Règle de conception |
|---|---|
| Navigation | Position et libellé stables dans un même espace ; page courante annoncée |
| Formulaire | Libellé visible, aide avant l'erreur, erreur liée au champ, saisie conservée |
| Action destructive | Conséquence nommée, confirmation proportionnée, annulation ou restauration si possible |
| Tableau | En-têtes sémantiques, filtres partageables, pagination serveur si nécessaire |
| Modal | Focus initial pertinent, boucle clavier, Échap, restitution du focus |
| Progression | Valeur textuelle en plus du visuel et origine du calcul compréhensible |
| Média pédagogique | Texte alternatif, transcription ou solution équivalente selon le média |
La conformité ne se déduit pas de la présence de classes CSS. La validation combine : revue sémantique, navigation clavier, zoom et reflow, contraste, lecteur d'écran, réduction des animations et tests avec les publics concernés. Les contenus SCORM importés doivent être évalués séparément de l'enveloppe Oneduc.
Un flow est prêt pour développement lorsque tous ses états sont conçus, que les libellés sont validés, que les contraintes d'accessibilité sont explicites et que le prototype a été testé sur les tâches critiques. Une maquette du seul « happy path » n'est pas terminée.
Source versionnée : docs/cahier-des-charges/04-ui-ux-design.md.