4.3 · UX avancée : fenêtres internes, superchamps & dispositions

Niveau 4 · Expert : applications professionnelles & déploiement

4.3UX avancée : fenêtres internes, superchamps & dispositions

Objectif : moderniser l'interface avec fenêtres internes, superchamps, ancrages, dispositions et thèmes.
Temps estimé : 11 min

Au-delà des fenêtres classiques, WinDev offre des outils pour construire des interfaces RICHES et ADAPTABLES. (1) Les FENÊTRES INTERNES (déjà vues comme outil de réutilisation) permettent aussi de composer dynamiquement un écran : une zone d'accueil qui change de contenu selon le contexte, un assistant en plusieurs étapes, des onglets dont le contenu est chargé à la demande. (2) Les SUPERCHAMPS : des ensembles de champs avec leur comportement, déposables comme un champ unique. (3) Les DISPOSITIONS (layouts) : une même fenêtre peut avoir PLUSIEURS présentations (par exemple une disposition « large » et une disposition « compacte »), et l'on bascule de l'une à l'autre selon la taille de l'écran ou le contexte d'utilisation — un mécanisme précieux face à la diversité des résolutions.

Les autres leviers d'ERGONOMIE. (1) Les ZONES RÉPÉTÉES et LOOPERS : afficher une liste d'éléments avec une présentation libre (plus souple qu'une table classique) — utile pour des vignettes, des fiches, des listes riches. (2) Les RUBANS, barres d'outils, menus contextuels (clic droit) : structurer l'accès aux fonctions. (3) Les fenêtres MODALES (qui bloquent l'accès au reste tant qu'on n'a pas répondu) et NON MODALES : à choisir consciemment, car une modale mal placée bloque le travail de l'utilisateur. (4) Les infobulles, indicateurs de progression, animations discrètes. 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, la LISIBILITÉ, la PRÉVISIBILITÉ (les mêmes actions au même endroit) et le confort (contraste, taille de police, raccourcis clavier). Rien ne vaut l'OBSERVATION des utilisateurs réels : c'est là qu'on découvre ce qui les ralentit vraiment.

Vocabulaire de la section

Fenêtre interne (composition)
Au-delà de la réutilisation, elle permet de COMPOSER dynamiquement un écran : zone dont le contenu change selon le contexte, assistant multi-étapes, onglets chargés à la demande.
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 — précieux face à la diversité des résolutions.
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 en lignes et colonnes.
Modale / non modale
Une fenêtre MODALE bloque l'accès au reste tant qu'on n'a pas répondu ; une NON MODALE laisse travailler ailleurs. À choisir consciemment : une modale mal placée bloque l'utilisateur.
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.
Vérifiez votre compréhension

Qu'est-ce qui fait une bonne interface d'application de GESTION ?

Tutoriel 4.3
Tutos « 4.3 » WinDev UX avancée fenêtre interne superchamp disposition (recherche)
Cliquer pour voir les résultats à jour ↗

En pratique — Construire une interface efficace

  1. Utilisez les FENÊTRES INTERNES pour composer des écrans dynamiques (assistants, zones contextuelles) et factoriser les blocs répétés.
  2. Prévoyez plusieurs DISPOSITIONS si vos utilisateurs ont des tailles d'écran très différentes, et testez le rendu sur chacune.
  3. Choisissez consciemment entre fenêtre MODALE (bloque, pour une décision nécessaire) et NON MODALE (laisse travailler) selon l'usage réel.
  4. 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.
Vous concevez des interfaces adaptables et efficaces, pensées pour un usage intensif quotidien plutôt que pour l'effet visuel.

Points clés à retenir

  • Outils d'interface avancés : FENÊTRES INTERNES (composer dynamiquement un écran : assistants, zones contextuelles, onglets à la demande), SUPERCHAMPS (ensembles de champs réutilisables) et DISPOSITIONS/layouts (plusieurs présentations d'une même fenêtre selon la taille d'écran).
  • Autres leviers : ZONES RÉPÉTÉES et LOOPERS (listes à présentation libre, plus souples qu'une table), rubans/barres d'outils/menus contextuels, fenêtres MODALES (bloquantes) 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É, la PRÉVISIBILITÉ (mêmes actions au même endroit) et le confort — pas à l'effet visuel.
  • Rien ne remplace l'OBSERVATION des utilisateurs réels : c'est en les regardant travailler qu'on découvre ce qui les ralentit vraiment (et ce n'est jamais ce qu'on croyait).

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. Les critères qui comptent vraiment : (1) RAPIDITÉ DE SAISIE. C'est le critère n°1. Un opérateur qui saisit des centaines de lignes par jour juge l'application au nombre de gestes nécessaires. Cela implique : un ORDRE DE TABULATION impeccable, une saisie entièrement possible au CLAVIER, des valeurs par défaut intelligentes, des raccourcis, et le curseur positionné au bon endroit à l'ouverture. (2) LISIBILITÉ. Contraste suffisant, taille de police confortable, informations importantes mises en évidence, densité maîtrisée. On regarde ces écrans toute la journée : la fatigue visuelle est un vrai sujet. (3) PRÉVISIBILITÉ. Les mêmes actions au même endroit dans tous les écrans, les mêmes libellés pour les mêmes concepts, les mêmes comportements (Entrée valide, Échap annule). L'utilisateur ne doit jamais se demander où cliquer. (4) MOINS D'ÉTAPES. Chaque clic ou fenêtre supplémentaire coûte, multiplié par des centaines de répétitions quotidiennes. Supprimez les confirmations inutiles, les navigations superflues. (5) RETOUR d'information clair : l'utilisateur doit toujours savoir ce qui s'est passé (enregistré ? refusé ? en cours ?) — surtout pour les traitements longs (barre de progression obligatoire). (6) MESSAGES utiles : dire ce qui ne va pas et comment corriger. Ce qui compte MOINS qu'on ne croit : (1) L'esthétique « moderne » : agréable, mais très secondaire face à l'efficacité. Un bel écran lent à saisir sera détesté. (2) Les animations et effets : au mieux neutres, souvent ralentissants et fatigants sur un usage intensif. (3) La densité minimale : en gestion, l'utilisateur EXPERT préfère souvent voir beaucoup d'informations d'un coup plutôt que de naviguer entre des écrans épurés. C'est l'inverse d'une application grand public. (4) Cacher des fonctions « pour faire propre » : les experts veulent un accès direct. La méthode : (1) OBSERVEZ des utilisateurs RÉELS en situation. C'est irremplaçable : vous découvrirez qu'ils utilisent un écran autrement que prévu, qu'ils contournent une étape, qu'ils ressaisissent une information faute de reprise automatique. (2) ÉCOUTEZ les plaintes récurrentes : « je dois cliquer trois fois », « je ne vois pas si c'est enregistré », « je dois reprendre la souris ». Ce sont des indications précieuses. (3) Mesurez le nombre d'actions nécessaires pour les tâches les plus fréquentes, et optimisez celles-là en priorité. (4) Testez en conditions réelles : volumes réels, écrans réels des utilisateurs. (5) Itérez : l'ergonomie s'améliore par ajustements successifs. En résumé : une bonne interface de gestion se juge à son EFFICACITÉ dans un usage quotidien intensif, pas à son esthétique. La priorité absolue est la RAPIDITÉ DE SAISIE — ordre de tabulation impeccable, saisie intégralement possible au clavier, valeurs par défaut, raccourcis, curseur bien positionné — suivie de la LISIBILITÉ (contraste, taille de police, hiérarchie de l'information, car la fatigue visuelle est réelle quand on passe la journée devant ces écrans), de la PRÉVISIBILITÉ (mêmes actions au même endroit, même vocabulaire, mêmes comportements partout) et de la RÉDUCTION du nombre d'étapes, chaque clic superflu étant multiplié par des centaines de répétitions. Ajoutez un retour d'information clair (l'utilisateur doit toujours savoir si c'est enregistré, refusé ou en cours, avec une barre de progression pour les traitements longs) et des messages qui expliquent comment corriger. À l'inverse, l'esthétique « moderne », les animations et l'épure comptent beaucoup moins qu'on ne le croit : en gestion, l'utilisateur EXPERT préfère souvent une forte densité d'information et un accès direct aux fonctions — l'exact contraire des règles du grand public. La seule méthode fiable reste d'OBSERVER des utilisateurs réels en situation et d'écouter leurs plaintes récurrentes, puis d'optimiser en priorité les tâches les plus fréquentes.

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. La fenêtre MODALE : (1) Principe : tant qu'elle est ouverte, l'utilisateur ne peut pas accéder au reste de l'application. Elle BLOQUE. (2) Justifiée quand : le programme a besoin d'une RÉPONSE pour continuer (choisir une option, confirmer une suppression), l'action est IRRÉVERSIBLE et mérite une confirmation explicite, ou l'on est au milieu d'un processus qu'il serait dangereux d'interrompre (une transaction en cours). (3) Avantage : le flux est clair et sans ambiguïté, on maîtrise l'état de l'application. (4) Inconvénient majeur : elle bloque tout. Si l'utilisateur a besoin d'une information disponible dans un autre écran pour répondre, il est PIÉGÉ — il doit annuler, aller chercher l'information, puis tout recommencer. C'est extrêmement frustrant, et c'est l'erreur la plus fréquente. La fenêtre NON MODALE : (1) Principe : l'utilisateur peut aller travailler ailleurs, ouvrir d'autres écrans, revenir. (2) Adaptée quand : consultation d'informations, écran de recherche que l'on garde ouvert, fiche que l'on souhaite comparer avec une autre, travail sur plusieurs dossiers en parallèle (une réalité fréquente en gestion : on traite un client tout en vérifiant une commande). (3) Avantage : liberté et productivité — c'est souvent ce que veulent les utilisateurs experts. (4) Inconvénient : plus complexe à gérer (plusieurs fenêtres ouvertes sur les mêmes données : attention aux modifications concurrentes et au rafraîchissement des affichages). Comment décider : (1) Posez-vous la question : « l'utilisateur peut-il avoir une bonne raison de vouloir faire autre chose maintenant ? » Si oui → non modale. (2) « Le programme peut-il continuer sans sa réponse ? » Si non → modale. (3) Confirmations : réservez-les aux actions VRAIMENT irréversibles (suppression définitive). Les confirmations systématiques (« Voulez-vous vraiment enregistrer ? ») sont contre-productives : à force, l'utilisateur valide machinalement sans lire — la confirmation ne protège alors plus de rien, elle ne fait que ralentir. (4) Sélection d'une valeur (choisir un client dans une liste) : la modale se justifie généralement, car le flux est court et ciblé. (5) Consultation : jamais modale. Les bonnes pratiques : (1) Modales COURTES et ciblées : une question, une réponse, on referme. (2) Toujours une SORTIE claire (bouton Annuler, touche Échap). Une modale sans échappatoire évidente est un piège. (3) Ne pas EMPILER les modales les unes sur les autres : c'est déroutant. (4) Pour les traitements longs, préférez un indicateur de PROGRESSION à une modale figée sans information. (5) Testez le parcours réel : demandez-vous si l'utilisateur aura toutes les informations nécessaires SANS quitter la fenêtre. En résumé : réservez la fenêtre MODALE aux cas où l'utilisateur DOIT répondre pour que le programme continue — choix indispensable, confirmation d'une action réellement irréversible, étape d'un processus qu'il serait dangereux d'interrompre — et préférez une fenêtre NON MODALE dès qu'il peut légitimement vouloir consulter autre chose en parallèle, situation très fréquente en gestion où l'on travaille sur plusieurs dossiers à la fois. Le défaut classique de la modale est de PIÉGER l'utilisateur : s'il lui manque une information disponible dans un autre écran, il doit tout annuler, aller la chercher et recommencer. Le test de décision est simple : « peut-il avoir une bonne raison de faire autre chose maintenant ? » (oui → non modale) et « le programme peut-il continuer sans sa réponse ? » (non → modale). Attention particulière aux confirmations : ne les réservez qu'aux actions vraiment irréversibles, car des confirmations systématiques finissent validées machinalement et ne protègent plus de rien tout en ralentissant le travail. Enfin, gardez les modales COURTES et ciblées, prévoyez toujours une sortie claire (Annuler, Échap), n'empilez jamais les modales, et pour les traitements longs affichez une progression plutôt qu'un écran figé.

Autres ressources