UI kit ontwerpen

  • Design
  • User Experience
  • Cas Bukkems
  • 15-04-2021
  • Library
  • Workshop

Aanleiding
Ieder groepslid heeft prototypes gemaakt, deze hebben allemaal een andere stijl. Vanuit feedback en gesprekken met Matthijs is de opdracht gekomen om van de losse “bouwstenen” een geheel te maken. Als we allemaal los gaan ontwerpen wordt het uiteindelijk prototype een bij elkaar geraapt ratjetoe. Ik heb daarom een UI-kit opgezet met guidelines waar de groep vanuit door kan bouwen. Zo hebben we een eenduidige stijl die we kunnen doorvoeren voor het eindproduct.

Aanpak
We hebben bij ons project een bijzondere doelgroep. Ouderen vanaf 65 jaar en mensen met een laag cognitief vermogen. Deze mensen verdienen extra aandacht op design gebied zoals is gebleken in het bekwaamheidsonderzoek en het onderzoek naar trends binnen websites voor ouderen (Bukkems, C 2021). Vanuit de “Older user and web accesibility” guidelines van ( W3 2021 ), zijn elementen en guidelines ontstaan. De tekst groottes heeft Jens ontwikkeld vanuit guidelines van Google Material design ( Google, 2014). Hiermee hebben we een goede design basis kunnen leggen voor het uiteindelijke prototype. Ook zijn er elementen vanuit het rijks huisstijl handboek meegenomen zoals de kleuren en knoppen.

Resultaat
Met het ontwerpen is rekening gehouden met speciale zaken zoals contrast ratio’s die zijn geoptimaliseerd voor ouderen in het bijzonder. Doordat het zicht van ouderen door je jaren heen flink afneemt is het voor hen lastiger om kleuren te onderscheiden. Met het ontwerpen is rekening gehouden met de kleuren ratio eisen van (W3, 2021).  W3 geeft als minimum eis een ratio van 4.5:1, met het ontwerp van mij heb ik een ratio van 10.2:1 dat is twee maal boven de eisen.
De rest van de componenten heeft een minimale standaard van 4.5:1.

De UI kit werd door de groep positief ontvangen en hebben hierdoor een mooi eindproduct kunnen realiseren wat voldoet aan de speciale eisen voor onze bijzondere doelgroep.


Bronnen

W3School. (2021, 4 maart).
Developing Websites for Older People. W3.
https://www.w3.org/WAI/older-users/developing/

Nederlandse overheid ( 2021 ).
Rijks huisstijl
rijkshuisstijl.nl

Google ( 2014 )
Material design kit
https://material.io/design

Bekijk het resultaat