Movimento, fotossensibilidade e interfaces de estudo

Você abre o app de estudo clínico depois do plantão. O fundo desliza em parallax, a tela de boas-vindas pulsa, um banner rotativo troca a cada dois segundos e o botão de começar “salta” até você tocar. Em poucos minutos a cabeça pesa, o estômago reage e a atenção foge das pistas. Não é falta de disciplina. É estímulo visual demais para um sistema vestibular e visual que já estava cansado. Este texto trata de reduzir movimento, fotossensibilidade e o desenho de interfaces de estudo: o que animações, flashes e contraste de movimento fazem com quem estuda Medicina; o que plataformas devem oferecer; e o que você pode ajustar no sistema operacional e no navegador. O post sobre acessibilidade digital em softwares médicos cobre o mapa amplo da WCAG e falhas comuns. Aqui o recorte é estreito: movimento, flash e preferência de reduzir movimento em jogos e apps de raciocínio clínico.

O NEXO é um jogo diário de diagnóstico médico: um caso clínico por dia, seis pistas progressivas e feedback por proximidade na CID-10 em cinco níveis.

Nada neste texto afirma eficácia do NEXO. Descrevemos princípios de segurança visual, critérios públicos e recursos conferidos na declaração de acessibilidade. Se você ou alguém próximo tiver crise convulsiva ou mal-estar intenso ligado a luz ou movimento, busque a ajuda necessária. Este artigo não substitui avaliação clínica.

Principais pontos

• Movimento não essencial (parallax, autoplay, bounce) pode provocar náusea, tontura, enxaqueca e distração; o problema é fisiológico, não “frescura”.
• Fotossensibilidade e padrões listrados pedem limites claros de frequência e área de flash; o critério WCAG de três flashes por segundo é o piso de segurança, não um teto de criatividade.
• prefers-reduced-motion é um contrato: o SO ou o navegador avisam a preferência; o app precisa respeitar e oferecer controle local quando fizer sentido.
• Designers de ensino clínico devem partir de interface quieta, animação opcional e feedback multimodal sem flash.
• No NEXO, a declaração pública de acessibilidade inclui respeito à preferência de reduzir movimento no app; sem afirmação de resultado de aprendizagem. Limites de uso, quando relevantes, estão em /economia.

Movimento, atenção e corpo na sessão de estudo

Estudar raciocínio clínico já consome memória de trabalho: ler pistas, formar hipóteses, comparar com o diferencial e calibrar confiança. Carga cognitiva no ensino em saúde pede reduzir o que não ensina e preservar atenção para o que importa (van Merriënboer e Sweller, 2010; Mayer, 2010). Animação decorativa compete por esse orçamento. Um carrossel que muda sozinho, um fundo que se desloca em velocidade diferente do texto (parallax) ou um confete de “parabéns” que ocupa a tela inteira não ensinam diferencial. Empilham carga extrínseca.

Há duas faces do problema. A primeira é cognitiva: movimento contínuo atrai o olhar e atrapalha leitura e recuperação da memória. A segunda é sensório-motora: parte das pessoas responde com tontura, náusea, dor de cabeça ou desorientação quando a cena visual sugere movimento que o corpo não confirmou. As diretrizes WCAG tratam as duas faces. O critério de pausar, parar ou ocultar conteúdo em movimento que começa sozinho e dura mais de cinco segundos existe para quem precisa silenciar a tela. O critério de animação a partir de interações (nível AAA) pede que animação de movimento desencadeada pelo usuário possa ser desligada, salvo se for essencial à informação (W3C, Understanding 2.3.3).

Em um jogo de diagnóstico, a unidade pedagógica é a pista e a hipótese, não o efeito. Casos fictícios com apresentação clínica real, com até seis pistas, pedem tela legível e estável. O post sobre diagnóstico diferencial com pistas e o de aprendizagem baseada em casos situam a prática. Aqui o aviso é de interface: se a pista “entra” com um slide agressivo a cada toque, ou se o mapa de códigos treme ao rolar, o desenho trabalha contra o raciocínio.

Compare duas sessões. Na primeira, cada ação dispara transição de meio segundo, o placar anima números e um vídeo de fundo loopa em silêncio. Na segunda, a tela muda de estado sem deslocar o fundo, o feedback de proximidade usa cor, ícone e nome escrito, e qualquer movimento opcional começa parado. A segunda sessão não é “menos moderna”. É mais respeitosa com quem estuda sob fadiga, migrânea ou sensibilidade vestibular. Dialoga com metacognição na medicina: você observa o próprio mal-estar e ajusta o ambiente antes de culpar a “falta de foco”.

