Verbeteren van de visuele hiërarchie week selectie component

[Daan645]

Ik wil de visuele hiërarchie van mijn week selectie component verbeteren, doormiddel van een redesign. Op deze manier wordt het component nog duidelijker voor de gebruiker.

[Daan645]

Ik heb een morphological chart gemaakt, op deze manier kan ik alle opties opschrijven die ik heb voor de weekselectie en zo tot een betere oplossing komen!

[Daan645]

Uitwerken van de verschillende variaties

Ik heb de verschillende variaties uitgewerkt om er zo achter te komen welke variatie de beste visuele hierarchie heeft.

[Daan645]

User test

Ik heb met sammy mijn ontwerpen getest. Uiteindelijk bleek het het beste te zijn als de huidige dag roze is, het is namelijk het hoofddoel om te zien welke dag het nu is. We merkte ook op dat het eigenlijk belangrijker is om de dag nummers te zien dan de dagnaam, en dat het ook fijn was als je de maanden kon zien. Ik heb dit verwerkt in een nieuwe variatie, deze was uiteindelijk duidelijker.

[Daan645]

Breakdown schets

Ik heb vervolgens de versie die het beste was uitgewerkt in een breakdown schets met zowel HTML, CSS en JS. Dit heb ik gedaan zodat ik een goed beeld krijg hoe ik het component moet gaan maken.

[Daan645]

Bouwen

Ik heb het component omgebouwd tot het nieuwe ontwerp.

[Daan645]

Contrast test

Maand aanpassen

We mogen niet uitwijken van de kleuren van de opdrachtgever. Deze kleuren hebben helaas geen goed contrast. Ik heb daaorm uiteindelijk de huidige maand zwart gemaakt zodat deze een beter contrast heeft.

Text groter maken

Ik zag op de contrast checker dat als de text groter is deze iets beter scoort en nog net groen is. Daarom heb ik de tekst groter gemaakt om zo het contrast te verbeteren.

Ik heb bij deze tests de contrasts app gebruikt.

[Daan645]

Tab test

Test 1

Op tab werkt het menu goed, omdat ik het een carousel heb gemaakt met scroll-snap mandatory, scrollt het carousel mee als je op tab drukt.

https://github.com/user-attachments/assets/c4b38339-c3de-4adb-82d8-f1b647aafd50

Analyseren

Ik vind dat de focus state een stuk duidelijker en opvallender kan vooral op het roze vakje die de active state heeft. De dunne lijn is moeilijk zichtbaar, laat staan als een gebruiker om redenen slechter of minder zicht heeft. Ook is het contrast op het roze vakje erg moeilijk te zien.

Ontwerpen

Ik wil de focus state hetzelfde maken als de hover die de muisgebruikers hebben, op die manier is het duidelijker waar je bent.

Bouwen

Ik heb bij mijn hover state ook de focus state toegevoegd. Dit heb ik gedaan zodat er geen onnidige / dubbele code in mijn project komt, aangezien ik precies hetzelfde wil met mijn focus als hover. Ook heb ik de outline op none gezet op de algemene button selector, zodat ik dit niet overal hoef te herhalen.

• Pas dezelfde stijl toe op de focus als op de hover

  
  button:hover,
  button:focus
  {
  background-color: var(--primary-color);
  color: var(--light);
  scale: 0.9;
  }

- pas de zelfde stijl aan op zowel de hover als de focus, maak hier de eerste span in de button wit (de standaard grijs kleur heeft een slecht contrast)
```css
 button:hover span:first-of-type,
  button:focus span:first-of-type {
    color: var(--light);
  }

• Zorg ervoor dat de hover en de focus hetzelfde is op de navigatie buttons

  .navigation-buttons:hover,
  .navigation-buttons:focus {
  background-color: var(--hover-secondary);
  }

Test 2

Met de kleur aanpassingen is de focus state een stuk duidelijker op keyboard en is er makkelijker te navigeren op de weekselectie!

https://github.com/user-attachments/assets/929c14de-0f06-400e-a0bb-ecbd5590f985

[Daan645]

Motion sickness test

Ik wil testen of mijn component ook geschikt is voor gebruikers die motion sickness hebben.

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.

Wel heb ik een breakdown gemaakt voor mijzelf om te begrijpen hoe ik de mediaquery wil gaan toepassen:

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/a6ec09b4-87c5-4ea7-b211-0eac16ea3183

Zonder reduced motion

https://github.com/user-attachments/assets/93860b8b-3e03-48ae-848d-c3da0a74e4a3

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