Reglas de interacción

Última actualización: 14 de noviembre de 2026.

Estas reglas definen el comportamiento compartido de la interfaz de Salud365. Se aplican junto a los requisitos funcionales de cada módulo y a las definiciones de Componentes.

1. Composición por pasos

1. Cada paso debe caber en una sola vista en tamaños habituales de móvil y escritorio, evitando desplazamiento innecesario.
2. Mantener visibles las acciones principales y todos los campos obligatorios.
3. Utilizar pasos adicionales o modales cuando aporten claridad, por ejemplo para detalles u opciones secundarias.
4. Conservar legibilidad y navegación por teclado. Permitir desplazamiento cuando sea necesario por texto ampliado, teclado virtual o pantallas excepcionalmente pequeñas.
5. Comprobar altura del contenido y visibilidad de las acciones, además del ancho.

2. Acciones y navegación

Situación	Regla
Acción principal	Usar una etiqueta concreta y un nivel visual dominante dentro del bloque.
Continuar	Explicar qué falta cuando una condición impida avanzar.
Volver	Conservar los datos que puedan mantenerse de forma segura.
Acción destructiva	Mostrar qué se afectará y solicitar confirmación cuando corresponda.
Enlace	Identificar claramente el destino o contenido que se abrirá.
Control de solo icono	Añadir nombre accesible; la ayuda visual no reemplaza ese nombre.
Navegación activa	Señalar el destino actual mediante texto, forma o indicador, además del color.

3. Formularios

• Asociar etiquetas, ayudas y errores a sus controles.
• Marcar los campos obligatorios de manera visible y accesible.
• Conservar los valores introducidos cuando falle una validación o solicitud.
• Mostrar errores cerca del campo o bloque afectado, con una explicación útil.
• Elegir el teclado adecuado para correo, teléfono o números cuando corresponda.
• Permitir pegar y usar funciones de autocompletado compatibles con la operación.
• Facilitar localizar el primer error cuando un formulario tenga varios.
• No comunicar éxito antes de recibir el resultado que exige la operación.

4. Estados de operación

Estado	Qué debe comprender el usuario
Listo	Qué puede hacer y qué información necesita.
Cargando o enviando	Qué está ocurriendo y qué acciones siguen disponibles.
Completado	Qué operación terminó y cuál es el siguiente paso.
Rechazado o fallido	Qué no se completó y cómo continuar.
Resultado no confirmado	Que el resultado todavía no es definitivo; evitar presentarlo como éxito o permitir una repetición insegura.
Sin datos	Que la ausencia de contenido es distinta de una carga fallida.

Durante un envío, impedir activaciones repetidas de la misma acción. Un indicador visual no sustituye los controles de consistencia del servidor.

5. Modales y elementos desplegables

1. Usar un título que identifique la tarea.
2. Llevar el foco al diálogo al abrirlo y mantenerlo dentro mientras esté activo.
3. Ofrecer una salida clara y devolver el foco al activador al cerrar.
4. Mantener el contenido y las acciones utilizables en ventanas pequeñas.
5. Proporcionar navegación por teclado en menús, pestañas y selectores.
6. Conservar datos al abrir y cerrar información secundaria.
7. Evitar que un elemento superpuesto tape de forma permanente el contenido necesario para completar la tarea.

6. Adaptación a móvil y escritorio

La composición se adapta por ancho y altura disponibles. Se definen los siguientes puntos de corte para reorganizar el contenido:

Condición	Aplicación
Menos de 640 px de ancho	Composición móvil en una columna cuando corresponda.
Desde 640 px	Ajustes de espaciado y distribución de formularios.
Desde 768 px	Variantes de navegación y controles para escritorio o tableta.
Desde 1024 px	Distribuciones de escritorio y composición lateral cuando exista espacio.
Desde 1024 px y 896 px de alto	Variante de escritorio alto.
Desde 1024 px y menos de 896 px de alto	Variante compacta de escritorio.
Menos de 1024 px y hasta 700 px de alto	Variante compacta para celulares bajos.

Los puntos de corte no identifican un dispositivo concreto. El contenido y el tipo de interacción también determinan la composición. Revisar los controles con puntero preciso y con pantalla táctil, incluso a igual ancho.

7. Accesibilidad y movimiento

• Contraste legible sobre el fondo real y estados que no dependan exclusivamente del color.
• Foco visible, orden lógico de tabulación y activación mediante teclado.
• Área táctil de al menos 44 × 44 px como criterio de diseño para las acciones principales; revisar variantes pequeñas del catálogo.
• Texto alternativo en imágenes informativas y tratamiento decorativo en iconos redundantes.
• Anuncios accesibles para errores y resultados relevantes, evitando avisos repetitivos.
• Respetar la preferencia de reducción de movimiento. Las animaciones deben ayudar a comprender cambios de estado.
• Mantener la posibilidad de ampliar el texto y usar zoom del navegador.

8. Comprobación de una implementación

Comprobación	Evidencia esperada
Móvil compacto	Campos y acciones visibles o alcanzables sin recortes.
Escritorio	Distribución proporcionada al ancho y a la altura disponibles.
Teclado	Acceso a controles, foco visible y salida de modales.
Texto ampliado	Reorganización del contenido sin perder información o acciones.
Estados	Carga, vacío, error, éxito y deshabilitado comprobados según el componente.
Contraste	Evaluación de texto y controles sobre sus superficies efectivas.
Interacción táctil	Áreas utilizables y ausencia de activaciones accidentales entre controles próximos.
Validación automatizada	Pruebas de interfaz que comprueben ancho, altura, visibilidad y funcionamiento de las acciones.

---

Descargar Markdown original