Diseño de elementos interactivos y controles UI

1Selección y uso correcto de controles

Los controles UI (widgets) permiten entrada de datos, selección de opciones y ejecución de acciones. Elegir mal el control genera confusión y aumenta errores.

A) Botones de comando

• Primario: la acción principal deseada en la pantalla, un único botón destacado.
• Secundario: acciones alternativas.
• Terciario / fantasma: sin relleno, para acciones neutras o cancelación.
• FAB: botón flotante para la acción más frecuente en móviles.

B) Campos de entrada de texto

• Línea única para datos breves.
• Tipos semánticos (email, password, tel, number) para desplegar el teclado móvil adecuado.
• Máscaras automáticas para formatos complejos (fechas, IBAN).
• Áreas de texto para contenido extenso con indicador de límite de caracteres.

C) Controles de selección

Otros: deslizadores para rangos continuos/discretos, selectores de fecha/hora con visualización de calendario.

2Distribución de acciones

1. Globales: barra superior o menú principal.
2. Sección/pantalla: barra de herramientas de la pantalla actual.
3. Elemento: integradas en el propio objeto o en su menú contextual.

3Pautas de flujo de aplicación

• Wizards / steppers: procesos complejos divididos en pasos numerados secuenciales.
• Prevención de pérdida: diálogos de advertencia al abandonar formularios sin guardar.
• Undo/Redo: permitir revocar acciones (Ctrl+Z).

✓Para saber si lo has entendido

• Sé diferenciar botón primario, secundario, terciario/fantasma y FAB.
• Conozco cuándo usar radio buttons frente a checkboxes.
• Sé cuándo un switch es más adecuado que un checkbox.
• Distingo cuándo usar dropdown frente a combobox.
• Conozco los tres niveles de distribución de acciones.
• Entiendo para qué sirven los wizards/steppers.
• Sé por qué hay que ofrecer undo/redo y advertir al abandonar un formulario.