Движение, светочувствительность и учебные интерфейсы

Вы открываете приложение для изучения клинических случаев после смены. Фон движется с параллаксом, приветственный экран пульсирует, баннер меняется каждые две секунды, а кнопка «начать» «подпрыгивает», пока вы не нажмёте. Через несколько минут тяжелеет голова, реагирует желудок, а внимание уходит от подсказок. Это не недостаток дисциплины. Это слишком много визуальной стимуляции для вестибулярной и зрительной системы, которая уже устала. Этот текст о том, как уменьшить движение, фотосенситивность и как устроены интерфейсы для учёбы: что анимации, вспышки и контраст движения делают с теми, кто изучает медицину; что должны предлагать платформы; и что вы можете настроить в операционной системе и браузере. Пост о цифровой доступности в медицинских программах охватывает широкую карту WCAG и частые ошибки. Здесь рамки узкие: движение, вспышки и предпочтение уменьшить движение в играх и приложениях для клинического мышления.

Ничто в этом тексте не утверждает эффективность NEXO. Мы описываем принципы визуальной безопасности, публичные критерии и функции, проверенные в декларации доступности. Если у вас или у близкого человека случился судорожный приступ или сильное недомогание, связанное со светом или движением, обратитесь за необходимой помощью. Эта статья не заменяет клиническую оценку.

Главное

• Несущественное движение (параллакс, автовоспроизведение, bounce) может вызывать тошноту, головокружение, мигрень и отвлечение; проблема физиологическая, а не «прихоть».
• Фотосенситивность и полосатые узоры требуют чётких ограничений по частоте и площади вспышек; критерий WCAG о трёх вспышках в секунду — это нижняя граница безопасности, а не потолок креативности.
• prefers-reduced-motion — это договор: ОС или браузер сообщают о предпочтении; приложение должно его соблюдать и предлагать локальное управление, когда это уместно.
• Дизайнеры клинического обучения должны исходить из спокойного интерфейса, опциональной анимации и мультимодальной обратной связи без вспышек.
• В NEXO публичная декларация доступности включает соблюдение предпочтения уменьшить движение в приложении; без утверждений о результатах обучения. Ограничения использования, когда они важны, указаны в /economia.

Движение, внимание и тело на учебной сессии

Изучение клинического мышления уже расходует рабочую память: читать подсказки, строить гипотезы, сравнивать с дифференциальным рядом и калибровать уверенность. Когнитивная нагрузка в обучении медицине требует сокращать то, что не учит, и сохранять внимание для важного (van Merriënboer и Sweller, 2010; Mayer, 2010). Декоративная анимация конкурирует за этот бюджет. Карусель, которая меняется сама, фон, движущийся с другой скоростью, чем текст (параллакс), или конфетти «поздравляем» на весь экран не учат дифференциальному ряду. Они накапливают внешнюю нагрузку.

У проблемы две стороны. Первая — когнитивная: непрерывное движение притягивает взгляд и мешает чтению и извлечению из памяти. Вторая — сенсомоторная: часть людей отвечает головокружением, тошнотой, головной болью или дезориентацией, когда визуальная сцена предполагает движение, которое тело не подтвердило. Рекомендации WCAG рассматривают обе стороны. Критерий паузы, остановки или скрытия движущегося содержимого, которое начинается само и длится более пяти секунд, существует для тех, кому нужно заглушить экран. Критерий анимации от взаимодействий (уровень AAA) требует, чтобы анимацию движения, запускаемую пользователем, можно было отключить, если только она не существенна для информации (W3C, Understanding 2.3.3).

В игре по диагностике педагогическая единица — подсказка и гипотеза, а не эффект. Вымышленные случаи с реальной клинической картиной, с максимум шестью подсказками, требуют читаемого и стабильного экрана. Пост о дифференциальной диагностике по подсказкам и пост об обучении на основе случаев описывают практику. Здесь предупреждение об интерфейсе: если подсказка «входит» агрессивным слайдом при каждом нажатии или если карта кодов дрожит при прокрутке, дизайн работает против мышления.