Em termos de carga cognitiva, animação não essencial funciona como ruído na mesma banda da pista clínica. Você gasta ciclos para decidir se o elemento que se move é informação ou enfeite. Em sessão curta com até seis pistas, cada ciclo perdido importa. Por isso o estado quieto não é estética minimalista por moda: é alinhamento com a teoria da carga no ensino em saúde citada acima.

Vestibular e sensibilidade a movimento visual

O sistema vestibular integra informação do labirinto, da visão e da propriocepção para manter equilíbrio e orientação. Quando a visão sugere movimento forte e a cabeça está quieta, o conflito sensorial pode produzir sintomas semelhantes a enjoo de movimento. Em migrânea vestibular, há evidência de maior dependência visual e de instabilidade postural diante de estímulos de movimento no campo visual (PMID 29930534). Exposição prolongada a movimento visual em campo amplo elevou limiares vestibulares em pacientes com migrânea vestibular em relação a controles e a outros grupos clínicos (PMID 30759189).

Suscetibilidade a enjoo de movimento aparece associada a migrânea e a distúrbios vestibulares em protocolos experimentais e em medidas centradas no paciente (PMID 25118205). Em comparação entre migrânea vestibular, migrânea sem vertigem e controles, equilíbrio pior e maior sensibilidade a movimento foram observados no grupo vestibular (PMID 32178946). Em coorte estudantil, sensibilidade a enjoo e critérios de migrânea vestibular se sobrepuseram com frequência digna de atenção clínica (PMID 32501936). Nada disso diagnostica o leitor pela tela. Serve para lembrar: parallax, zoom de rolagem e fundos que “respiram” não são neutros.

A documentação WCAG descreve reações vestibulares a animação (tontura, náusea, cefaleia) e recomenda evitar animação desnecessária, oferecer controle para desligar movimento não essencial e respeitar a preferência do sistema (Understanding 2.3.3). Em interfaces de estudo, os gatilhos mais comuns são:

• Parallax e camadas que se movem em velocidades diferentes ao rolar.
• Transições longas entre pistas ou entre telas de resultado.
• Elementos que flutuam, vibram ou “respiram” em loop.
• Zoom ou pan automático em imagens clínicas sem controle do usuário.
• Confetes, partículas e animações de conquista em tela cheia.

Quem desenha material clínico também precisa pensar em quem assiste aula gravada ou webinar com cortes rápidos e vinhetas piscantes. O mesmo princípio vale: movimento a serviço da compreensão (por exemplo, seta que aponta um achado) difere de movimento a serviço do marketing. O primeiro pode ser curto, local e pausável. O segundo quase sempre pode sair.

Há um mal-entendido frequente: “se eu não tenho epilepsia, flash e movimento não são problema meu”. Distração, enxaqueca e enjoo visual já bastam para degradar a qualidade do retrieval numa sessão de casos. O estudante que abandona o app depois de três noites de náusea não aparece na métrica de “engajamento”. Aparece como silêncio. Desenhar para sensibilidade a movimento é, portanto, também desenhar para adesão ao hábito de prática clínica.

Fotossensibilidade e o limite de três flashes

Fotossensibilidade, no sentido clínico usado aqui, refere-se a resposta anormal a estímulos luminosos ou a padrões, que em algumas pessoas pode precipitar crise convulsiva. Não é o mesmo que “não gostar de tela clara”. O consenso de especialistas da Epilepsy Foundation of America descreveu parâmetros de flash potencialmente perigoso: luminância relevante, frequência a partir de cerca de três hertz e área angular suficiente no campo visual; transição para vermelho saturado também entra como risco; padrões listrados com número excessivo de pares claro-escuro pedem restrição (Harding et al., 2005). A revisão associada do mesmo grupo resume a base clínica e epidemiológica (Fisher et al., 2005). Modelo e regras para padrões em mídia foram refinados por Wilkins, Emmett e Harding (PMID 16060930). Atualização mais recente da Epilepsy Foundation revisa convulsões visualmente sensíveis, fatores de risco e prevenção (PMID 35132632). Discussão de segurança de imagem em epilepsia fotossensível reforça o papel de diretrizes de produção (PMID 18930180).

