4.3Advanced UX: internal windows, supercontrols & layouts
The essentials in 30 seconds
- Internal windows dynamically compose a screen (an area whose content changes according to context, a multi-step wizard, tabs loaded on demand), supercontrols group reusable controls, and layouts offer several presentations of the same window depending on screen size.
- Other ergonomics levers: repeated areas and loopers (free-presentation lists), ribbons/toolbars/context menus, modal or non-modal windows to be chosen consciously.
- Guiding principle: usage-oriented restraint — a management application is used all day long; priority goes to input speed, readability and predictability; nothing replaces observing real users.
Mini-case thread — Yacine modernizes the order entry screen
Yacine, a WinDev developer at an electrical equipment trading SME in Oran, receives a recurring complaint: entering an order is too slow. Watching a saleswoman work, he discovers that most of the time is lost in clicks and windows. He redesigns the screen with advanced tools: an internal window for a home area whose content changes according to context (customer record / product catalog), a supercontrol for the address block reused everywhere, and two layouts — wide for desktop workstations, compact for laptops — between which you switch according to screen size. He adds a looper to display order lines as readable tiles, and takes care of the tab order and keyboard input. He resists the temptation of the spectacular: a management application is used all day long. He notes the reflex: observing real users reveals what really slows them down — and it is never what you thought.
Standalone case for this section: it returns in the course, the diagram, the script and the 48h challenge of section 4.3.
1. Internal windows, supercontrols, layouts
Beyond classic windows, WinDev offers tools to build rich and adaptable interfaces. Internal windows let you dynamically compose a screen: a home area whose content changes according to context, a multi-step wizard, tabs loaded on demand. Supercontrols are sets of controls with their behavior, placed like a single control (for example an address block reused everywhere). Layouts give the same window several presentations — 'wide' and 'compact' — between which you switch according to screen size or context: invaluable when faced with a variety of resolutions.
2. The other ergonomics levers
Other building blocks complete the interface. Repeated areas and loopers display a list of items with a free presentation (tiles, cards, rich lists), more flexible than a classic table. Ribbons, toolbars and context menus (right click) structure access to functions. Modal windows (which block until an answer is given) and non-modal windows are chosen consciously: a poorly placed modal blocks the user's work. Add tooltips, progress indicators and discreet animations.
3. Usage-oriented restraint
The guiding principle remains usage-oriented restraint: a management application is used all day long. The priority is not visual effect but input speed (impeccable tab order, everything by keyboard, default values), readability, predictability (the same actions in the same place) and comfort (contrast, font size, shortcuts). Nothing beats observing real users: that is where you discover what really slows them down — and it is never what you thought.
🔎 Concrete example — 🔎 Concrete example — Compose and adapt the screen
Three advanced tools serving efficiency, as Yacine uses them:
// 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.Reading: internal windows, supercontrols and layouts adapt the screen structure to context and hardware, without duplication.
Lesson: you gain input speed and readability — the criteria that really matter day to day.
Section vocabulary
- Internal window (composition)
- Beyond reuse, it dynamically composes a screen: an area whose content changes according to context, a multi-step wizard, tabs loaded on demand.
Simple example: Yacine varies the home area according to context (customer / catalog).
What it is not: a fixed window that duplicates the whole screen.
Reflex: dynamic screen → the internal window.
- Supercontrol
- A set of controls with its behavior, placed like a single reusable control.
Simple example: Yacine places an address supercontrol in several screens.
What it is not: copying each control by hand into each window.
Reflex: reusable block → the supercontrol.
- Layouts
- A single window can have several presentations (wide, compact) between which you switch according to screen size or context.
Simple example: Yacine provides a desktop layout and a laptop layout.
What it is not: a single presentation imposed on all screens.
Reflex: adapt to resolutions → layouts.
- Repeated area / Looper
- Display a list of items with a free presentation (tiles, cards, rich lists), more flexible than a classic table.
Simple example: Yacine displays order lines as tiles.
What it is not: a table with rows and columns, not very readable for this need.
Reflex: free-presentation list → the looper.
- Usage-oriented restraint
- A management application is used all day long: priority to input speed, readability, predictability and comfort — not visual effect.
Simple example: Yacine takes care of tabbing and contrast rather than animations.
What it is not: spectacular animations that slow down input.
Reflex: daily efficiency → usage-oriented restraint.
In practice — In practice — Build an efficient interface
- Use internal windows to compose dynamic screens (wizards, contextual areas) and factor repeated blocks, like Yacine.
- Provide several layouts if your users have very different screen sizes, and test the rendering on each.
- Choose consciously between modal window (blocks, for a necessary decision) and non-modal (lets people work) according to real usage.
- Prioritize input speed and readability (keyboard shortcuts, tab order, contrast), then observe real users to identify what slows them down.
Step-by-step script — modernize the screen like Yacine (5 min)
1) Observe a real user entering an order and note every unnecessary gesture. 2) Compose the screen with an internal window: a home area whose content changes according to context. 3) Factor the address block into a reusable supercontrol. 4) Provide a wide layout and a compact one, and switch according to screen size. 5) Display order lines in a readable looper. 6) Set the tab order and keyboard input, then have the user test again.
Resist the spectacular: the right criterion is not 'beautiful' but 'fast to enter, readable and predictable'.
Copy-paste template — my interface sheet
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)Composed screen
Yacine varies the home area according to context via an internal window.
Address supercontrol
Yacine factors the customer address block into a supercontrol reused everywhere.
Compact layout
Yacine switches to a compact layout for the salespeople's laptops.
Line looper
Yacine displays order lines as readable tiles in a looper.
✓ Best practices
- Compose screens with internal windows and supercontrols.
- Provide layouts according to screen diversity.
- Prioritize input speed and readability, then observe users.
✗ Common pitfalls
- Favoring visual effect to the detriment of efficiency.
- Multiplying modal windows that trap the user.
- Guessing friction points instead of observing.
Key takeaways
- Internal windows (compose), supercontrols (reuse) and layouts (adapt) enrich the interface.
- Loopers, menus and modal/non-modal windows complete the ergonomics levers.
- Priority to input speed, readability and predictability (usage-oriented restraint).
- Nothing replaces observing real users.
48h challenge — apply it tomorrow
Like Yacine, choose a frequently used input screen in your application and observe a real user filling it in. Note unnecessary gestures, then improve: factor a block into a supercontrol, compose an area with an internal window and provide two layouts (wide/compact). Take care of the tab order and keyboard input. Write in one sentence the measured gain (clicks, time) and what the observation revealed.
- I compose dynamic screens with internal windows.
- I factor blocks with supercontrols and adapt via layouts.
- I prioritize daily efficiency and observe real users.
Frequently asked questions
What makes a good interface for a management application?
Efficiency over time, not aesthetics: a management application is used for hours every day, so input speed, readability, predictability and reducing the number of actions take precedence over any visual effect. Concretely: an impeccable tab order, fully keyboard-driven input, smart default values, sufficient contrast, the same actions in the same place on all screens, clear feedback (saved? refused?) and useful messages. Aesthetics and animations matter far less than people think.
When should you use a modal window rather than a normal window?
Use a modal when the user must answer before continuing (essential choice, confirmation of an irreversible action, blocking input in a process); prefer a non-modal window as soon as they may legitimately want to work elsewhere in parallel. A poorly placed modal traps the user: if they need information available on another screen to answer, they must cancel, go and get it, then start all over. Non-modal lets them compare two records or handle a customer while checking an order.
What makes a good management application interface?