Сравните два сеанса. В первом каждое действие запускает переход длительностью полсекунды, табло анимирует цифры, а фоновое видео бесконечно повторяется без звука. Во втором экран меняет состояние, не сдвигая фон, обратная связь о близости использует цвет, иконку и написанное название, а любое необязательное движение изначально остановлено. Второй сеанс не «менее современный». Он более уважителен к тем, кто учится при усталости, мигрени или вестибулярной чувствительности. Он перекликается с метапознанием в медицине: вы наблюдаете собственный дискомфорт и настраиваете среду, прежде чем винить «нехватку концентрации».

С точки зрения когнитивной нагрузки несущественная анимация работает как шум в той же полосе, что и клиническая подсказка. Вы тратите циклы на решение, является ли движущийся элемент информацией или украшением. В коротком сеансе с максимум шестью подсказками каждый потерянный цикл важен. Поэтому спокойное состояние — не минималистичная эстетика ради моды: это согласованность с теорией нагрузки в медицинском образовании, упомянутой выше.

Вестибулярная система и чувствительность к визуальному движению

Вестибулярная система объединяет информацию от лабиринта, зрения и проприоцепции для поддержания равновесия и ориентации. Когда зрение предполагает сильное движение, а голова неподвижна, сенсорный конфликт может вызывать симптомы, похожие на укачивание. При вестибулярной мигрени есть данные о большей визуальной зависимости и постуральной нестабильности при стимулах движения в поле зрения (PMID 29930534). Длительное воздействие визуального движения в широком поле повышало вестибулярные пороги у пациентов с вестибулярной мигренью по сравнению с контрольной группой и другими клиническими группами (PMID 30759189).

Склонность к укачиванию связана с мигренью и вестибулярными расстройствами в экспериментальных протоколах и в оценках, ориентированных на пациента (PMID 25118205). При сравнении вестибулярной мигрени, мигрени без головокружения и контрольной группы худшее равновесие и повышенная чувствительность к движению наблюдались в вестибулярной группе (PMID 32178946). В студенческой когорте чувствительность к укачиванию и критерии вестибулярной мигрени пересекались достаточно часто, чтобы обратить клиническое внимание (PMID 32501936). Ничто из этого не ставит диагноз читателю по экрану. Это напоминание: параллакс, масштабирование при прокрутке и фоны, которые «дышат», не нейтральны.

Документация WCAG описывает вестибулярные реакции на анимацию (головокружение, тошнота, головная боль) и рекомендует избегать ненужной анимации, предоставлять управление для отключения несущественного движения и уважать системные настройки (Understanding 2.3.3). В учебных интерфейсах наиболее частые триггеры:

• Параллакс и слои, движущиеся с разной скоростью при прокрутке.
• Длительные переходы между подсказками или экранами результатов.
• Элементы, которые парят, вибрируют или «дышат» в цикле.
• Автоматическое масштабирование или панорамирование клинических изображений без управления пользователем.
• Конфетти, частицы и анимации достижений на весь экран.

Тем, кто создает клинические материалы, также нужно думать о тех, кто смотрит записанную лекцию или вебинар с быстрыми склейками и мигающими заставками. Принцип тот же: движение на службе понимания (например, стрелка, указывающая на находку) отличается от движения на службе маркетинга. Первое может быть коротким, локальным и с возможностью паузы. Второе почти всегда можно убрать.

Часто встречается недоразумение: «если у меня нет эпилепсии, вспышки и движение — не моя проблема». Отвлечение, мигрень и визуальное укачивание уже достаточны, чтобы ухудшить качество извлечения информации на сеансе случаев. Студент, который бросает приложение после трех ночей тошноты, не появляется в метрике «вовлеченности». Он появляется как тишина. Поэтому проектирование с учетом чувствительности к движению — это также проектирование для приверженности привычке клинической практики.

