Motion sickness test

[Daan645]

Test 1

Op het moment dat ik hover met de muis of de focus gebruik met keyboard komt er een transition met een scale. Dit zou voor duizeligheid kunnen zorgen wanneer iemand motion sickness heeft omdat de blokken snel achterelkaar kunnen bewegen.

https://github.com/user-attachments/assets/74c05d04-7f9b-4768-b8d7-5817dd879240

Analyseren

Om motion sickness eerst beter te begrijpen wil ik er wat meer over gaan lezen. Ik zie dat dit op het web veroorzaakt kan worden door onverwachte bewegingen zoals parallax scrolling of flitsende animaties, wat kan leiden tot desoriëntatie of misselijkheid bij gebruikers.

Om dit te voorkomen wil ik dat gebruikers die de instelling hebben om animaties te uit te zetten, geen animaties meer krijgen op mijn website. Ik heb hier naar onderzoek gedaan op mdn webdocs en heb het volgende gevonden:

Ik kan met deze mediaquery ervoor zorgen dat er iets anders gebeurd wanneer de gebruiker reduced motion aan heeft staan op zijn of haar systeem.

@media (prefers-reduced-motion) {
}

Het is nog mooier als ik het component standaard al kan bouwen terwijl ik rekening houdt met reduced motion. Daarom kan ik de mediaquery ook zo maken dat hij bepaalde onderdelen wel gebruikt wanneer de gebruiker reduced motion niet aan heeft staan. Zo is de website altijd toegankelijk, zelfs voor de minimale groep die geen mediaquery ondersteunt:

@media (prefers-reduced-motion: no-preference) {
}

Ontwerpen

Voor dit onderdeel hoefde ik niet veel te ontwerpen ik wil eigenlijk mijn hover state die ik al heb gebruiken maar dan zonder scale en transition. De scale en de transition kunnen voor een fade effect zorgen waar iemand met motion sickness dus last van zou kunnen krijgen.

Bouwen

Om mijn code kort en duidelijk te houden heb ik de huidige hover en focus gehouden zo als het is. Ik heb deze alleen omgebouwd met motion sickness in gedachte.

Dit is hoe ik dat heb gedaan:

Ik zef hier op de button dat er alleen een transition moet komen als er geen reduced motion aan staat bij de gebruiker:

button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    background-color: rgb(239, 239, 239);
    font-family: var(--font-family);
    padding: 1em;
    font-size: 0.9em;
    cursor: pointer;
    @media (prefers-reduced-motion: no-preference) {
      transition: 0.2s ease-in;
    }
    font-weight: bold;
  }

Ook wil ik geen scale meer op mijn hover en focus, dus heb ik hetzelfde hier in toegepast:

  button:hover,
  button:focus
  {
    background-color: var(--primary-color);
    color: var(--light);
    @media (prefers-reduced-motion: no-preference) {
      scale: 0.9;
    }
  }

Op deze manier blijft mijn code kort en efficiënt maar ook duidelijk. Ook bouw ik mijn component nu zo dat ik de gebruiker die last heeft van motion sickness centraal stel.

Test 2

Ik ben benieuwd of de animatie nu uitgeschakeld is als de gebruiker reduced motion uit zou zetten op zijn of haar systeem en of er geen onverwachte bewegingen meer zijn.

Met reduced motion https://github.com/user-attachments/assets/6d7efba2-ef4d-44dc-87b5-761fb5fa8b75

Zonder reduced motion https://github.com/user-attachments/assets/d82cb7ec-1462-445f-afab-7b7cf87724b4

Bronnen

• Wat is motion sickness: https://source.opennews.org/articles/motion-sick/
• Mediaquery tegen motion sickness (prefers-reduced-motion): https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion