Movimiento, fotosensibilidad y estudio

Abres la app de estudio clínico después del turno. El fondo se desliza en parallax, la pantalla de bienvenida pulsa, un banner rotativo cambia cada dos segundos y el botón de empezar "salta" hasta que lo tocas. En pocos minutos la cabeza pesa, el estómago reacciona y la atención se escapa de las pistas. No es falta de disciplina. Es demasiado estímulo visual para un sistema vestibular y visual que ya estaba cansado. Este texto trata de reducir movimiento, fotosensibilidad y el diseño de interfaces de estudio: qué hacen las animaciones, los destellos y el contraste de movimiento con quien estudia Medicina; qué deben ofrecer las plataformas; y qué puedes ajustar en el sistema operativo y en el navegador. El post sobre accesibilidad digital en softwares médicos cubre el mapa amplio de la WCAG y las fallas comunes. Aquí el recorte es estrecho: movimiento, destellos y preferencia de reducir movimiento en juegos y apps de razonamiento clínico.

Nada en este texto afirma eficacia de NEXO. Describimos principios de seguridad visual, criterios públicos y recursos verificados en la declaración de accesibilidad. Si tú o alguien cercano tiene una crisis convulsiva o malestar intenso ligado a la luz o al movimiento, busca la ayuda necesaria. Este artículo no sustituye una evaluación clínica.

Puntos principales

• El movimiento no esencial (parallax, autoplay, bounce) puede provocar náusea, mareo, migraña y distracción; el problema es fisiológico, no "delicadeza".
• La fotosensibilidad y los patrones rayados piden límites claros de frecuencia y área de destello; el criterio WCAG de tres destellos por segundo es el piso de seguridad, no un techo de creatividad.
• prefers-reduced-motion es un contrato: el SO o el navegador avisan la preferencia; la app debe respetarla y ofrecer control local cuando tenga sentido.
• Quien diseña enseñanza clínica debe partir de una interfaz tranquila, animación opcional y retroalimentación multimodal sin destellos.
• En NEXO, la declaración pública de accesibilidad incluye respetar la preferencia de reducir movimiento en la app; sin afirmar resultados de aprendizaje. Los límites de uso, cuando son relevantes, están en /economia.

Movimiento, atención y cuerpo en la sesión de estudio

Estudiar razonamiento clínico ya consume memoria de trabajo: leer pistas, formar hipótesis, comparar con el diferencial y calibrar la confianza. La carga cognitiva en la enseñanza en salud pide reducir lo que no enseña y preservar la atención para lo que importa (van Merriënboer y Sweller, 2010; Mayer, 2010). La animación decorativa compite por ese presupuesto. Un carrusel que cambia solo, un fondo que se desplaza a velocidad distinta del texto (parallax) o un confeti de "felicitaciones" que ocupa toda la pantalla no enseñan diferencial. Acumulan carga extrínseca.

Hay dos caras del problema. La primera es cognitiva: el movimiento continuo atrae la mirada y estorba la lectura y la recuperación de la memoria. La segunda es sensoriomotora: parte de las personas responde con mareo, náusea, dolor de cabeza o desorientación cuando la escena visual sugiere un movimiento que el cuerpo no confirmó. Las directrices WCAG tratan las dos caras. El criterio de pausar, detener u ocultar contenido en movimiento que empieza solo y dura más de cinco segundos existe para quien necesita silenciar la pantalla. El criterio de animación a partir de interacciones (nivel AAA) pide que la animación de movimiento desencadenada por el usuario pueda desactivarse, salvo si es esencial para la información (W3C, Understanding 2.3.3).

En un juego de diagnóstico, la unidad pedagógica es la pista y la hipótesis, no el efecto. Los casos ficticios con presentación clínica real, con hasta seis pistas, piden una pantalla legible y estable. El post sobre diagnóstico diferencial con pistas y el de aprendizaje basado en casos sitúan la práctica. Aquí el aviso es de interfaz: si la pista "entra" con un slide agresivo a cada toque, o si el mapa de códigos tiembla al desplazarse, el diseño trabaja contra el razonamiento.

Compare dos sesiones. En la primera, cada acción dispara una transición de medio segundo, el marcador anima números y un video de fondo se reproduce en bucle en silencio. En la segunda, la pantalla cambia de estado sin desplazar el fondo, la retroalimentación de proximidad usa color, ícono y nombre escrito, y cualquier movimiento opcional comienza detenido. La segunda sesión no es "menos moderna". Es más respetuosa con quien estudia bajo fatiga, migraña o sensibilidad vestibular. Dialoga con metacognición en medicina: observas tu propio malestar y ajustas el entorno antes de culpar a la "falta de concentración".

En términos de carga cognitiva, la animación no esencial funciona como ruido en la misma banda que la pista clínica. Gastas ciclos para decidir si el elemento que se mueve es información u ornamentación. En una sesión corta con hasta seis pistas, cada ciclo perdido importa. Por eso el estado quieto no es estética minimalista por moda: es alineación con la teoría de la carga en la enseñanza en salud citada arriba.

Vestibular y sensibilidad al movimiento visual

El sistema vestibular integra información del laberinto, de la visión y de la propiocepción para mantener el equilibrio y la orientación. Cuando la visión sugiere movimiento intenso y la cabeza está quieta, el conflicto sensorial puede producir síntomas semejantes al mareo por movimiento. En la migraña vestibular, hay evidencia de mayor dependencia visual y de inestabilidad postural ante estímulos de movimiento en el campo visual (PMID 29930534). La exposición prolongada a movimiento visual en campo amplio elevó los umbrales vestibulares en pacientes con migraña vestibular en relación con controles y con otros grupos clínicos (PMID 30759189).

La susceptibilidad al mareo por movimiento aparece asociada a migraña y a trastornos vestibulares en protocolos experimentales y en medidas centradas en el paciente (PMID 25118205). En la comparación entre migraña vestibular, migraña sin vértigo y controles, se observaron peor equilibrio y mayor sensibilidad al movimiento en el grupo vestibular (PMID 32178946). En una cohorte estudiantil, la sensibilidad al mareo y los criterios de migraña vestibular se superpusieron con una frecuencia digna de atención clínica (PMID 32501936). Nada de esto diagnostica al lector por la pantalla. Sirve para recordar: el parallax, el zoom de desplazamiento y los fondos que "respiran" no son neutros.

La documentación WCAG describe reacciones vestibulares a la animación (mareo, náusea, cefalea) y recomienda evitar la animación innecesaria, ofrecer control para desactivar el movimiento no esencial y respetar la preferencia del sistema (Understanding 2.3.3). En las interfaces de estudio, los desencadenantes más comunes son:

• Parallax y capas que se mueven a velocidades diferentes al desplazarse.
• Transiciones largas entre pistas o entre pantallas de resultado.
• Elementos que flotan, vibran o "respiran" en bucle.
• Zoom o pan automático en imágenes clínicas sin control del usuario.
• Confeti, partículas y animaciones de logro a pantalla completa.

Quien diseña material clínico también necesita pensar en quien asiste a clase grabada o a un webinar con cortes rápidos y viñetas intermitentes. Vale el mismo principio: el movimiento al servicio de la comprensión (por ejemplo, una flecha que señala un hallazgo) difiere del movimiento al servicio del marketing. El primero puede ser corto, local y pausable. El segundo casi siempre puede eliminarse.

Hay un malentendido frecuente: "si no tengo epilepsia, los destellos y el movimiento no son mi problema". La distracción, la migraña y el mareo visual ya bastan para degradar la calidad del retrieval en una sesión de casos. El estudiante que abandona la app después de tres noches de náusea no aparece en la métrica de "engagement". Aparece como silencio. Diseñar para la sensibilidad al movimiento es, por lo tanto, también diseñar para la adherencia al hábito de práctica clínica.

Fotosensibilidad y el límite de tres destellos