Фоточувствительность и предел в три вспышки

Фоточувствительность в клиническом смысле, используемом здесь, означает аномальную реакцию на световые стимулы или паттерны, которая у некоторых людей может спровоцировать судорожный приступ. Это не то же самое, что «не нравится яркий экран». Консенсус экспертов Epilepsy Foundation of America описал параметры потенциально опасного мерцания: значимая яркость, частота примерно от трёх герц и достаточная угловая площадь в поле зрения; переход к насыщенному красному также входит в риск; полосатые паттерны с чрезмерным числом пар светлый-тёмный требуют ограничения (Harding et al., 2005). Связанный обзор той же группы обобщает клиническую и эпидемиологическую базу (Fisher et al., 2005). Модель и правила для паттернов в медиа были уточнены Wilkins, Emmett и Harding (PMID 16060930). Более позднее обновление Epilepsy Foundation рассматривает визуально чувствительные приступы, факторы риска и профилактику (PMID 35132632). Обсуждение безопасности изображения при фотосенситивной эпилепсии подкрепляет роль производственных рекомендаций (PMID 18930180).

В вебе критерий WCAG 2.3.1 (уровень A) требует, чтобы страница не содержала ничего, что мигает более трёх раз за любой период в одну секунду, или чтобы мерцание оставалось ниже общих порогов и порога для красного (Understanding 2.3.1). Это не «гарантирует нулевой риск» для всех особо восприимчивых людей. Это технический минимум, принятый индустрией и доступностью. В обучающих приложениях практический риск проявляется в:

• Индикаторы, мигающие, чтобы «привлечь внимание» (критическая ошибка, таймер, streak).
• GIF или Lottie с быстрой сменой контраста.
• Полноэкранные переходы между светлым и тёмным в быстрой последовательности.
• Тонкие полосатые паттерны на фонах или в анимированных графиках.
• Клинические видео с монтажными склейками и вспышками в помещении без проверки безопасности.

Клинический тон без алармизма: у большинства студентов не будет приступа из-за плохо спроектированного приложения. У меньшинства есть реальный риск, и цена избегания агрессивного мерцания низка. Если у кого-то возникает приступ, затяжная спутанность или острые неврологические симптомы при световом стимуле, обратитесь за необходимой помощью. Не заставляйте себя «ещё на одну попытку» с мигающим экраном.

Отличайте этот пост от общего руководства по цифровой доступности в медицинском программном обеспечении: там речь о контрасте текста, клавиатуре, доступных именах и карте WCAG. Здесь предмет — мерцание и движение. Пост о визуальных вспомогательных технологиях рассматривает программы чтения с экрана и увеличения; уменьшенное движение также помогает тем, кто увеличивает экран, потому что автоматические панорамирование и масштабирование утомляют.

prefers-reduced-motion: договор между ОС, браузером и приложением

Современные операционные системы позволяют пользователю запросить меньше анимации (Reduce Motion в iOS и аналоги в других системах). Браузеры передают эту настройку странице через CSS media query prefers-reduced-motion: reduce. Договор просто сформулировать и легко нарушить на практике:

• Пользователь один раз объявляет настройку в ОС (или в браузере).
• Сайт или приложение запрашивает настройку.
• Несущественные анимации исчезают или превращаются в мгновенную смену состояния.
• Движение, существенное для информации, если оно есть, остаётся как можно короче и локальнее или получает явное управление play/pause.

Руководства по доступной разработке описывают тот же поток: убирать или существенно сокращать анимацию, переходы, parallax и эффекты прокрутки, когда настройка активна; предлагать паузу для контента, который движется сам (web.dev, Animation and motion). Соблюдение настройки не отменяет управления внутри продукта: не все знают настройку ОС, и иногда человек хочет уменьшить движение только в этом приложении.