Na web, o critério WCAG 2.3.1 (nível A) exige que a página não contenha nada que pisque mais de três vezes em qualquer período de um segundo, ou que o flash fique abaixo dos limiares geral e de vermelho (Understanding 2.3.1). Isso não “garante zero risco” para todas as pessoas altamente suscetíveis. É o piso técnico que a indústria e a acessibilidade adotaram. Em apps de ensino, o risco prático aparece em:

• Indicadores que piscam para “chamar atenção” (erro crítico, timer, streak).
• GIFs ou Lottie com alternância rápida de contraste.
• Transições de tela cheia entre claro e escuro em sequência rápida.
• Padrões listrados finos em fundos ou em gráficos animados.
• Vídeos clínicos com cortes e flashes de sala sem revisão de segurança.

Tom clínico sem alarmismo: a maioria dos estudantes não terá crise por um app mal desenhado. Uma minoria tem risco real, e o custo de evitar flash agressivo é baixo. Se alguém apresentar crise, confusão prolongada ou sintomas neurológicos agudos diante de estímulo luminoso, busque a ajuda necessária. Não force “só mais uma tentativa” com a tela piscando.

Diferencie este post do guia geral de acessibilidade digital em softwares médicos: lá entram contraste de texto, teclado, nomes acessíveis e o mapa WCAG. Aqui o objeto é flash e movimento. O post de tecnologia assistiva visual trata leitores e ampliadores; movimento reduzido também ajuda quem amplia a tela, porque pan e zoom automáticos cansam.

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

Sistemas operacionais modernos permitem ao usuário pedir menos animação (Reduce Motion no iOS e equivalentes em outros sistemas). Navegadores expõem essa preferência à página via media query CSS prefers-reduced-motion: reduce. O contrato é simples de enunciar e fácil de quebrar na prática:

• O usuário declara a preferência uma vez no SO (ou no navegador).
• O site ou o app consulta a preferência.
• Animações não essenciais somem ou viram mudança instantânea de estado.
• Movimento essencial à informação, se existir, permanece o mais curto e local possível, ou ganha controle explícito de play/pause.

Guias de engenharia acessível descrevem o mesmo fluxo: remover ou reduzir de forma substancial animação, transição, parallax e efeitos de rolagem quando a preferência está ativa; oferecer pausa para conteúdo que se move sozinho (web.dev, Animation and motion). Respeitar a preferência não dispensa um controle dentro do produto: nem todo mundo conhece o ajuste do SO, e às vezes a pessoa quer reduzir movimento só naquele app.

Erros comuns em produtos de ensino:

• Detectar a preferência e ainda assim manter parallax “porque é a marca”.
• Reduzir só CSS de hover e deixar Lottie e canvas animados intactos.
• Tratar Reduce Motion como modo “sem acessibilidade completa”, quando na verdade é o modo padrão seguro.
• Animar feedback de erro com flash vermelho saturado em loop.

Para quem escreve casos e curadoria, o paralelismo é direto: o conteúdo clínico pode ser excelente e a casca visual ainda assim excluir. O fluxo de Creators e o olhar do Curator cuidam da qualidade do caso; o desenho de movimento cuida de quem consegue permanecer na sessão. Ferramentas como Researcher e Closer entram no estudo depois do caso; também se beneficiam de telas sem autoplay.

Plataformas de ensino e ajustes locais

Dois lados da mesma interface: quem publica o recurso e quem estuda nele. Sem o primeiro, o segundo só mitiga. Sem o segundo, o primeiro demora a perceber falhas. O desenho responsável assume as duas frentes ao mesmo tempo.

O que plataformas de ensino devem oferecer

Lista prática para quem desenha ou escolhe app, LMS ou jogo de diagnóstico:

• Estado padrão quieto: sem autoplay de vídeo, banner ou partícula.
• Respeito a prefers-reduced-motion em CSS, em bibliotecas de animação e em canvas.
• Controle explícito no produto: “reduzir movimento” ou “desativar animações”, persistente na conta.
• Feedback multimodal sem flash: cor + ícone + texto (o tema de proximidade no NEXO é exemplo de princípio, descrito em /accessibility).
• Imagens e vídeos clínicos com revisão de flash e de padrões listrados antes de publicar.
• Transições de tela curtas ou nulas; mudança de estado por troca de conteúdo, não por deslocamento de câmera.
• Rolagem que move só o conteúdo essencial; sem parallax acoplado.
• Teste com usuários que relatam migrânea, enjoo visual ou epilepsia fotossensível, quando possível, além de checklist WCAG.

