Diseño UI/UX del LIS clínico

Especificación de la aplicación operativa para personal de laboratorio. Este archivo es la fuente de diseño para prototipos, pantallas generadas en Stitch y posterior implementación. Los requisitos funcionales proceden de procesos, procedimientos y casos de uso; los nombres de entidades y estados se contrastan con el modelo de datos. Las rutas y pantallas descritas son propuestas de interfaz, no funciones ya implementadas.

1. Principios de experiencia

Contexto de uso. Es una herramienta de trabajo continuo para recepción, toma de muestras, técnicos, profesionales validadores, calidad, caja, almacén y auditoría. Muchas tareas se hacen con interrupciones, guantes, lectores de código de barras y presión de tiempo. Cada vista debe responder a tres preguntas: qué objeto estoy viendo, qué requiere atención y cuál es la siguiente acción segura.

Atmósfera. Clínica, precisa y serena. Densidad 8/10 en listas y mesas de trabajo; varianza 4/10 en composición; movimiento 2/10. La pantalla de acceso puede tener una composición asimétrica sobria. El espacio operativo usa jerarquía estable, líneas y agrupaciones; no tiene un «hero» comercial.

Reglas rectoras:

1. Mostrar siempre paciente, número de orden, sede y estado cuando una acción pueda afectar un resultado o una muestra. Confirmar identidad nuevamente antes de toma, entrega, corrección o divulgación sensible.
2. Separar estado clínico, estado de muestra y estado financiero. Una factura pagada no convierte una prueba en validada.
3. Hacer visibles bloqueos y su causa junto al botón afectado. El usuario necesita un camino de resolución, no solo un botón deshabilitado.
4. Mantener el contexto al ir y volver: filtros, ordenamiento, página de lista, selección y pestaña de detalle. Usar enlaces directos a orden, muestra, versión e informe.
5. Solicitar motivo y mostrar consecuencias antes de rechazar, cancelar, revertir, liberar, corregir o entregar. La confirmación presenta identificadores concretos, no mensajes genéricos.
6. Tratar la alerta crítica como tarea persistente con responsable y plazo. Un aviso temporal no sirve como evidencia de comunicación.
7. Mostrar versiones históricas como solo lectura y etiquetarlas explícitamente. Nunca permitir que un valor anterior se confunda con el vigente.
8. Restringir resultados sensibles también en búsquedas, notificaciones, vistas previas y exportaciones. La presencia del dato debe revelarse solo a quienes tienen permiso.

2. Sistema visual para Stitch y desarrollo

2.1 Colores y función

La interfaz usa neutros Zinc y un único acento de marca, verde petróleo. Rojo, ámbar y verde de estado son colores semánticos de seguridad y nunca compiten como acentos de navegación. El texto de estado siempre acompaña al color.

El acento sobre blanco tiene contraste aproximado de 5,47:1; la tinta secundaria sobre el lienzo, 7,41:1; el texto de peligro sobre blanco, 6,57:1. Estas combinaciones son punto de partida: verificar también tamaño, estados y fondos compuestos en el prototipo. No usar negro puro, neón, gradientes de marca ni brillo exterior.

2.2 Tipografía y números

• Interfaz: Geist, con peso 400/500/600/700. Si no está disponible, una fuente sans del sistema mantiene las métricas y la legibilidad; la fuente se distribuye localmente cuando sea posible.
• Datos densos: Geist Mono para códigos de barras, número de orden, valores numéricos alineados, fechas y horas, lotes y versiones. Usar cifras tabulares.
• Escala: título de vista 28/34 px; sección 20/28; subtítulo 16/24; cuerpo 16/24; tabla densa 14/20; metadato 13/18. En móvil, cuerpo y campos permanecen en 16 px como mínimo.
• Lectura: párrafos de ayuda hasta 65 caracteres por línea; valores y unidades nunca se separan en líneas distintas si cambia su sentido. Signo, unidad, precisión y bandera deben permanecer visibles.

2.3 Retícula, espacio y componentes

• Retícula de 4/8 px. Márgenes: 16 px en móvil, 24 px en tablet, 32 px en escritorio. Contenido máximo 1440 px; formularios largos máximo 960 px. Encabezado 64 px y navegación lateral 232 px en escritorio.
• Dos zonas para pantallas de detalle: contenido principal de 8 columnas y panel contextual de 4. Por debajo de 1024 px se apilan; por debajo de 768 px todo queda en una columna.
• Botón principal sólido verde petróleo, uno por región de decisión. Botones secundarios con borde o texto. Acciones peligrosas usan estilo semántico rojo y confirmación con motivo.
• Bordes de radio 8 px para controles, 12 px para paneles, 16 px para diálogos. Sombras suaves solo en diálogo, menú superpuesto o panel que realmente flota; las listas se dividen con líneas.
• Campo con etiqueta arriba, ayuda opcional y error debajo. No usar placeholder como etiqueta. Objetivo interno de área activable: 44 × 44 px; 48 px de alto en campos táctiles.
• Iconos SVG coherentes, de trazo uniforme, acompañados de texto en acciones críticas. Ningún emoji estructural. Etiqueta visible en botones de aprobar, rechazar, entregar y escalar.
• Tablas con cabecera visible, ordenamiento marcado, filtros aplicados visibles, recuento y paginación. Las filas muestran una acción principal y un menú de acciones secundarias; no esconder acciones solo en hover.
• Etiquetas de estado con texto breve y forma consistente. Nunca inferir normal por ausencia de referencia ni marcar «entregado» por haber emitido un informe.

2.4 Movimiento y carga

Transiciones de foco, hover y apertura de panel entre 120 y 180 ms, mediante opacity y transform. Confirmaciones y valores críticos se presentan de inmediato y permanecen legibles sin animación. El indicador de sincronización puede tener un pulso tenue; resultados, alertas críticas y tablas no animan continuamente. En prefers-reduced-motion, se eliminan movimientos no esenciales. Para esperas superiores a un instante, usar esqueletos con la forma real de la tabla o formulario y texto de progreso cuando exista una operación prolongada.

2.5 Lo que Stitch no debe generar

No crear tarjetas idénticas en tres columnas, métricas decorativas, fotos de pacientes, datos clínicos inventados como si fueran reales, lorem ipsum, gradientes, botones brillantes, tipografía serif en el área operativa, cursores personalizados, controles sin etiqueta, listas que aparecen en cascada al cargar, confirmaciones que se cierran solas ni valores críticos que dependen solo del color. La pantalla de acceso puede usar una ilustración abstracta propia del laboratorio; el trabajo clínico requiere datos y controles, no imágenes de relleno.

3. Arquitectura de información y navegación

Caparazón persistente en escritorio: barra superior con organización, sede activa, rol efectivo, búsqueda por identificador y cuenta; navegación lateral por módulos; área principal con ruta de migas, título, estado y acción primaria; panel lateral contextual solo cuando aporta información necesaria. Un cambio de sede muestra el ámbito nuevo antes de cargar datos. El rol efectivo aparece junto a la cuenta cuando una persona tiene varios papeles.

La navegación muestra solo módulos permitidos, pero el servidor valida cada acción y cada lectura. Un enlace directo sin permiso responde con una pantalla de acceso denegado sin revelar datos del paciente. En móvil, la navegación lateral pasa a un menú; se conservan búsqueda y tareas críticas accesibles en la parte superior. El área principal no usa desplazamiento horizontal de toda la página: las tablas extensas se transforman en filas apiladas con datos prioritarios y un panel «Ver detalles».

Patrón de ruta propuesto: /pacientes/:id, /ordenes/:id, /muestras/:id, /pruebas/:id, /resultados/:id/versiones/:version, /informes/:id. Son identificadores técnicos en enlaces, no información sensible en la URL. Se preserva retorno a la lista de origen mediante estado de navegación y filtros en la URL cuando no contienen datos sensibles.

4. Catálogo de pantallas

Cada pantalla indica su objetivo, composición visible, acción principal y bloqueo más importante. La relación PO/CU remite al documento funcional.

4.1 Acceso, inicio y admisión

UI-01 · Acceso y contexto de trabajo — P15 transversal

Composición: inicio de sesión en dos áreas asimétricas: formulario a la izquierda y descripción breve del laboratorio a la derecha. Tras autenticar, selector de organización/sede y rol efectivo solo cuando existe más de una opción. Mostrar última sede usada sin seleccionarla silenciosamente si cambió el contexto.

