De secundaire knop was erg onduidelijk voor de doelgroep. Doordat beide knoppen een hoog contrast als achtergrond hadden werd de ouder verward over welke knop ze nu moest indrukken om verder te gaan. Ondanks dat er ‘volgende stap’ en ‘vorige stap’ in de knop stond.

Secundaire knop

Ergens wilde ik nog de blauw-groene accentkleur van het KBO logo implementeren. Deze wordt nu nog weinig gebruikt aangezien dit een lastige kleur is met oog op contrastratio. Dunne randen zal door veel ouderen niet opgemerkt worden en ondanks dat de kleur wel als achtergrond gebruikt kan worden met een hoge contrastratio, wordt de website hierdoor erg snel druk. Daarnaast is het ook niet echt een opvallende of mooie kleur om te gebruiken.

Untitled

Figuur 1: Contrastratio score vanuit coolors.co/contrast-checker

Toch heb ik met deze kleur nog iets geexpirimenteerd.

Untitled

Figuur 2: Secundaire knop HiFi 2.0

Button.png

Figuur 3: Knop iteratie 1

Button3.png

Figuur 5: Knop iteratie 3

Button2.png

Figuur 4: Knop iteratie 2

Button5.png

Figuur 6: Knop iteratie 4

Untitled

Figuur 7: Kleine knop HiFi 2.0

Frame 47.png

Figuur 8: Knop iteratie

Er was wel al een kleine knop vormgegeven met een witte achtergrond en dikke blauwe rand. Deze knop werd zo vormgegeven om te testen of dit een duidelijke knop zou zijn voor de ouder. Deze knop werd onder andere gebruikt voor het navigeren van het fotoalbum en de activiteitenagenda. Ik dacht zelf dat een knop met een witte achtergrond en dikke rand verwarring zou brengen bij ouderen. Ook omdat er wat UI-elementen op die manier zijn vormgegeven. Tot mijn verbazing was het voor elke ouder direct duidelijk dat ze hierop konden klikken. Daarom wordt de standaard secundaire knop ook in deze stijl vormgegeven.

Toch was ik hier nog niet echt tevreden over. Uit de test met de knoppen bleek dat de meeste ouderen een voorkeur hebben voor een shaduweffect in de knop. Hierdoor komt de knop iets meer in 3d over en herkennen ouderen dit sneller als een knop waar op gedrukt kan worden.

Door de schaduweffect zal de conversieratio waarschijnlijk al flink vergroot worden, daarom kan de rand van de border verkleind worden om meer rust te bieden.

Button87.png

Figuur 9: Secundaire knop HiFi 3.0