4.3UX avancée : fenêtres internes, superchamps & dispositions
L'essentiel en 30 secondes
- Les fenêtres internes composent dynamiquement un écran (zone dont le contenu change selon le contexte, assistant multi-étapes, onglets chargés à la demande), les superchamps regroupent des champs réutilisables, et les dispositions offrent plusieurs présentations d'une même fenêtre selon la taille d'écran.
- D'autres leviers d'ergonomie : zones répétées et loopers (listes à présentation libre), rubans/barres d'outils/menus contextuels, fenêtres modales ou non modales à choisir consciemment.
- Principe directeur : la sobriété orientée usage — une application de gestion s'utilise toute la journée, la priorité va à la rapidité de saisie, la lisibilité et la prévisibilité ; rien ne remplace l'observation des utilisateurs réels.
Mini-cas filé — Yacine modernise l'écran de saisie de commande
Yacine, développeur WinDev dans une PME de négoce de matériel électrique à Oran, reçoit une plainte récurrente : la saisie d'une commande est trop lente. En observant une commerciale travailler, il découvre que l'essentiel du temps est perdu en clics et en fenêtres. Il repense l'écran avec les outils avancés : une fenêtre interne de zone d'accueil dont le contenu change selon le contexte (fiche client / catalogue produits), un superchamp pour le bloc d'adresse réutilisé partout, et deux dispositions — large pour les postes de bureau, compacte pour les portables — entre lesquelles on bascule selon la taille d'écran. Il ajoute un looper pour afficher les lignes de commande en vignettes lisibles, soigne l'ordre de tabulation et la saisie au clavier. Il résiste à la tentation du spectaculaire : une appli de gestion s'utilise toute la journée. Il note le réflexe : observer les utilisateurs réels révèle ce qui les ralentit vraiment — et ce n'est jamais ce qu'on croyait.
Cas autonome de cette section : il revient dans le cours, le schéma, le script et le défi 48h de la section 4.3.
1. Fenêtres internes, superchamps, dispositions
Au-delà des fenêtres classiques, WinDev offre des outils pour construire des interfaces riches et adaptables. Les fenêtres internes permettent de composer dynamiquement un écran : une zone d'accueil dont le contenu change selon le contexte, un assistant en plusieurs étapes, des onglets chargés à la demande. Les superchamps sont des ensembles de champs avec leur comportement, déposables comme un champ unique (par exemple un bloc d'adresse réutilisé partout). Les dispositions (layouts) donnent à une même fenêtre plusieurs présentations — « large » et « compacte » — entre lesquelles on bascule selon la taille d'écran ou le contexte : précieux face à la diversité des résolutions.
2. Les autres leviers d'ergonomie
D'autres briques complètent l'interface. Les zones répétées et loopers affichent une liste d'éléments avec une présentation libre (vignettes, fiches, listes riches), plus souple qu'une table classique. Les rubans, barres d'outils et menus contextuels (clic droit) structurent l'accès aux fonctions. Les fenêtres modales (qui bloquent tant qu'on n'a pas répondu) et non modales se choisissent consciemment : une modale mal placée bloque le travail de l'utilisateur. Ajoutez les infobulles, indicateurs de progression et animations discrètes.
3. La sobriété orientée usage
Le principe directeur reste la sobriété orientée usage : une application de gestion s'utilise toute la journée. La priorité n'est pas l'effet visuel mais la rapidité de saisie (ordre de tabulation impeccable, tout au clavier, valeurs par défaut), la lisibilité, la prévisibilité (les mêmes actions au même endroit) et le confort (contraste, taille de police, raccourcis). Rien ne vaut l'observation des utilisateurs réels : c'est là qu'on découvre ce qui les ralentit vraiment — et ce n'est jamais ce qu'on croyait.
🔎 Exemple concret — 🔎 Exemple concret — Composer et adapter l'écran
Trois outils avancés au service de l'efficacité, comme les emploie Yacine :
// Fenetre interne : composer un ecran dynamique
// la zone d'accueil change de contenu selon le contexte
// (fiche client / catalogue produits) sans dupliquer l'ecran.
// Superchamp : un bloc d'adresse reutilisable, depose comme un champ unique.
// Dispositions : une meme fenetre, plusieurs presentations
// "Large" (poste de bureau) / "Compacte" (portable)
// on bascule selon la taille d'ecran ou le contexte.
// Looper : afficher les lignes de commande en vignettes lisibles.Lecture : fenêtres internes, superchamps et dispositions adaptent la structure de l'écran au contexte et au matériel, sans dupliquer.
Leçon : on gagne en rapidité de saisie et en lisibilité — les critères qui comptent vraiment au quotidien.
Vocabulaire de la section
- Fenêtre interne (composition)
- Au-delà de la réutilisation, elle compose dynamiquement un écran : zone dont le contenu change selon le contexte, assistant multi-étapes, onglets chargés à la demande.
Exemple simple : Yacine fait varier la zone d'accueil selon le contexte (client / catalogue).
Ce que ce n'est pas : une fenêtre figée qui duplique tout l'écran.
Réflexe : écran dynamique → la fenêtre interne.
- Superchamp
- Ensemble de champs avec son comportement, déposé comme un champ unique et réutilisable.
Exemple simple : Yacine dépose un superchamp d'adresse dans plusieurs écrans.
Ce que ce n'est pas : recopier chaque champ à la main dans chaque fenêtre.
Réflexe : bloc réutilisable → le superchamp.
- Dispositions (layouts)
- Une même fenêtre peut avoir plusieurs présentations (large, compacte) entre lesquelles on bascule selon la taille d'écran ou le contexte.
Exemple simple : Yacine prévoit une disposition bureau et une disposition portable.
Ce que ce n'est pas : une seule présentation imposée à tous les écrans.
Réflexe : s'adapter aux résolutions → les dispositions.
- Zone répétée / Looper
- Afficher une liste d'éléments avec une présentation libre (vignettes, fiches, listes riches), plus souple qu'une table classique.
Exemple simple : Yacine affiche les lignes de commande en vignettes.
Ce que ce n'est pas : une table en lignes et colonnes, peu lisible pour ce besoin.
Réflexe : liste à présentation libre → le looper.
- Sobriété orientée usage
- Une application de gestion s'utilise toute la journée : priorité à la rapidité de saisie, la lisibilité, la prévisibilité et le confort — pas à l'effet visuel.
Exemple simple : Yacine soigne la tabulation et le contraste plutôt que les animations.
Ce que ce n'est pas : des animations spectaculaires qui ralentissent la saisie.
Réflexe : efficacité quotidienne → la sobriété orientée usage.
En pratique — En pratique — Construire une interface efficace
- Utilisez les fenêtres internes pour composer des écrans dynamiques (assistants, zones contextuelles) et factoriser les blocs répétés, comme Yacine.
- Prévoyez plusieurs dispositions si vos utilisateurs ont des tailles d'écran très différentes, et testez le rendu sur chacune.
- Choisissez consciemment entre fenêtre modale (bloque, pour une décision nécessaire) et non modale (laisse travailler) selon l'usage réel.
- Priorisez la rapidité de saisie et la lisibilité (raccourcis clavier, ordre de tabulation, contraste), puis observez des utilisateurs réels pour repérer ce qui les ralentit.
Script pas-à-pas — moderniser l'écran comme Yacine (5 min)
1) Observez un utilisateur réel saisir une commande et notez chaque geste inutile. 2) Composez l'écran avec une fenêtre interne : zone d'accueil dont le contenu change selon le contexte. 3) Factorisez le bloc d'adresse dans un superchamp réutilisable. 4) Prévoyez une disposition large et une compacte, et basculez selon la taille d'écran. 5) Affichez les lignes de commande dans un looper lisible. 6) Réglez l'ordre de tabulation et la saisie au clavier, puis faites re-tester par l'utilisateur.
Résistez au spectaculaire : le bon critère n'est pas « beau » mais « rapide à saisir, lisible et prévisible ».
Modèle copier-coller — ma fiche interface
Fenetre interne : composer un ecran dynamique (zone contextuelle, assistant)
Superchamp : bloc de champs reutilisable (ex. adresse)
Dispositions : plusieurs presentations selon la taille d'ecran
Looper : listes a presentation libre (vignettes, fiches)
Modale / non modale : a choisir consciemment selon l'usage
Priorite : rapidite de saisie, lisibilite, previsibilite
Regle : observer les utilisateurs reels (pas deviner)Écran composé
Yacine fait varier la zone d'accueil selon le contexte via une fenêtre interne.
Superchamp d'adresse
Yacine factorise le bloc d'adresse client dans un superchamp réutilisé partout.
Disposition compacte
Yacine bascule sur une disposition compacte pour les portables des commerciaux.
Looper de lignes
Yacine affiche les lignes de commande en vignettes lisibles dans un looper.
✓ Bonnes pratiques
- Composer les écrans avec des fenêtres internes et des superchamps.
- Prévoir des dispositions selon la diversité des écrans.
- Prioriser rapidité de saisie et lisibilité, puis observer les utilisateurs.
✗ Pièges fréquents
- Privilégier l'effet visuel au détriment de l'efficacité.
- Multiplier les fenêtres modales qui piègent l'utilisateur.
- Deviner les points de friction au lieu d'observer.
Points clés à retenir
- Fenêtres internes (composer), superchamps (réutiliser) et dispositions (adapter) enrichissent l'interface.
- Loopers, menus et fenêtres modales/non modales complètent les leviers d'ergonomie.
- Priorité à la rapidité de saisie, la lisibilité et la prévisibilité (sobriété orientée usage).
- Rien ne remplace l'observation des utilisateurs réels.
Défi 48h — appliquez demain
Comme Yacine, choisissez un écran de saisie fréquent de votre application et observez un utilisateur réel le remplir. Notez les gestes inutiles, puis améliorez : factorisez un bloc dans un superchamp, composez une zone avec une fenêtre interne et prévoyez deux dispositions (large/compacte). Soignez l'ordre de tabulation et la saisie au clavier. Écrivez en une phrase le gain mesuré (clics, temps) et ce que l'observation a révélé.
- Je compose des écrans dynamiques avec des fenêtres internes.
- Je factorise des blocs avec des superchamps et j'adapte via des dispositions.
- Je priorise l'efficacité quotidienne et j'observe les utilisateurs réels.
Questions fréquentes
Qu'est-ce qui fait une bonne interface pour une application de gestion ?
L'efficacité dans la durée, pas l'esthétique : une application de gestion s'utilise des heures chaque jour, donc la vitesse de saisie, la lisibilité, la prévisibilité et la réduction du nombre d'actions priment sur tout effet visuel. Concrètement : un ordre de tabulation impeccable, une saisie entièrement possible au clavier, des valeurs par défaut intelligentes, un contraste suffisant, les mêmes actions au même endroit dans tous les écrans, un retour d'information clair (enregistré ? refusé ?) et des messages utiles. L'esthétique et les animations comptent bien moins qu'on ne le croit.
Quand utiliser une fenêtre modale plutôt qu'une fenêtre normale ?
Utilisez une modale quand l'utilisateur doit répondre avant de continuer (choix indispensable, confirmation d'une action irréversible, saisie bloquante d'un processus) ; préférez une fenêtre non modale dès qu'il peut légitimement vouloir travailler ailleurs en parallèle. Une modale mal placée piège l'utilisateur : s'il a besoin d'une information disponible dans un autre écran pour répondre, il doit annuler, aller la chercher, puis tout recommencer. La non modale laisse comparer deux fiches ou traiter un client tout en vérifiant une commande.
Qu'est-ce qui fait une bonne interface d'application de gestion ?