wandres.dev
ACCESIBILIDAD · prefers-reduced-motion en serio

El sistema vestibular: por qué una pantalla marea

La fisiología del equilibrio, el conflicto sensorial que produce la vección, qué tipos de movimiento en pantalla lo desencadenan y cuáles no, con el mecanismo detrás de cada uno.

⏱ 19 min

Cuando alguien dice que una página le marea no está exagerando ni siendo delicado: está describiendo una respuesta fisiológica concreta, con un mecanismo conocido y desencadenantes identificados. Un porcentaje nada despreciable de la población adulta tiene alguna forma de disfunción vestibular, y para esas personas ciertos patrones de movimiento en pantalla producen náusea, vértigo o migraña que pueden durar horas. Este nivel es distinto de los demás porque las decisiones que tomes aquí tienen consecuencias en el cuerpo de alguien.

🎯 Al terminar esta lección sabrás
  • Describir cómo el cuerpo determina su posición y su movimiento a partir de tres canales sensoriales.
  • Explicar el conflicto sensorial y la vección como mecanismo del mareo inducido por pantallas.
  • Enumerar los patrones de movimiento que desencadenan síntomas y por qué cada uno lo hace.
  • Distinguir el movimiento que es seguro por su naturaleza, no por su duración.

Cómo el cuerpo sabe dónde está

El equilibrio no lo resuelve un solo órgano: es una fusión continua de tres flujos de información.

El sistema vestibular, en el oído interno, es el más específico. Tiene dos tipos de sensor. Los canales semicirculares son tres conductos llenos de líquido orientados de forma aproximadamente ortogonal; cuando la cabeza gira, la inercia del líquido desplaza una estructura gelatinosa y las células ciliadas señalan una aceleración angular. Los órganos otolíticos —el utrículo y el sáculo— tienen cristales de carbonato de calcio sobre una membrana; cuando la cabeza acelera en línea recta, o cuando cambia su orientación respecto a la gravedad, esos cristales se desplazan y señalan una aceleración lineal. Entre los dos tipos de sensor el cerebro obtiene un vector de movimiento y una referencia de vertical.

La visión aporta el movimiento del entorno respecto al ojo, que en condiciones normales es el complementario del movimiento propio. Si el mundo se desplaza hacia la izquierda, es que tú te mueves hacia la derecha.

La propiocepción aporta la posición de las articulaciones y la presión en las plantas de los pies.

En un cuerpo caminando por un pasillo los tres canales coinciden. El cerebro no tiene que decidir nada: la señal es redundante y consistente. El problema aparece cuando dejan de coincidir.

Vección: el conflicto sensorial

La explicación más aceptada del mareo por movimiento es la teoría del conflicto sensorial: los síntomas aparecen cuando los canales entregan información incompatible y el cerebro no puede reconciliarla con ningún modelo del mundo.

En un barco, el conflicto es en un sentido: el vestíbulo señala movimiento y la visión, fijada en el interior del camarote, señala quietud. Delante de una pantalla el conflicto es exactamente el inverso, y tiene nombre propio: vección, la ilusión de movimiento propio inducida por el movimiento del campo visual. Es el fenómeno que has experimentado en un tren cuando el vagón de al lado arranca y por un instante juras que el tuyo se ha movido.

La vección es una respuesta refleja y muy antigua evolutivamente. Su lógica es sensata: el mundo entero no se mueve, así que si veo desplazarse todo mi campo visual de forma coherente, la explicación con abrumadora probabilidad es que me estoy moviendo yo. El sistema visual no consulta al vestibular antes de llegar a esa conclusión; la impone. Y entonces el vestíbulo, que sabe que la cabeza está quieta, contradice a la visión. Ese es el conflicto.

La consecuencia importante para quien diseña interfaces es que la intensidad de la vección no depende de la belleza del movimiento sino de sus propiedades geométricas, y esas propiedades son medibles. Un movimiento produce vección en proporción a cuánto de su campo visual ocupa, a cuán coherente es la dirección del desplazamiento en toda esa área, a cuántas señales de profundidad contiene, y a si el observador lo inició o no.

Los síntomas de un episodio no son un mareo pasajero: náusea, vértigo, desorientación, sudor frío, dolor de cabeza, migraña. Pueden aparecer con segundos de exposición y persistir horas o días después de cerrar la pestaña.

ℹ️
Cuánta gente hablamos

El estudio poblacional que se cita habitualmente —un análisis de los datos del NHANES publicado en 2009— estimó que en torno al 35% de los adultos estadounidenses de 40 años o más presentaba alguna forma de disfunción vestibular. A eso se añaden la migraña vestibular, la enfermedad de Ménière, el vértigo posicional paroxístico benigno, la neuritis vestibular y el síndrome posconmocional. Y el mareo perceptual postural persistente, un cuadro cuya característica definitoria es que los entornos visuales complejos y en movimiento agravan los síntomas: literalmente, pantallas.

Los desencadenantes concretos

No todo el movimiento es equivalente. Estos son los patrones que la literatura sobre vección y las guías de accesibilidad identifican de forma consistente, con el mecanismo detrás de cada uno.

Movimiento en el eje z. Un elemento que crece hacia el observador o se aleja de él simula un desplazamiento hacia delante o hacia atrás, que es el estímulo de vección más potente que existe. El flujo óptico radial —todo expandiéndose desde un punto central— es exactamente lo que ve un cuerpo avanzando. Una diapositiva que hace zoom sobre la pantalla completa es, para el sistema visual, caminar hacia delante. Este es el patrón más peligroso y el más frecuente en presentaciones y páginas de producto.