Acción y estados: «Entrar al LIS». Mensajes de credenciales, sesión expirada y cuenta inactiva en el formulario. No mostrar nombres de pacientes antes de autenticar. Permitir gestores de contraseñas, pegado y mecanismos de autenticación que la institución habilite.

UI-02 · Inicio operativo — P02–P16

Composición: encabezado «Mi jornada» con sede y turno; cola prioritaria por rol; contadores de tareas reales (muestras por recibir, controles bloqueados, resultados por validar, críticos pendientes) y lista de alertas. Un contador abre el listado filtrado correspondiente. No mostrar totales clínicos a roles de caja o almacén.

Acción y estados: «Continuar siguiente tarea» dirige a la primera tarea autorizada. Cada fila muestra objeto, antigüedad, prioridad, responsable y siguiente acción. Si no hay tareas: texto específico «No hay muestras pendientes de recepción en esta sede» y enlace a filtros, sin números inventados.

UI-03 · Buscar e identificar paciente — PO-02, CU-01

Composición: búsqueda por tipo/número de documento, historia o nombre; resultados con identificador parcialmente oculto según rol, fecha de nacimiento y señal de posible duplicado. Un panel de comparación ayuda a resolver coincidencias sin fusionarlas automáticamente.

Acción y estados: «Abrir paciente» o «Crear paciente». Si un identificador ya existe, mostrar coincidencia y bloquear creación duplicada. Correcciones o resolución de duplicados requieren motivo y auditoría.

UI-04 · Ficha de paciente y consentimientos — PO-02, CU-04, CU-22

Composición: cabecera fija con identidad verificada, historia y avisos de seguridad; pestañas «Datos», «Órdenes», «Cobertura», «Consentimientos» y «Accesos». Los resultados sensibles no aparecen como vista previa en la ficha general.

Acción y estados: «Nueva orden» o «Registrar consentimiento». El formulario de consentimiento pide alcance, otorgante, medio, vigencia y evidencia; muestra si fue revocado. Una consulta a contenido sensible verifica permiso y registra auditoría.

UI-05 · Crear orden — PO-02, CU-02, CU-03

Composición: flujo en cuatro pasos visibles: 1. Paciente y solicitante; 2. Pruebas/perfiles; 3. Datos clínicos y requisitos; 4. Cobertura, precios y revisión. Resumen lateral persistente de paciente, prioridad, pruebas y total. Perfiles expandidos se muestran como pruebas individuales con origen del perfil.

Acción y estados: «Registrar orden». Búsqueda de prueba por código o nombre; advertencia explícita si ya está activa en la orden. Marcar faltantes de consentimiento, preparación, muestra o tarifa en el paso donde se resuelven. Permitir guardar borrador de interfaz solo si el producto implementa persistencia coherente; nunca simular orden registrada antes de recibir número del servidor.

UI-06 · Detalle de orden — P02–P11, CU-03

Composición: cabecera de identidad, número, prioridad, sedes y estado clínico; línea de tiempo de hechos; pestañas «Pruebas», «Muestras», «Resultados», «Informes», «Finanzas» y «Auditoría». Cada prueba tiene estado propio, muestra/alícuota asignada, tiempo objetivo y causa de espera. Mostrar el estado financiero en una zona distinta.

Acción y estados: acción contextual «Agregar prueba», «Preparar toma» o «Ver informe». Al agregar prueba, comprobar estabilidad de muestra, consentimiento, tarifa y cobertura. Cancelación con motivo y vista previa de efectos sobre pruebas, facturas y muestras; conservar la línea de tiempo.

4.2 Cobertura y caja

UI-07 · Cobertura y cotización — PO-03, CU-05

Composición: prueba por prueba con tarifa vigente, descuento, pagador, autorización y total. Separar «cubierto por tercero» de «a cargo del paciente». Mostrar vigencia de plan y código de autorización; cualquier excepción queda asociada a quien la aprobó.

Acción y estados: «Confirmar cobertura». Ante falta de autorización, ofrecer «Solicitar autorización» o «Registrar excepción de urgencia» si el rol y la política lo permiten. No presentar un precio recalculado como si fuera el precio histórico de una orden ya registrada.

UI-08 · Factura, pagos y cuenta por cobrar — PO-03, CU-05, CU-06

Composición: factura con líneas congeladas, subtotal, descuento, impuesto, total, pagos aplicados, saldo y cuenta por cobrar. Línea de tiempo de pagos, reversos, envíos, glosas y cobros.