Частые ошибки в обучающих продуктах:

• Обнаруживать настройку и всё равно сохранять parallax «потому что это бренд».
• Сокращать только CSS для hover и оставлять Lottie и анимированный canvas нетронутыми.
• Считать Reduce Motion режимом «без полной доступности», хотя на самом деле это безопасный режим по умолчанию.
• Анимировать обратную связь об ошибке насыщенным красным мерцанием в цикле.

Для тех, кто пишет случаи и занимается кураторством, параллель прямая: клиническое содержание может быть превосходным, а визуальная оболочка всё равно исключать. Поток Creators и взгляд Curator отвечают за качество случая; дизайн движения отвечает за то, кто сможет остаться в сессии. Инструменты вроде Researcher и Closer подключаются к учёбе после случая; им тоже полезны экраны без автовоспроизведения.

Платформы обучения и локальные настройки

Две стороны одного интерфейса: тот, кто публикует ресурс, и тот, кто по нему учится. Без первого второй только смягчает последствия. Без второго первый долго не замечает ошибок. Ответственный дизайн охватывает оба направления одновременно.

Что должны предлагать платформы обучения

Практический список для тех, кто проектирует или выбирает приложение, LMS или игру-диагностику:

• Спокойное состояние по умолчанию: без автовоспроизведения видео, баннеров и частиц.
• Соблюдение prefers-reduced-motion в CSS, в библиотеках анимации и в canvas.
• Явный контроль в продукте: «уменьшить движение» или «отключить анимации», сохраняющийся в аккаунте.
• Мультимодальная обратная связь без вспышек: цвет + иконка + текст (тема близости в NEXO — пример принципа, описанного в /accessibility).
• Клинические изображения и видео с проверкой на вспышки и полосатые узоры перед публикацией.
• Короткие или отсутствующие переходы между экранами; смена состояния через замену содержимого, а не через движение камеры.
• Прокрутка, которая перемещает только существенное содержимое; без привязанного параллакса.
• Тестирование с пользователями, сообщающими о мигрени, зрительном укачивании или фотосенситивной эпилепсии, когда это возможно, помимо чек-листа WCAG.

Этика образовательных игр уже требует избегать дизайна, который вредит учащемуся; пост об этике в дизайне образовательных игр задаёт рамки. Здесь вред может быть телесным: тошнота и, в крайних случаях, приступ. Геймификация в медицинском образовании может использовать баллы и обратную связь, не требуя конфетти на весь экран (данные о геймификации; постоянство, точность и скорость).

Тем, кто публикует вымышленные случаи с реальной клинической картиной: предпочитайте статичные изображения GIF-файлам; если анимация чему-то учит (например, потоку сигнала), предлагайте ручное воспроизведение и эквивалентную статичную версию. Шести подсказок подряд уже достаточно, чтобы задать когнитивный ритм; интерфейсу не нужно «продавать» каждую подсказку эффектом. При проверках продукта требуйте доказательств, что Reduce Motion протестирован от начала до конца: заставка, онбординг, случай, обратная связь, рейтинг и экраны достижений. Пробел обычно кроется в финальном конфетти, а не на экране входа.

Тем, кто встраивает видео урока или симуляцию, нужен конвейер проверки на вспышки, похожий на телевизионный (консенсусы Harding/Wilkins и рекомендации ITU). Недостаточно сослаться на то, что «видеоредактор не предупредил». Быстрый переход между светлой и тёмной комнатой или мигающий заголовок возвращают риск на платформу, которая уже выполнила критерий на собственных экранах. Относитесь к встроенным медиа как к части продукта, а не как к безобидному приложению.

Что студент может настроить в ОС и браузере

Пока платформа не изменилась, у вас остаются локальные варианты. Ни один из них не заменяет медицинскую помощь, если симптомы сильные.

• Включите системную опцию уменьшения движения (Reduce Motion или аналог) и перезапустите приложение, чтобы настройка точно была прочитана.
• В браузере используйте настройки доступности или средства, принудительно уменьшающие анимацию; проверьте, соблюдает ли сайт медиазапрос.
• Отключите автовоспроизведение видео в настройках браузера.
• Снизьте яркость; избегайте занятий в полной темноте с экраном на максимуме (зрительный комфорт, без обещания терапевтического эффекта).
• Предпочитайте режим, который сохраняет читаемый контраст и не переключается между темами автоматически.
• Приостановите или закройте вкладки с каруселями и трансляциями с агрессивными эффектами перед сессией случаев.
• Если конкретный элемент вызывает недомогание, зафиксируйте его (какой экран, какое действие) и сообщите продукту; конкретная обратная связь ускоряет исправление.

Вспомогательные технологии и увеличение меняют геометрию экрана: горизонтальное панорамирование и сильный зум делают параллакс ещё хуже. Руководство по вспомогательным технологиям для зрения подробнее рассматривает программы чтения с экрана и увеличители. Помогает метапознание: если после десяти минут «красивого» приложения вы чувствуете только тошноту, проблема может быть в движении, а не в клиническом содержании. Настройте обстановку, сделайте паузу и вернитесь к более спокойному интерфейсу. О паузах и ритме учёбы блог также рассуждает в материалах о диагностической паузе в рассуждении и о выгорании, когда недомогание становится постоянным.

Короткий пятиминутный протокол перед сессией: (1) включить Reduce Motion; (2) яркость в комфортном диапазоне; (3) закрыть шумные вкладки; (4) план Б на случай тошноты (остановиться, попить воды, сменить статичное устройство). Это не суеверный ритуал. Это гигиена интерфейса — в том же духе, в каком вы выбираете стол и свет, чтобы читать плотную статью. Если дискомфорт повторяется только с одним продуктом, отнеситесь к этому как к данным о доступности, о которых стоит сообщить, а не как к личной неудаче «не выдержать анимацию».

Таблица: визуальные триггеры и решения по дизайну

Используйте таблицу, когда проверяете приложение, LMS или собственные учебные привычки. Эти противопоставления технические, а не моральные.

Триггер	Основной риск	Решение по дизайну	Что студент может сделать сейчас
Параллакс и слои на разных скоростях	Зрительно-вестибулярный конфликт, тошнота	Убрать; прокрутка только содержимого	Включить уменьшение движения; избегать страниц с эффектами
Автовоспроизведение баннера, GIF или видео	Отвлечение; возможная вспышка	Остановлено по умолчанию; ручное воспроизведение	Заблокировать автовоспроизведение в браузере
Вспышка или мерцание >3 раз/с на большой площади	Риск приступа у восприимчивых людей	Соблюдать WCAG 2.3.1; проверить медиа	Уйти с экрана; обратиться за помощью при приступе
Конфетти и частицы на весь экран	Перегрузка и тошнота	Статичная мультимодальная обратная связь	Отключить анимации в приложении, если есть переключатель
Автоматический зум/панорамирование изображения клинического случая	Зрительное головокружение	Контроль пользователя; горячая клавиша сброса	Использовать ручной зум; предпочитать статичное изображение
Долгий переход между подсказками	Внешняя нагрузка, когнитивная задержка	Мгновенная смена или <150 мс без смещения	Предпочитать приложения, которые уважают Reduce Motion

После таблицы спросите: выживает ли мой самый используемый учебный ресурс при включённом Reduce Motion? Если интерфейс «ломается» без анимации, значит анимация несла смысл, который должен был быть в тексте, иконке или структуре.

Как здесь участвует NEXO