Paralaje. Capas que se desplazan a velocidades distintas según su profundidad aparente. La disparidad de movimiento entre planos es una de las señales de profundidad más fuertes que tiene el sistema visual, y al proporcionarla se refuerza la interpretación de que el observador se está desplazando lateralmente por una escena tridimensional. El paralaje es un multiplicador: el mismo desplazamiento sin capas produce mucha menos vección que con ellas.

Rotación, especialmente en el eje de balanceo. Un giro del campo visual en el plano de la pantalla entra en conflicto directo con la referencia de vertical que dan los otolitos. El cerebro tiene una expectativa muy fuerte sobre dónde está abajo, y contradecirla visualmente es incómodo incluso para quien no tiene ninguna disfunción.

Área grande y visión periférica. La sensibilidad al movimiento no está repartida por igual en la retina: la periferia es desproporcionadamente sensible al movimiento y contribuye mucho más a la vección que la zona central. Un elemento pequeño moviéndose donde estás mirando produce poco; una banda que atraviesa el borde de la pantalla produce mucho, aunque no la estés mirando. Por eso los fondos animados a pantalla completa son mala idea aunque el movimiento sea lento.

Velocidad y aceleración. La aceleración importa más que la velocidad, porque es lo que el vestíbulo mide. Un movimiento a velocidad constante genera menos conflicto que uno que arranca y frena con brusquedad. Las curvas con rebote o con elasticidad, que son cambios de dirección rápidos y repetidos, son peores que una curva monótona a la misma distancia.

Movimiento no iniciado por la persona. Cuando tú provocas el movimiento, tu cerebro emite una copia de la orden motora y predice la consecuencia sensorial; el conflicto se reduce mucho. Un desplazamiento que ocurre solo no tiene esa predicción. Es el mismo motivo por el que puedes hacerte cosquillas mucho menos de lo que te las hacen.

Duración y continuidad. La vección necesita tiempo para instalarse —del orden de un segundo de estímulo coherente— y sus efectos son acumulativos. Un movimiento de doscientos milisegundos raramente llega a producirla; un bucle de fondo que lleva cinco minutos activo es un estímulo continuo.

Desplazamiento secuestrado. Cambiar el comportamiento del scroll —suavizado agresivo, anclajes que arrastran, secciones horizontales enganchadas al scroll vertical— rompe la correspondencia entre el gesto del dedo y el movimiento en pantalla. Esa correspondencia era la predicción motora que reducía el conflicto. Al romperla, la elimina.

Lo que no desencadena

Igual de importante, porque la reacción habitual de un equipo al descubrir todo esto es eliminar el movimiento entero, y eso tiene su propio coste que veremos en las lecciones siguientes.

Los cambios de opacidad. Un desvanecimiento no contiene ninguna señal de movimiento: nada se desplaza, no hay flujo óptico, no hay vección posible. Un opacity de 0 a 1 es seguro por su naturaleza, no por su duración.

Los cambios de color y de contraste. Mismo razonamiento. Con una excepción importante que se trata aparte: los destellos rápidos son un riesgo distinto, de tipo fotosensible, y tienen su propio umbral.

Los desplazamientos pequeños. Unos pocos píxeles en un elemento pequeño no ocupan campo visual suficiente. La regla práctica que funciona es pensar en proporción del viewport, no en píxeles absolutos: lo que se mueve menos de un uno por ciento de la pantalla es despreciable.

El movimiento breve y monótono. Doscientos o trescientos milisegundos con una curva que no cambia de dirección, en un área acotada, es el perfil de la inmensa mayoría de las transiciones de interfaz funcionales, y no es el problema.

La conclusión operativa: el riesgo no es una función de la cantidad de animación de tu página, sino del tipo. Cien transiciones de opacidad son inofensivas. Un solo paralaje a pantalla completa no lo es.

El movimiento problemático es el que simula desplazamiento propio, y esa es una prueba que puedes aplicar sin ser médico

Toda la fisiología de esta lección se condensa en una sola pregunta operativa, y es la única que hace falta llevar a una revisión de diseño: ¿este movimiento le está diciendo al ojo que el cuerpo se está moviendo? No “¿es mucho movimiento?”, no “¿dura demasiado?”, sino si el patrón geométrico es el que produciría desplazarse por el mundo. Un elemento que crece ocupando toda la pantalla es avanzar. Capas de fondo que se desplazan a velocidades distintas es recorrer un paisaje. Un giro del campo visual es inclinar la cabeza. Un desvanecimiento no es nada: en el mundo físico los objetos no se vuelven translúcidos, así que el sistema visual no tiene ninguna interpretación de movimiento propio que asignarle. Esta prueba discrimina mejor que cualquier lista de propiedades CSS prohibidas, y explica por qué las listas fallan: la misma propiedad transform es completamente inofensiva desplazando un menú ocho píxeles y agresiva escalando un fondo al doble, y ninguna regla sobre transform puede capturar esa diferencia. La segunda parte de la prueba, igual de importante y más fácil de olvidar, es quién lo inició. El cerebro predice las consecuencias sensoriales de tus propios actos, y esa predicción cancela buena parte del conflicto; por eso un desplazamiento que sigue a tu dedo es tolerable y el mismo desplazamiento ocurriendo solo no lo es. Ahí está la razón profunda por la que el suavizado agresivo del scroll y las secciones enganchadas se sienten mal a tanta gente: no es que tengan demasiado movimiento, es que rompen la correspondencia entre lo que hiciste y lo que ves, y al romperla desactivan el único mecanismo que hacía tolerable el movimiento grande. Un producto que respeta esas dos preguntas —no simular desplazamiento propio, no desacoplar el gesto del resultado— puede tener toda la animación que quiera sin marear a nadie.