Acción y estados: «Registrar pago» solicita método, monto y referencia cuando aplique. Reversión abre confirmación con factura, pago, importe y motivo obligatorio. Anulación y reembolso son acciones separadas. Nunca editar una línea histórica desde esta pantalla.

4.3 Muestras y custodia

UI-09 · Toma y etiquetado — PO-04, CU-07

Composición: lista de pacientes citados o pendientes, escaneo de orden y verificación de dos identificadores; requisitos de recipiente/volumen, ayuno y muestra temporizada. El panel de etiqueta incluye código legible y de barras, paciente, orden, tipo de muestra, fecha/hora y sede.

Acción y estados: «Confirmar toma e imprimir etiqueta» solo después de verificar identidad. Ante fallo de impresora, mantener la muestra pendiente de etiquetado y ofrecer reimpresión controlada; no marcarla como lista para transporte. Registrar recolector y hora automáticamente con posibilidad de justificar corrección.

UI-10 · Recepción técnica — PO-04, CU-08

Composición: campo de escaneo siempre visible; resumen de orden, paciente, origen y tiempo desde toma; checklist de recipiente, volumen, integridad, temperatura y estabilidad. Historial de custodia a la derecha.

Acción y estados: «Aceptar muestra» o «Registrar no conformidad». La resolución requiere elección explícita: rechazar, nueva toma, aceptar excepción autorizada o cancelar prueba. Rechazo muestra causa, responsable y destino; una nueva toma genera código nuevo enlazado a la muestra previa.

UI-11 · Alícuotas y distribución — PO-05, CU-09

Composición: muestra madre arriba; debajo, mapa de alícuotas con volumen disponible, ubicación, pruebas vinculadas y prioridades. Lista de trabajo por sección en el panel adyacente.

Acción y estados: «Crear alícuota» y «Asignar pruebas». Avisar antes de exceder volumen o asociar una prueba incompatible. La relación muestra–alícuota–prueba queda visible sin depender de un tooltip.

UI-12 · Cadena de custodia — PO-04, PO-12

Composición: cronología inmutable de toma, transporte, recepción, ubicación, derivación, almacenamiento y descarte, con sede, custodio, hora y temperatura cuando corresponda. Cabecera con muestra y alícuotas.

Acción y estados: «Registrar transferencia» o «Registrar disposición». Un evento no se edita en línea; una rectificación añade evidencia nueva con motivo. Vista imprimible para entrega a un tercero.

4.4 Calidad, ejecución y captura

UI-13 · Lista de trabajo analítico — PO-07, CU-11

Composición: tabla filtrable por sede, sección, equipo, prioridad, estado y antigüedad. Primera columna con orden y prueba; segunda con muestra/alícuota; tercera con aptitud de equipo y control; última con acción. stat y urgente llevan texto además de señal visual.

Acción y estados: «Iniciar ejecución». Filas bloqueadas explican qué control, consentimiento, muestra o equipo falta. No ocultar pruebas derivadas o en espera: aparecen en vistas filtradas con su motivo.

UI-14 · Control interno y aptitud del equipo — PO-06, CU-10

Composición: equipo, método, analito, estado, calibración y mantenimiento; controles por nivel/lote con valor, media, desviación, regla aplicada y decisión. Gráfico de Levey-Jennings solo junto a tabla de valores accesible.

Acción y estados: «Registrar control» y, para calidad, «Bloquear» o «Autorizar reanudación». El bloqueo identifica alcance y periodo afectado. La reanudación exige acción correctiva, evidencia y profesional autorizador; no se resuelve con una casilla «ignorar».

UI-15 · Equipos, mantenimiento y calibración — PO-06

Composición: directorio por sede/sección, estado de cada equipo, pruebas habilitadas y próximas fechas de mantenimiento/calibración. Detalle con historial y adjuntos de evidencia.

Acción y estados: «Programar mantenimiento» o «Registrar calibración». Equipo fuera de servicio se muestra en listas, pero no se ofrece para ejecuciones ordinarias.

UI-16 · Ejecución y captura de resultados — PO-07, CU-11, CU-12, CU-21

Composición: cabecera de paciente, orden, prueba, muestra/alícuota y equipo; formulario por analito con valor, unidad fija, método y referencia prevista; panel de ejecuciones previas y lotes consumidos. Valores numéricos se alinean por decimal.

