4.3UX avanzada: ventanas internas, supercampos y disposiciones
Lo esencial en 30 segundos
- Las ventanas internas componen dinámicamente una pantalla (zona cuyo contenido cambia según el contexto, asistente de varias etapas, pestañas cargadas a demanda), los supercampos agrupan campos reutilizables y las disposiciones ofrecen varias presentaciones de una misma ventana según el tamaño de pantalla.
- Otras palancas de ergonomía: zonas repetidas y loopers (listas con presentación libre), cintas de opciones/barras de herramientas/menús contextuales, ventanas modales o no modales que hay que elegir conscientemente.
- Principio rector: la sobriedad orientada al uso — una aplicación de gestión se usa todo el día; la prioridad es la rapidez de introducción, la legibilidad y la previsibilidad; nada sustituye a la observación de los usuarios reales.
Minicaso continuo — Yacine moderniza la pantalla de introducción de pedidos
Yacine, desarrollador WinDev en una pyme de comercio de material eléctrico en Orán, recibe una queja recurrente: la introducción de un pedido es demasiado lenta. Observando a una comercial trabajar, descubre que la mayor parte del tiempo se pierde en clics y ventanas. Replantea la pantalla con las herramientas avanzadas: una ventana interna de zona de bienvenida cuyo contenido cambia según el contexto (ficha de cliente / catálogo de productos), un supercampo para el bloque de dirección reutilizado en todas partes y dos disposiciones — ancha para los puestos de escritorio, compacta para los portátiles — entre las que se cambia según el tamaño de pantalla. Añade un looper para mostrar las líneas de pedido en tarjetas legibles, cuida el orden de tabulación y la introducción por teclado. Se resiste a la tentación de lo espectacular: una aplicación de gestión se usa todo el día. Anota el reflejo: observar a los usuarios reales revela lo que realmente los frena — y nunca es lo que creíamos.
Caso autónomo de esta sección: reaparece en el curso, el esquema, el guion y el reto de 48 h de la sección 4.3.
1. Ventanas internas, supercampos, disposiciones
Más allá de las ventanas clásicas, WinDev ofrece herramientas para construir interfaces ricas y adaptables. Las ventanas internas permiten componer dinámicamente una pantalla: una zona de bienvenida cuyo contenido cambia según el contexto, un asistente en varias etapas, pestañas cargadas a demanda. Los supercampos son conjuntos de campos con su comportamiento, que se depositan como un campo único (por ejemplo, un bloque de dirección reutilizado en todas partes). Las disposiciones (layouts) dan a una misma ventana varias presentaciones — «ancha» y «compacta» — entre las que se cambia según el tamaño de pantalla o el contexto: muy valioso ante la diversidad de resoluciones.
2. Las demás palancas de ergonomía
Otros componentes completan la interfaz. Las zonas repetidas y los loopers muestran una lista de elementos con una presentación libre (tarjetas, fichas, listas enriquecidas), más flexible que una tabla clásica. Las cintas de opciones, las barras de herramientas y los menús contextuales (clic derecho) estructuran el acceso a las funciones. Las ventanas modales (que bloquean hasta que se responde) y no modales se eligen conscientemente: una modal mal colocada bloquea el trabajo del usuario. Añada las informaciones emergentes, los indicadores de progreso y animaciones discretas.
3. La sobriedad orientada al uso
El principio rector sigue siendo la sobriedad orientada al uso: una aplicación de gestión se usa todo el día. La prioridad no es el efecto visual, sino la rapidez de introducción (orden de tabulación impecable, todo por teclado, valores por defecto), la legibilidad, la previsibilidad (las mismas acciones en el mismo lugar) y la comodidad (contraste, tamaño de fuente, atajos). Nada supera la observación de los usuarios reales: ahí se descubre lo que realmente los frena — y nunca es lo que creíamos.
🔎 Ejemplo concreto — 🔎 Ejemplo concreto — Componer y adaptar la pantalla
Tres herramientas avanzadas al servicio de la eficacia, como las emplea 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.Lectura: las ventanas internas, los supercampos y las disposiciones adaptan la estructura de la pantalla al contexto y al equipo, sin duplicar.
Lección: se gana en rapidez de introducción y en legibilidad — los criterios que realmente cuentan en el día a día.
Vocabulario de la sección
- Ventana interna (composición)
- Más allá de la reutilización, compone dinámicamente una pantalla: zona cuyo contenido cambia según el contexto, asistente de varias etapas, pestañas cargadas a demanda.
Ejemplo sencillo: Yacine hace variar la zona de bienvenida según el contexto (cliente / catálogo).
Lo que no es: una ventana fija que duplica toda la pantalla.
Reflejo: pantalla dinámica → la ventana interna.
- Supercampo
- Conjunto de campos con su comportamiento, depositado como un campo único y reutilizable.
Ejemplo sencillo: Yacine deposita un supercampo de dirección en varias pantallas.
Lo que no es: copiar cada campo a mano en cada ventana.
Reflejo: bloque reutilizable → el supercampo.
- Disposiciones (layouts)
- Una misma ventana puede tener varias presentaciones (ancha, compacta) entre las que se cambia según el tamaño de pantalla o el contexto.
Ejemplo sencillo: Yacine prevé una disposición de escritorio y una disposición de portátil.
Lo que no es: una sola presentación impuesta a todas las pantallas.
Reflejo: adaptarse a las resoluciones → las disposiciones.
- Zona repetida / Looper
- Mostrar una lista de elementos con una presentación libre (tarjetas, fichas, listas enriquecidas), más flexible que una tabla clásica.
Ejemplo sencillo: Yacine muestra las líneas de pedido en tarjetas.
Lo que no es: una tabla en filas y columnas, poco legible para esta necesidad.
Reflejo: lista con presentación libre → el looper.
- Sobriedad orientada al uso
- Una aplicación de gestión se usa todo el día: prioridad a la rapidez de introducción, la legibilidad, la previsibilidad y la comodidad — no al efecto visual.
Ejemplo sencillo: Yacine cuida la tabulación y el contraste en lugar de las animaciones.
Lo que no es: animaciones espectaculares que ralentizan la introducción.
Reflejo: eficacia diaria → la sobriedad orientada al uso.
En la práctica — En la práctica — Construir una interfaz eficaz
- Utilice las ventanas internas para componer pantallas dinámicas (asistentes, zonas contextuales) y factorizar los bloques repetidos, como Yacine.
- Prevea varias disposiciones si sus usuarios tienen tamaños de pantalla muy diferentes y pruebe el resultado en cada una.
- Elija conscientemente entre ventana modal (bloquea, para una decisión necesaria) y no modal (deja trabajar) según el uso real.
- Priorice la rapidez de introducción y la legibilidad (atajos de teclado, orden de tabulación, contraste) y después observe a usuarios reales para detectar lo que los frena.
Guion paso a paso — modernizar la pantalla como Yacine (5 min)
1) Observe a un usuario real introducir un pedido y anote cada gesto inútil. 2) Componga la pantalla con una ventana interna: zona de bienvenida cuyo contenido cambia según el contexto. 3) Factorice el bloque de dirección en un supercampo reutilizable. 4) Prevea una disposición ancha y una compacta, y cambie según el tamaño de pantalla. 5) Muestre las líneas de pedido en un looper legible. 6) Ajuste el orden de tabulación y la introducción por teclado, y haga que el usuario lo vuelva a probar.
Resista lo espectacular: el buen criterio no es «bonito», sino «rápido de introducir, legible y previsible».
Plantilla para copiar y pegar — mi ficha de interfaz
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)Pantalla compuesta
Yacine hace variar la zona de bienvenida según el contexto mediante una ventana interna.
Supercampo de dirección
Yacine factoriza el bloque de dirección del cliente en un supercampo reutilizado en todas partes.
Disposición compacta
Yacine cambia a una disposición compacta para los portátiles de los comerciales.
Looper de líneas
Yacine muestra las líneas de pedido en tarjetas legibles dentro de un looper.
✓ Buenas prácticas
- Componer las pantallas con ventanas internas y supercampos.
- Prever disposiciones según la diversidad de pantallas.
- Priorizar la rapidez de introducción y la legibilidad y luego observar a los usuarios.
✗ Errores frecuentes
- Privilegiar el efecto visual en detrimento de la eficacia.
- Multiplicar las ventanas modales que atrapan al usuario.
- Adivinar los puntos de fricción en lugar de observar.
Puntos clave
- Las ventanas internas (componer), los supercampos (reutilizar) y las disposiciones (adaptar) enriquecen la interfaz.
- Los loopers, los menús y las ventanas modales/no modales completan las palancas de ergonomía.
- Prioridad a la rapidez de introducción, la legibilidad y la previsibilidad (sobriedad orientada al uso).
- Nada sustituye a la observación de los usuarios reales.
Reto 48 h — aplícalo mañana
Como Yacine, elija una pantalla de introducción frecuente de su aplicación y observe a un usuario real rellenarla. Anote los gestos inútiles y después mejore: factorice un bloque en un supercampo, componga una zona con una ventana interna y prevea dos disposiciones (ancha/compacta). Cuide el orden de tabulación y la introducción por teclado. Escriba en una frase la ganancia medida (clics, tiempo) y lo que ha revelado la observación.
- Compongo pantallas dinámicas con ventanas internas.
- Factorizo bloques con supercampos y me adapto mediante disposiciones.
- Priorizo la eficacia diaria y observo a los usuarios reales.
Preguntas frecuentes
¿Qué hace buena una interfaz para una aplicación de gestión?
La eficacia a lo largo del tiempo, no la estética: una aplicación de gestión se usa durante horas cada día, así que la velocidad de introducción, la legibilidad, la previsibilidad y la reducción del número de acciones priman sobre cualquier efecto visual. En concreto: un orden de tabulación impecable, una introducción totalmente posible por teclado, valores por defecto inteligentes, contraste suficiente, las mismas acciones en el mismo lugar en todas las pantallas, una respuesta clara (¿guardado? ¿rechazado?) y mensajes útiles. La estética y las animaciones importan mucho menos de lo que se cree.
¿Cuándo usar una ventana modal en lugar de una ventana normal?
Use una modal cuando el usuario deba responder antes de continuar (elección indispensable, confirmación de una acción irreversible, introducción bloqueante de un proceso); prefiera una ventana no modal en cuanto pueda legítimamente querer trabajar en otro sitio en paralelo. Una modal mal colocada atrapa al usuario: si necesita una información disponible en otra pantalla para responder, debe cancelar, ir a buscarla y volver a empezar. La no modal permite comparar dos fichas o atender a un cliente mientras se comprueba un pedido.
¿Qué hace buena una interfaz de aplicación de gestión?