La fotosensibilidad, en el sentido clínico que se usa aquí, se refiere a una respuesta anormal a estímulos luminosos o a patrones, que en algunas personas puede precipitar una crisis convulsiva. No es lo mismo que "no gustar de una pantalla clara". El consenso de especialistas de la Epilepsy Foundation of America describió parámetros de destello potencialmente peligroso: luminancia relevante, frecuencia a partir de unos tres hertz y área angular suficiente en el campo visual; la transición a rojo saturado también entra como riesgo; los patrones rayados con un número excesivo de pares claro-oscuro piden restricción (Harding et al., 2005). La revisión asociada del mismo grupo resume la base clínica y epidemiológica (Fisher et al., 2005). El modelo y las reglas para patrones en medios fueron refinados por Wilkins, Emmett y Harding (PMID 16060930). La actualización más reciente de la Epilepsy Foundation revisa las convulsiones visualmente sensibles, los factores de riesgo y la prevención (PMID 35132632). La discusión de seguridad de imagen en epilepsia fotosensible refuerza el papel de las directrices de producción (PMID 18930180).

En la web, el criterio WCAG 2.3.1 (nivel A) exige que la página no contenga nada que parpadee más de tres veces en cualquier período de un segundo, o que el destello quede por debajo de los umbrales general y de rojo (Understanding 2.3.1). Esto no "garantiza cero riesgo" para todas las personas altamente susceptibles. Es el piso técnico que la industria y la accesibilidad adoptaron. En apps de enseñanza, el riesgo práctico aparece en:

• Indicadores que parpadean para "llamar la atención" (error crítico, timer, racha).
• GIF o Lottie con alternancia rápida de contraste.
• Transiciones de pantalla completa entre claro y oscuro en secuencia rápida.
• Patrones rayados finos en fondos o en gráficos animados.
• Videos clínicos con cortes y destellos de sala sin revisión de seguridad.

Tono clínico sin alarmismo: la mayoría de los estudiantes no tendrá una crisis por una app mal diseñada. Una minoría tiene riesgo real, y el costo de evitar el destello agresivo es bajo. Si alguien presenta una crisis, confusión prolongada o síntomas neurológicos agudos ante un estímulo luminoso, busque la ayuda necesaria. No siga insistiendo con la pantalla parpadeando.

Diferencie este post de la guía general de accesibilidad digital en softwares médicos: allí entran el contraste de texto, el teclado, los nombres accesibles y el mapa WCAG. Aquí el objeto es el destello y el movimiento. El post de tecnología asistiva visual trata lectores y ampliadores; el movimiento reducido también ayuda a quien amplía la pantalla, porque el pan y el zoom automáticos cansan.

prefers-reduced-motion: contrato entre SO, navegador y app

Los sistemas operativos modernos permiten al usuario pedir menos animación (Reduce Motion en iOS y equivalentes en otros sistemas). Los navegadores exponen esa preferencia a la página vía media query CSS prefers-reduced-motion: reduce. El contrato es simple de enunciar y fácil de romper en la práctica:

• El usuario declara la preferencia una vez en el SO (o en el navegador).
• El sitio o la app consulta la preferencia.
• Las animaciones no esenciales desaparecen o se convierten en un cambio instantáneo de estado.
• El movimiento esencial para la información, si existe, permanece lo más corto y local posible, o gana un control explícito de play/pause.

Las guías de ingeniería accesible describen el mismo flujo: eliminar o reducir de forma sustancial la animación, la transición, el parallax y los efectos de desplazamiento cuando la preferencia está activa; ofrecer pausa para el contenido que se mueve solo (web.dev, Animation and motion). Respetar la preferencia no dispensa un control dentro del producto: no todo el mundo conoce el ajuste del SO, y a veces la persona quiere reducir el movimiento solo en esa app.

Errores comunes en productos de enseñanza:

• Detectar la preferencia y aun así mantener el parallax "porque es la marca".
• Reducir solo el CSS de hover y dejar Lottie y canvas animados intactos.
• Tratar Reduce Motion como modo "sin accesibilidad completa", cuando en realidad es el modo predeterminado seguro.
• Animar la retroalimentación de error con destello rojo saturado en loop.

Para quienes escriben casos y curaduría, el paralelismo es directo: el contenido clínico puede ser excelente y la cáscara visual aun así excluir. El flujo de Creators y la mirada del Curator cuidan la calidad del caso; el diseño de movimiento cuida de quien logra permanecer en la sesión. Herramientas como Researcher y Closer entran en el estudio después del caso; también se benefician de pantallas sin autoplay.

Plataformas de enseñanza y ajustes locales

Dos lados de la misma interfaz: quien publica el recurso y quien estudia en él. Sin el primero, el segundo solo mitiga. Sin el segundo, el primero tarda en percibir fallas. El diseño responsable asume ambas vertientes al mismo tiempo.

