De gebruikersinterface heeft ook weer een nieuwe iteratie gekregen. In de vorige versie werden er skeuomorphisme knoppen gebruikt. Deze knoppen waren duidelijk voor de testpersonen, maar waren visueel niet erg aantrekkelijk en kwamen wat ouderwets over. De kleur was niet echt fel aanwezig en de contrastratio was ook nog niet perfect (meer hierover kunt u hier in versie 0.9 vinden).
In deze versie begon ik daarom gelijk voor een frisse modern uiterlijk. Ik probeerde de knoppen uit met een hoekige vormgeving, gezien het logo ook erg hoekig is.
Ik begon met de CTA-knop. Een CTA-knop, ofwel ‘call-to-action’-knop is een knop die het meest moet opvallen. Met deze knop probeer je de gebruiker de primaire actie uit te laten voeren. De CTA-knop gaf ik een felle rode kleur van het logo. Er werd daarnaast een tekstschaduw toegevoegd om de leesbaarheid te bevorderen. Als laatst werd de tekst ook nog extra vergroot om de knop extra te laten opvallen en de leesbaarheid nog extra te boverderen.
Figuur 1: CTA-knop van versie 1.0
Figuur 2: Eerst iteratie CTA-knop van versie 2.0
Hoewel deze knoppen goed bij de website pastte, besloot ik toch om de knoppen af te ronden. Volgens mijn onderzoek vanuit de interviews zien ouderen afgeronde knoppen meer als knoppen. Ook voegde ik nog een subtiele gradient toe om de knoppen iets meer een 3d-effect te geven.
Figuur 3: Eerst iteratie CTA-knop van versie 2.0
Figuur 4: CTA-knop van versie 2.0
Tijdens het testen wil ik meer onderzoek doen naar wat ouderen fijne knoppen vinden. Dit wil ik doen door ze voor het testen een paar afbeeldingen te tonen met verschillende knoppen waaruit de ouder kan kiezen welke zij het beste als een knop eruit vinden zien.
Voor de secondaire knop begon ik ook eerst met hoeken toe te voegen en de border te vergroten.
Figuur 5: Secundaire knop versie 1.0
Figuur 6: Eerste iteratie secundaire knop versie 2.0
Figuur 7: Tweede iteratie secundaire knop versie 2.0
Voor kaders en het groeperen van content wordt momenteel ook een gekleurde border gebruikt. Hierdoor werd het visueel erg onoverzichtelijk wat nu knoppen zijn. Ook vroeg ik me af of dit wel duidelijk genoeg is voor de ouderen.
Figuur 8: Voorbeeld border rondom content en secondaire knop
Daarom werd de knop ingevuld net zoals de CTA-knop en werd hier ook een shaduweffect onder de knop toegevoegd en de randen afgerond.
Figuur 9: Derde iteratie secundaire knop versie 2.0
Figuur 10: Secundaire knop versie 2.0
Om te testen of de open knop wellicht kan werken bij ouderen wordt er voor de kleine secondaire knop wel voor deze stijling gekozen. In de volgende iteratie maak ik een keuze en ontwerp ik deze knoppen consistent gelijk aan elkaar.