NEXO — ежедневная игра в диагностику с вымышленными случаями с реальной клинической картиной и до шести последовательных подсказок. Страница /accessibility заявляет, среди прочих возможностей, что анимации приложения уважают системную настройку уменьшения движения (Reduce Motion). Там же сказано, что обратная связь о близости не зависит от цвета (цвет сопровождается текстовой меткой) и что на сайте нет медиа с автовоспроизведением. Ни одно утверждение здесь не говорит, что это улучшает запоминание, сдачу экзаменов или клинические результаты. Это описание проверяемой возможности.

Тот, кто только знакомится с платформой, может прочитать что такое NEXO. Ограничения использования, когда они важны, указаны в разделе /economia. Инструменты экосистемы (Researcher, Closer, Curator, Creators) подключаются так, как описывает продукт. Угол этого поста — безопасность и визуальный комфорт во время сессии. В той же рубрике смотрите когнитивная доступность, мультимодальная обратная связь, объяснение после диагноза с ассистивными технологиями и прохождение случая со скринридером.

Рекомендация по использованию без обещания результата: включите Reduce Motion на устройстве перед игрой; заметьте, если какой-то экран всё ещё анимируется некомфортно, и сообщите об этом; используйте обратную связь о близости по сочетанию цвета, иконки и текста, а не только по яркости цвета; если дискомфорт сохраняется, сделайте паузу в сессии и обратитесь за нужной помощью, когда симптомы сильные.

Частые вопросы

Чем этот текст отличается от текста о цифровой доступности в медицинском программном обеспечении?

Тот — широкая карта (WCAG, частые ошибки, что проверять в системе здравоохранения). Этот углубляется в движение, вспышки, фотосенситивность и prefers-reduced-motion в интерфейсах клинического обучения.

Уменьшение движения лишает игру в диагностику «интереса»?

Педагогическое ядро — гипотеза, подсказка и обратная связь. Декоративная анимация — не игра. Спокойное состояние может сохранять ясность и при этом уважать тех, у кого мигрень или зрительная тошнота.

Три вспышки в секунду — это абсолютный клинический порог?

Это критерий WCAG, согласованный с консенсусами о безопасном производстве. Особо восприимчивые люди могут реагировать ниже этого порога. Поэтому осмотрительный дизайн избегает широкой вспышки и насыщенного красного подряд, даже когда минимальный тест «проходит».

Об этом нужно думать только людям с эпилепсией?

Нет. Вестибулярные нарушения, мигрень, зрительная тошнота и отвлечение движением затрагивают более широкие группы. Польза от спокойного интерфейса коллективна; именно крайний риск приступа делает тему бескомпромиссной.

NEXO обещает полный отказ от анимации?

Нет. Публичное заявление говорит об уважении к предпочтению уменьшать движение в приложении и об отсутствии автовоспроизводимых медиа на сайте. Это не заявление об эффективности и не перечень ограничений.

А если у меня сильные симптомы перед экраном?

Прекратите стимул, перейдите в стабильную обстановку и обратитесь за необходимой помощью. Этот текст носит просветительский характер и не является инструкцией при неотложном состоянии.

Итоговый чек-лист

• Reduce Motion (или аналог) включён в ОС при наличии чувствительности.
• Автовоспроизведение отключено в браузере и в приложениях для учёбы.
• Ни одна ключевая функция не зависит от параллакса или конфетти.
• Обратная связь о верном или неверном ответе читается без мигания.
• Клинические изображения и видео проверены на вспышки и полосы.
• Внутренний контроль анимации в приложении, если платформа его предлагает.
• Сессия прерывается, если появляется тошнота, аура или зрительный дискомфорт.
• Сообщайте продукту в описательной форме, когда триггер можно определить.
• Перекрёстное чтение с цифровой доступностью и вспомогательными визуальными технологиями.
• Никакой элемент интерфейса не выдаётся за доказательство эффективности обучения.

Сыграйте случай дня в NEXO. Предпочитайте сессию с уменьшенным движением: подсказка и гипотеза важнее эффекта на экране.

Источники

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.