Qué deben ofrecer las plataformas de enseñanza

Lista práctica para quien diseña o elige app, LMS o juego de diagnóstico:

• Estado predeterminado quieto: sin autoplay de video, banner o partícula.
• Respeto a prefers-reduced-motion en CSS, en bibliotecas de animación y en canvas.
• Control explícito en el producto: “reducir movimiento” o “desactivar animaciones”, persistente en la cuenta.
• Feedback multimodal sin flash: color + ícono + texto (el tema de proximidad en NEXO es ejemplo de principio, descrito en /accessibility).
• Imágenes y videos clínicos con revisión de flash y de patrones rayados antes de publicar.
• Transiciones de pantalla cortas o nulas; cambio de estado por intercambio de contenido, no por desplazamiento de cámara.
• Desplazamiento que mueve solo el contenido esencial; sin parallax acoplado.
• Prueba con usuarios que reportan migraña, náusea visual o epilepsia fotosensible, cuando sea posible, además de checklist WCAG.

La ética de los juegos educativos ya pide evitar diseños que perjudican al aprendiz; el post sobre ética en el diseño de juegos educativos sitúa el terreno. Aquí el daño puede ser corporal: náusea y, en casos extremos, crisis. La gamificación en la educación médica puede usar puntos y feedback sin exigir confeti a pantalla completa (evidencia en gamificación; constancia, precisión y velocidad).

Para quien publica casos ficticios con presentación clínica real: prefiere figuras estáticas a GIFs; si la animación enseña (por ejemplo, el flujo de una señal), ofrece play manual y una versión estática equivalente. Hasta seis pistas en secuencia ya estructuran el ritmo cognitivo; la interfaz no necesita “vender” cada pista con un efecto. En las revisiones de producto, pide evidencia de que Reduce Motion se probó de punta a punta: splash, onboarding, caso, feedback, ranking y pantallas de logros. El hueco suele estar en el confeti final, no en la pantalla de inicio de sesión.

Quien integra video de clase o simulación necesita un pipeline de revisión de flash parecido al de la radiodifusión (consensos Harding/Wilkins y recomendaciones ITU). No basta con “el editor de video no avisó”. Un corte rápido entre sala clara y oscura, o un título que parpadea, reintroduce riesgo en una plataforma que ya había cumplido el criterio en las pantallas nativas. Trata el medio embebido como parte del producto, no como un anexo inocente.

Qué puede ajustar el estudiante en el SO y en el navegador

Mientras la plataforma no cambia, todavía tienes opciones locales. Ninguna de ellas sustituye la atención clínica si los síntomas son intensos.

• Activa la opción del sistema para reducir movimiento (Reduce Motion o equivalente) y reinicia la app para garantizar la lectura de la preferencia.
• En el navegador, usa configuraciones de accesibilidad o recursos que fuerzan la reducción de animación; prueba si el sitio respeta la media query.
• Desactiva el autoplay de video en las preferencias del navegador.
• Reduce el brillo; evita estudiar en oscuridad total con la pantalla al máximo (confort visual, sin promesa terapéutica).
• Prefiere un modo que mantenga el contraste legible sin pulsar entre temas automáticamente.
• Pausa o cierra pestañas con carruseles y lives con efectos agresivos antes de la sesión de casos.
• Si un recurso específico dispara malestar, documenta (qué pantalla, qué acción) y repórtalo al producto; el feedback concreto acelera la corrección.

La tecnología asistiva y la ampliación cambian la geometría de la pantalla: el pan horizontal y el zoom alto empeoran aún más el parallax. La guía de tecnología asistiva visual profundiza en lectores y ampliadores. La metacognición ayuda: si después de diez minutos de app “bonita” solo sientes náusea, el problema puede ser el movimiento, no el contenido clínico. Ajusta el entorno, haz una pausa y retoma con una interfaz más quieta. Sobre la pausa y el ritmo de estudio, el blog también discute la pausa diagnóstica en el razonamiento y el burnout cuando el malestar se vuelve patrón.