Ética de jogos educacionais já pede evitar desenho que prejudica o aprendiz; o post sobre ética no design de jogos educacionais situa o terreno. Aqui o dano pode ser corporal: náusea e, em casos extremos, crise. Gamificação na educação médica pode usar pontos e feedback sem exigir confete em tela cheia (evidência em gamificação; constância, precisão e velocidade).

Para quem publica casos fictícios com apresentação clínica real: prefira figuras estáticas a GIFs; se a animação ensina (por exemplo, fluxo de um sinal), ofereça play manual e versão estática equivalente. Até seis pistas em sequência já estruturam o ritmo cognitivo; a interface não precisa “vender” cada pista com um efeito. Em revisões de produto, peça evidência de que Reduce Motion foi testado de ponta a ponta: splash, onboarding, caso, feedback, ranking e telas de conquista. O buraco costuma estar no confete final, não na tela de login.

Quem integra vídeo de aula ou simulação precisa de pipeline de revisão de flash parecido ao da radiodifusão (consensos Harding/Wilkins e recomendações ITU). Não basta “o editor de vídeo não avisou”. Um corte rápido entre sala clara e escura, ou um título que pisca, reintroduz risco numa plataforma que já tinha cumprido o critério nas telas nativas. Trate mídia embutida como parte do produto, não como anexo inocente.

O que o estudante pode ajustar no SO e no navegador

Enquanto a plataforma não muda, você ainda tem opções locais. Nenhuma delas substitui cuidado clínico se os sintomas forem intensos.

• Ative a opção do sistema para reduzir movimento (Reduce Motion ou equivalente) e reinicie o app para garantir leitura da preferência.
• No navegador, use configurações de acessibilidade ou recursos que forçam redução de animação; teste se o site respeita a media query.
• Desligue autoplay de vídeo nas preferências do navegador.
• Reduza brilho; evite estudar no escuro total com tela no máximo (conforto visual, sem promessa terapêutica).
• Prefira modo que mantém contraste legível sem pulsar entre temas automaticamente.
• Pause ou feche abas com carrosséis e lives com efeitos agressivos antes da sessão de casos.
• Se um recurso específico dispara mal-estar, documente (qual tela, qual ação) e reporte ao produto; feedback concreto acelera correção.

Tecnologia assistiva e ampliação mudam a geometria da tela: pan horizontal e zoom alto tornam parallax ainda pior. O guia de tecnologia assistiva visual aprofunda leitores e ampliadores. Metacognição ajuda: se depois de dez minutos de app “bonito” você só sente enjoo, o problema pode ser o movimento, não o conteúdo clínico. Ajuste o ambiente, faça uma pausa e retome com interface mais quieta. Sobre pausa e ritmo de estudo, o blog também discute pausa diagnóstica no raciocínio e burnout quando o mal-estar vira padrão.

Um protocolo curto de cinco minutos antes da sessão: (1) Reduce Motion ligado; (2) brilho em faixa confortável; (3) abas barulhentas fechadas; (4) plano B se a náusea aparecer (parar, hidratar, mudar de aparelho estático). Isso não é ritual supersticioso. É higiene de interface, no mesmo espírito em que você escolhe mesa e luz para ler um artigo denso. Se o mal-estar for recorrente só com um produto, trate isso como dado de acessibilidade a comunicar, não como fracasso pessoal de “aguentar a animação”.

Tabela: gatilhos visuais e respostas de desenho

Use a tabela ao revisar um app, um LMS ou o próprio hábito de estudo. Os contrastes são técnicos, não morais.

Gatilho	Risco principal	Resposta de desenho	O que o estudante pode fazer agora
Parallax e camadas em velocidades diferentes	Conflito visuovestibular, náusea	Remover; rolagem só do conteúdo	Ativar reduzir movimento; evitar páginas com efeito
Autoplay de banner, GIF ou vídeo	Distração; possível flash	Parado por padrão; play manual	Bloquear autoplay no navegador
Flash ou pisca >3 vezes/s em área larga	Risco de crise em suscetíveis	Cumprir WCAG 2.3.1; revisar mídia	Sair da tela; buscar ajuda se crise
Confete e partículas em tela cheia	Sobrecarga e enjoo	Feedback estático multimodal	Desligar animações no app se houver toggle
Zoom/pan automático em imagem clínica	Vertigem visual	Controle do usuário; atalho de reset	Usar zoom manual; preferir figura estática
Transição longa entre pistas	Carga extrínseca, atraso cognitivo	Troca instantânea ou <150 ms sem deslocamento	Preferir apps que respeitam Reduce Motion