Acción y estados: «Guardar captura» crea una versión; «Repetir» crea otra ejecución y después otra versión. Antes de guardar, presentar valor original, dilución y cálculo final. Advertir referencia no resuelta sin sustituirla por «normal». La selección de lote muestra vencimiento y disponibilidad.

UI-17 · Bandeja de interfaces — PO-07, CU-11

Composición: mensajes por estado (recibido, procesado, duplicado, error, cuarentena) con equipo, correlación, hora, orden/muestra mapeada y causa de error. El contenido crudo se abre en un panel protegido, no en la lista general.

Acción y estados: «Resolver mapeo» o «Reprocesar» con confirmación y deduplicación. Un mensaje sin paciente/prueba inequívocos queda en cuarentena; no crea un resultado publicable.

UI-18 · Control externo de calidad — PO-06, CU-24

Composición: programas y rondas, analitos reportados, valor propio, valor asignado, grupo par, sesgo, evaluación y acciones correctivas. Mostrar la fecha límite y el estado de cada ronda.

Acción y estados: «Registrar evaluación» y «Cerrar acción». Un resultado fuera de criterio mantiene el seguimiento visible aunque la ronda se haya reportado.

4.5 Validación, críticos e informes

UI-19 · Revisión técnica — PO-08, CU-15

Composición: cola por sección y prioridad; panel de revisión con versión actual, original, unidad, referencia aplicada, bandera, delta, estado de muestra, control de calidad y ejecuciones. Valores previos del mismo paciente se muestran con fecha y método para evitar comparaciones engañosas.

Acción y estados: «Aprobar técnicamente» o «Devolver». La devolución requiere motivo y siguiente paso concreto (repetir, aclarar, corregir dato). La acción se liga a la versión visible, no al resultado de forma genérica.

UI-20 · Validación profesional — PO-08, CU-14, CU-15

Composición: cola de versiones revisadas y de referencias no resueltas. Comparación de versión vigente y versiones anteriores; reglas ejecutadas con versión y decisión; datos clínicos que afectaron interpretación. Identificar claramente si la validación es humana o automática.

Acción y estados: «Aprobar y liberar» o «Devolver». Confirmar paciente, prueba, versión, valor y referencia antes de liberar. El firmante es profesional_laboratorio; una cuenta de sistema no aparece como firma humana. No habilitar aprobación si hay crítico sin revisión o controles incompatibles.

UI-21 · Centro de valores críticos — PO-09, CU-16

Composición: bandeja persistente separada por pendiente, enviada, confirmada y escalada. Cada caso muestra tiempo desde detección, versión exacta, paciente/orden solo a roles autorizados, responsable, destinatario y próxima acción. Un contador vencido lleva texto «Plazo de comunicación excedido».

Acción y estados: «Registrar llamada», «Confirmar lectura» y «Escalar». El formulario pide canal, destinatario, receptor que confirma, hora y evidencia. La alerta operacional se muestra junto a la notificación, sin confundirse con su estado. No cerrar un crítico con un toast ni con «Marcar como visto».

UI-22 · Preparar y emitir informe — PO-10, CU-17

Composición: vista previa fiel al documento final y lista de resultados elegibles por sección. Encabezado con laboratorio, paciente, solicitante, muestras relevantes, fechas, firmante y versión. Los parciales muestran exactamente qué pruebas siguen pendientes.

Acción y estados: «Emitir informe» muestra recuento de resultados, versiones incluidas, estado parcial/final y destinatarios previstos. Bloquear versiones no liberadas, resultados sensibles sin autorización y resultados de otra orden. Al emitir, mostrar número, versión y hash, con enlace a la entrega.

UI-23 · Entregar informe — PO-10, CU-17, CU-22

Composición: informe emitido a la izquierda; a la derecha, destinatario, relación, canal (portal, correo, impreso, hl7, fhir, otro), consentimiento y restricciones por resultado. Historial de entregas de esa versión debajo.

Acción y estados: «Confirmar entrega». Para reimpresión, registrar nueva entrega de la misma versión; nunca generar informe nuevo. Si existe una corrección más reciente, avisar con enlace al informe vigente y evitar entregar el sustituido como actual.

UI-24 · Corregir resultado publicado — PO-10, P11, CU-18

Composición: comparación lado a lado de informe original, versión de resultado publicada y propuesta de nueva versión. Campo de motivo obligatorio y línea de tiempo de validaciones, informes y entregas anteriores.

Acción y estados: «Crear versión corregida» inicia revisión y validación; «Emitir informe corregido» solo aparece después de aprobación. Mostrar explícitamente que la orden y la prueba publicadas permanecen cerradas y que el nuevo informe reemplaza al anterior, conservando ambos.

4.6 Especialidades y operación distribuida

UI-25 · Microbiología — PO-11, CU-19

Composición: línea de tiempo por cultivo con siembra, incubación y lecturas; árbol cultivo → aislamientos → antibiogramas; cada aislamiento tiene su identificación y susceptibilidad independiente. Resultados preliminares y finales aparecen con fecha y autor.

Acción y estados: «Añadir lectura», «Registrar aislamiento» y «Registrar antibiograma». Una lectura nueva no sobrescribe la anterior. El informe parcial toma versiones liberadas del resultado y no copia sin control datos crudos de las tablas de cultivo.

UI-26 · Derivaciones externas — PO-12, CU-20

Composición: cola por laboratorio de referencia y estado; detalle de prueba, muestra o alícuota enviada, condiciones, número de envío, eventos de custodia, recepción y retorno. Panel del informe externo con productor y firmante.

Acción y estados: «Preparar envío», «Confirmar recepción» y «Registrar retorno». No cerrar una prueba por el mero envío. Un resultado retornado pasa por la revisión y validación local que establezca la política.

UI-27 · Punto de atención (POCT) — PO-14, CU-23

Composición: vista compacta de una sola tarea: sede y equipo POCT, paciente y orden, muestra, control vigente, prueba, captura y envío a validación. Cabecera persistente de sede evita confundir una medición al lado del paciente con la del laboratorio central.

Acción y estados: «Registrar medición». Origen poct visible en ejecución, resultado e informe. Si el dispositivo no está habilitado o el control falla, bloquear captura ordinaria y enlazar al procedimiento de calidad.

4.7 Inventario, configuración y gobierno

UI-28 · Reactivos e inventario — PO-13, CU-21

Composición: lista de reactivos y lotes con saldo utilizable, stock mínimo, vencimiento, estado y ubicación. Detalle con libro cronológico de movimientos y ejecuciones que consumieron el lote.

Acción y estados: «Registrar movimiento» solicita tipo, cantidad, documento y motivo según caso. «Registrar consumo» elige una ejecución y lote disponible; la interfaz muestra el movimiento de salida asociado. Lote vencido o bloqueado aparece como no utilizable con causa visible.

UI-29 · Catálogos y reglas — PO-01, CU-13, CU-14

Composición: navegación por pruebas, perfiles, analitos, intervalos, tarifas, requisitos de muestra y reglas clínicas. Cada ficha muestra versión, vigencia, aprobador y dependencias. Comparación antes/después de una regla o referencia.

Acción y estados: «Proponer cambio» y «Aprobar publicación» separados por permiso. Validar solapes de vigencia, unidades, composición de perfiles y reglas incompletas antes de activar. Una prueba inactiva permanece visible en órdenes históricas.

UI-30 · Usuarios, roles, alertas y auditoría — P15, CU-22

Composición: pestañas de cuentas y roles vigentes, alertas operativas, eventos auditables y accesos a datos sensibles. Filtros por actor, entidad, fecha, sede y correlación; detalle de evento en solo lectura, con datos anteriores/nuevos solo cuando el permiso lo permite.

Acción y estados: «Asignar rol» con vigencia y motivo; «Atender alerta» registra resolución. Una consulta de resultado sensible se audita aun cuando no modifique nada. La pantalla de auditoría no ofrece edición o borrado de eventos.

4.8 Cobertura de procesos

5. Flujos entre pantallas

6. Patrones de interacción compartidos

6.1 Búsqueda, tablas y detalles

La búsqueda global acepta número de orden, código de muestra o identificador de paciente según permisos. Muestra tipo de resultado y sede antes de navegar; no presenta valores clínicos en las sugerencias. Filtros visibles y guardables por usuario para colas frecuentes, con una acción «Limpiar filtros». En escritorio, las tablas conservan columnas identificadoras; en móvil, cada fila pasa a bloque apilado con nombre del objeto, estado, prioridad y acción. Evitar un desplazamiento horizontal de la página completa. La ordenación anuncia el criterio activo y el recuento indica si se trata de resultados filtrados.