Un protocolo corto de cinco minutos antes de la sesión: (1) Reduce Motion activado; (2) brillo en un rango cómodo; (3) pestañas ruidosas cerradas; (4) plan B si aparece la náusea (parar, hidratarse, cambiar de dispositivo estático). Esto no es un ritual supersticioso. Es higiene de interfaz, en el mismo espíritu con el que eliges mesa y luz para leer un artículo denso. Si el malestar es recurrente solo con un producto, trátalo como un dato de accesibilidad que comunicar, no como un fracaso personal de “aguantar la animación”.

Tabla: desencadenantes visuales y respuestas de diseño

Usa la tabla al revisar una app, un LMS o el propio hábito de estudio. Los contrastes son técnicos, no morales.

Desencadenante	Riesgo principal	Respuesta de diseño	Qué puede hacer el estudiante ahora
Parallax y capas a velocidades diferentes	Conflicto visuovestibular, náusea	Eliminar; desplazamiento solo del contenido	Activar reducir movimiento; evitar páginas con efecto
Autoplay de banner, GIF o video	Distracción; posible flash	Detenido por defecto; reproducción manual	Bloquear el autoplay en el navegador
Flash o parpadeo >3 veces/s en un área amplia	Riesgo de crisis en personas susceptibles	Cumplir WCAG 2.3.1; revisar el contenido multimedia	Salir de la pantalla; buscar ayuda si hay crisis
Confeti y partículas a pantalla completa	Sobrecarga y mareo	Feedback estático multimodal	Desactivar las animaciones en la app si hay un toggle
Zoom/pan automático en imagen clínica	Vértigo visual	Control del usuario; atajo de reset	Usar zoom manual; preferir la figura estática
Transición larga entre pistas	Carga extrínseca, retraso cognitivo	Cambio instantáneo o <150 ms sin desplazamiento	Preferir apps que respetan Reduce Motion

Después de la tabla, pregunta: ¿mi recurso de estudio más usado sobrevive con Reduce Motion activado? Si la interfaz “se rompe” sin animación, la animación estaba cargando un significado que debería estar en texto, icono o estructura.

Cómo entra NEXO

NEXO es un juego diario de diagnóstico con casos ficticios con presentación clínica real y hasta seis pistas progresivas. La página /accessibility declara, entre otros recursos, que las animaciones de la app respetan la preferencia del sistema para reducir movimiento (Reduce Motion). La misma declaración describe independencia del color en el feedback de proximidad (color con etiqueta de texto) y ausencia de contenido multimedia en autoplay en el sitio. Ninguna frase aquí afirma que esto mejore la retención, la aprobación o el desempeño clínico. Es una descripción de recurso verificable.

Quien está conociendo la plataforma puede leer qué es NEXO. Los límites de uso, cuando son relevantes, están en /economia. Las herramientas del ecosistema (Researcher, Closer, Curator, Creators) entran según lo que describe el producto. El ángulo de este post es la seguridad y el confort visual en la sesión. En el mismo tema, ver accesibilidad cognitiva, feedback multimodal, explicación posdiagnóstico con tecnologías asistivas y flujo del caso con lector de pantalla.

Sugerencia de uso sin afirmación de resultado: activa Reduce Motion en el dispositivo antes de jugar; observa si alguna pantalla todavía anima de forma incómoda y repórtalo; usa el feedback de proximidad por la combinación de color, icono y texto, no solo por el brillo del color; si el malestar persiste, pausa la sesión y busca la ayuda necesaria cuando los síntomas sean intensos.

Preguntas frecuentes

¿Cuál es la diferencia entre este texto y el de accesibilidad digital en softwares médicos?

Aquel es el mapa amplio (WCAG, fallas frecuentes, qué revisar en un sistema de salud). Este profundiza en movimiento, flash, fotosensibilidad y prefers-reduced-motion en interfaces de estudio clínico.

¿Reducir movimiento le quita la “gracia” al juego de diagnóstico?

El núcleo pedagógico es hipótesis, pista y feedback. La animación decorativa no es el juego. Un estado quieto puede mantener la claridad y aun así respetar a quien tiene migraña o mareo visual.

¿Tres flashes por segundo es un límite clínico absoluto?

Es el criterio WCAG alineado con consensos de producción segura. Las personas altamente susceptibles pueden reaccionar por debajo de ese umbral. Por eso el diseño prudente evita el flash amplio y el rojo saturado en secuencia, incluso cuando “pasa” la prueba mínima.