Depois da tabela, pergunte: meu recurso de estudo mais usado sobrevive a Reduce Motion ligado? Se a interface “quebra” sem animação, a animação estava carregando significado que deveria estar em texto, ícone ou estrutura.

Como o NEXO entra

O NEXO é um jogo diário de diagnóstico com casos fictícios com apresentação clínica real e até seis pistas progressivas. A página /accessibility declara, entre outros recursos, que as animações do app respeitam a preferência do sistema para reduzir movimento (Reduce Motion). A mesma declaração descreve independência de cor no feedback de proximidade (cor com rótulo de texto) e ausência de mídia em autoplay no site. Nenhuma frase aqui afirma que isso melhora retenção, aprovação ou desempenho clínico. É descrição de recurso conferível.

Quem está conhecendo a plataforma pode ler o que é o NEXO. Limites de uso, quando relevantes, estão em /economia. Ferramentas do ecossistema (Researcher, Closer, Curator, Creators) entram conforme o produto descreve. O ângulo deste post é segurança e conforto visual na sessão. Na mesma pauta, ver acessibilidade cognitiva, feedback multimodal, explicação pós-diagnóstico com tecnologias assistivas e fluxo do caso com leitor de tela.

Sugestão de uso sem afirmação de resultado: ative Reduce Motion no aparelho antes de jogar; observe se alguma tela ainda anima de forma desconfortável e reporte; use o feedback de proximidade pela combinação de cor, ícone e texto, não só pelo brilho da cor; se o mal-estar persistir, pause a sessão e busque a ajuda necessária quando os sintomas forem intensos.

Perguntas frequentes

Qual a diferença entre este texto e o de acessibilidade digital em softwares médicos?

Aquele é o mapa amplo (WCAG, falhas frequentes, o que conferir num sistema de saúde). Este aprofunda movimento, flash, fotossensibilidade e prefers-reduced-motion em interfaces de estudo clínico.

Reduzir movimento tira a “graça” do jogo de diagnóstico?

O núcleo pedagógico é hipótese, pista e feedback. Animação decorativa não é o jogo. Um estado quieto pode manter clareza e ainda respeitar quem tem migrânea ou enjoo visual.

Três flashes por segundo é um limite clínico absoluto?

É o critério WCAG alinhado a consensos de produção segura. Pessoas altamente suscetíveis podem reagir abaixo desse limiar. Por isso o desenho prudente evita flash amplo e vermelho saturado em sequência, mesmo quando “passa” no teste mínimo.

Só quem tem epilepsia precisa se importar?

Não. Vestibular, migrânea, enjoo visual e distração por movimento afetam grupos maiores. O benefício de interface quieta é coletivo; o risco extremo de crise é o que torna o tema inegociável.

O NEXO promete zero animação?

Não. A declaração pública afirma respeito à preferência de reduzir movimento no app e ausência de mídia em autoplay no site. Isso não é reivindicação de eficácia nem lista de limitações.

E se eu tiver sintomas fortes diante da tela?

Pare o estímulo, vá para um ambiente estável e busque a ajuda necessária. Este texto é pedagógico, não conduta de emergência.

Checklist final

• Reduce Motion (ou equivalente) ativo no SO quando houver sensibilidade.
• Autoplay desligado no navegador e nos apps de estudo.
• Nenhum recurso essencial depende de parallax ou confete.
• Feedback de acerto/erro legível sem piscar.
• Imagens e vídeos clínicos revisados quanto a flash e listras.
• Controle in-app de animação, se a plataforma oferecer.
• Sessão interrompida se náusea, aura ou mal-estar visual aparecer.
• Reporte descritivo ao produto quando um gatilho for identificável.
• Leitura cruzada com acessibilidade digital e tecnologia assistiva visual.
• Zero leitura de recurso de interface como prova de eficácia de aprendizagem.

Jogue o caso do dia no NEXO. Prefira sessão com movimento reduzido: a pista e a hipótese importam mais do que o efeito na tela.

Referências

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.