6.2 Formularios, errores y confirmaciones

Validar formato en desenfoque y reglas clínicas o de negocio en envío. Si hay varios errores, mostrar resumen enfocable al inicio con enlaces a cada campo y mantener mensajes debajo de cada entrada. Conservar los datos ya escritos si falla el servidor. Los errores explican causa y recuperación: «La muestra venció su ventana de estabilidad; registre una nueva toma» es mejor que «Operación inválida».

Los diálogos se reservan para decisiones breves. Rechazo de muestra, reversión de pago, liberación clínica, escalamiento y emisión muestran objeto y consecuencia. Para correcciones extensas se usa una página completa. Al abrir un diálogo, el foco entra; Tab permanece dentro; Escape y un botón visible permiten cerrar cuando no se ha completado una acción irreversible; al cerrar, el foco vuelve al control que lo abrió. Patrón de diálogo WAI-ARIA.

6.3 Estados de cada pantalla

6.4 Accesibilidad y seguridad de interacción

Objetivo: WCAG 2.2 nivel AA en la interfaz web. Texto normal con contraste ≥ 4,5:1; controles e indicadores no textuales, ≥ 3:1; navegación completa por teclado, foco visible y no oculto por barras fijas; etiquetas y errores anunciables; ampliación de texto y reflujo sin pérdida funcional. WCAG 2.2. El objetivo interno de 44 × 44 px para acciones táctiles es más amplio que el mínimo general de WCAG 2.2 y se adopta para el contexto de trabajo.

Usar aria-live con moderación: un cambio de contador puede anunciarse como frase completa, mientras una alerta crítica requiere además una entrada persistente en la cola y un responsable. No reproducir sonidos de alarma por defecto ni imponer parpadeo. En impresiones y archivos descargados, incluir estado «parcial», «corregido» o «sustituido» en texto, no solo en color. No copiar datos sensibles al portapapeles mediante atajos automáticos.

7. Criterios de aceptación del diseño

1. Cada CU-01 a CU-24 dispone de una entrada, una pantalla de trabajo y una salida o excepción identificable en esta especificación.
2. Un usuario puede completar con teclado los recorridos de orden, muestra, validación, crítico e informe; el foco sigue el orden visual y retorna correctamente de los diálogos.
3. En 375, 768, 1024 y 1440 px no hay desplazamiento horizontal de la página ni controles ocultos por encabezados o barras fijas.
4. Paciente, orden, muestra y versión se distinguen antes de toda acción clínica irreversible. Las vistas históricas llevan estado de solo lectura.
5. El crítico, la muestra rechazada y el control bloqueado son comprensibles sin color y conservan causa y siguiente paso visibles.
6. Los resultados sensibles no aparecen en búsquedas o vistas de usuarios sin autorización y todo acceso autorizado queda trazado.
7. Una orden parcial, una factura pagada y una prueba publicada pueden coexistir sin que la interfaz mezcle sus estados.
8. La reimpresión, la nueva entrega y la corrección de informe son acciones distintas; el historial permite identificar cada una.
9. Los formularios fallidos muestran errores junto a los campos y resumen enfocado; los datos escritos permanecen disponibles para corregir.
10. Las animaciones no retrasan información clínica y la interfaz funciona con movimiento reducido y ampliación de texto.

8. Fuentes de diseño

• Guías locales ui-ux-pro-max y stitch-design-taste, aplicadas al contexto de una consola clínica de alta densidad.
• Procesos y casos de uso del LIS.
• WCAG 2.2, W3C y patrón de diálogo modal, WAI-ARIA.

9. Uso del documento en Stitch

Para generar un prototipo, indicar el ID UI-xx y su sección de este archivo. Pedir una variante de escritorio a 1440 px y otra móvil a 375 px con los mismos datos y acciones. Incorporar el estado normal y al menos los estados vacío, bloqueado y error descritos en §6.3. Usar datos sintéticos claramente identificados como tales; conservar las etiquetas y decisiones del caso de uso correspondiente. Si una composición propuesta por Stitch contradice una regla clínica o de acceso de este documento, prevalece la regla clínica o de acceso.