¿Solo quien tiene epilepsia necesita preocuparse?

No. El vértigo, la migraña, el mareo visual y la distracción por movimiento afectan a grupos más grandes. El beneficio de una interfaz tranquila es colectivo; el riesgo extremo de crisis es lo que hace que el tema sea innegociable.

¿NEXO promete cero animación?

No. La declaración pública afirma respeto a la preferencia de reducir movimiento en la app y ausencia de medios en autoplay en el sitio. Eso no es una reivindicación de eficacia ni una lista de limitaciones.

¿Y si tengo síntomas fuertes frente a la pantalla?

Detén el estímulo, ve a un ambiente estable y busca la ayuda necesaria. Este texto es pedagógico, no una conducta de emergencia.

Lista de verificación final

• Reduce Motion (o equivalente) activo en el SO cuando haya sensibilidad.
• Autoplay desactivado en el navegador y en las apps de estudio.
• Ningún recurso esencial depende de parallax o confeti.
• Comentario de acierto/error legible sin parpadeos.
• Imágenes y videos clínicos revisados en cuanto a destellos y franjas.
• Control in-app de animación, si la plataforma lo ofrece.
• Sesión interrumpida si aparece náusea, aura o malestar visual.
• Reporta de forma descriptiva al producto cuando un desencadenante sea identificable.
• Lectura cruzada con accesibilidad digital y tecnología asistiva visual.
• Cero lectura de un recurso de interfaz como prueba de eficacia de aprendizaje.

Juega el caso del día en NEXO. Prefiere una sesión con movimiento reducido: la pista y la hipótesis importan más que el efecto en la pantalla.

Referencias

1. Harding G, et al. Photic- and pattern-induced seizures: expert consensus of the Epilepsy Foundation of America Working Group. Epilepsia. 2005. PMID 16146438.
2. Fisher RS, et al. Photic- and pattern-induced seizures: a review for the Epilepsy Foundation of America Working Group. Epilepsia. 2005. PMID 16146439.
3. Wilkins A, Emmett J, Harding G. Characterizing the patterned images that precipitate seizures and optimizing guidelines to prevent them. Epilepsia. 2005. PMID 16060930.
4. Fisher RS, et al. Visually sensitive seizures: An updated review by the Epilepsy Foundation. Epilepsia. 2022. PMID 35132632.
5. Harding G, Harding P. Photosensitive epilepsy and image safety. Appl Ergon. 2010. PMID 18930180.
6. Murdin L, et al. Motion sickness in migraine and vestibular disorders. J Neurol Neurosurg Psychiatry. 2015. PMID 25118205.
7. Choi JH, et al. Postural Instability Induced by Visual Motion Stimuli in Patients With Vestibular Migraine. Front Neurol. 2018. PMID 29930534.
8. Bednarczuk NF, et al. Abnormal visuo-vestibular interactions in vestibular migraine: a cross sectional study. Brain. 2019. PMID 30759189.
9. Abouzari M, et al. The Relationship Between Vestibular Migraine and Motion Sickness Susceptibility. Otol Neurotol. 2020. PMID 32501936.
10. Çeliker A, et al. Imbalance, motion sensitivity, anxiety and handicap in vestibular migraine and migraine only patients. Auris Nasus Larynx. 2020. PMID 32178946.
11. van Merriënboer JJG, Sweller J. Cognitive load theory in health professional education: design principles and strategies. Med Educ. 2010. PMID 20078759.
12. Mayer RE. Applying the science of learning to medical education. Med Educ. 2010. PMID 20604850.
13. W3C. Understanding SC 2.3.1: Three Flashes or Below Threshold (WCAG 2.2). w3.org.
14. W3C. Understanding SC 2.3.3: Animation from Interactions (WCAG 2.2). w3.org.
15. W3C. Understanding SC 2.2.2: Pause, Stop, Hide (WCAG 2.2). w3.org.
16. web.dev. Animation and motion (Learn Accessibility). web.dev.
17. ITU-R BT.1702. Guidance for the reduction of photosensitive epileptic seizures caused by television. itu.int.
18. NEXO. Accessibility Statement. nexo.wiki.br/accessibility.