Development

Cardan

Digitale toegankelijkheid specialist

Cardan is een bedrijf dat zich inzet om andere organisaties digitaal beter toegankelijk te maken en hen helpt te voldoen aan de eisen van de nieuwe wetgeving: de European Accessibility Act. Dit doen zij via een ervaringsplein, dat momenteel fysiek wordt aangeboden. De wens van Cardan is om dit ervaringsplein uit te breiden naar een digitale omgeving.

Binnen het project Design that UX zijn de oorspronkelijke projectgroepen opnieuw samengesteld. Ik werk nu samen met Evy en Jennifer. We hebben ervoor gekozen om verder te gaan met het idee van Evy, dat oorspronkelijk gebaseerd was op een digitale bankenwinkel. Dit concept hebben we gezamenlijk aangepast naar een online verfwinkel, omdat dit realistischer is en beter aansluit bij alledaags online koopgedrag. Na overleg met onze externe stakeholder, die ik hiervoor heb benaderd, hebben we goedkeuring gekregen om met dit idee verder te gaan.

Jennifer heeft meer ervaring met development en neemt daarom de leiding bij technische beslissingen. Zij begeleidt Evy en mij waar nodig, zodat wij goed aangehaakt blijven in het proces.

Om de digitale ervaring interactiever en speelser te maken, hebben we besloten een digitale mascotte toe te voegen – geïnspireerd op Clippy van Microsoft Word. Deze mascotte geeft tips aan gebruikers wanneer zij ergens vastlopen. Ik heb het ontwerp van deze mascotte op mij genomen.

Daarnaast heb ik gewerkt aan de navigatiebalk (navbar), de footer, de knop “Terug naar Cardan” en aan verschillende onderdelen van de interface zoals de missiebox en de detailpagina. Bij de detailpagina lag de focus op het correct koppelen van de verfkaarten aan de bijbehorende informatie, en op de visuele positionering en opmaak. Na overleg is besloten om deze detailpagina uit het eindproduct te halen, omdat het project daardoor te uitgebreid dreigde te worden.

Taken analyse

Om een realistische en bruikbare simulatie te ontwerpen, hebben wij bepaald welke taken een gebruiker moet kunnen uitvoeren binnen onze online verfwinkel. Op basis hiervan kunnen wij het ontwerp van de simulatie doelgericht vormgeven.

Gebruikersdoelen

Voorbeeldtaak: Filteren op verfsoort en bestellen

Alternatief gedrag:

Mascotte Cardan

Om onze simulatie voor het digitale ervaringsplein van Cardan toegankelijk, leerzaam en aantrekkelijk te maken, hebben wij besloten om een mascotte te ontwikkelen. Deze mascotte heeft als doel de gebruiker op een speelse manier te begeleiden, vooral wanneer deze vastloopt. De mascotte geeft hints, tips of aanmoedigingen en draagt zo bij aan een prettige gebruikerservaring.

Ik heb dit onderdeel op mij genomen en ben begonnen met het verzamelen van ideeën die passen bij zowel Cardan als een leeromgeving. In eerste instantie keken we naar verschillende dierlijke mascottes, maar al snel kwam het idee naar voren om het bestaande logo van Cardan als basis te gebruiken. Door het logo visueel aan te passen — bijvoorbeeld door er een bril van te maken en het expressies te geven — kon het logo getransformeerd worden tot een herkenbare en sympathieke mascotte. Dit zorgde voor een sterke visuele link met Cardan, terwijl het ook geschikt is voor een leeromgeving.

Na het ontwerpen van meerdere varianten heb ik deze getest bij gebruikers om te bepalen welke het beste aansloot bij de uitstraling van Cardan. Vervolgens heb ik me gericht op het ontwikkelen van verschillende emoties voor de mascotte. Deze emoties zijn bedoeld om de gebruiker op passende momenten positief te beïnvloeden: door bijvoorbeeld geruststelling, enthousiasme of humor.

Uit gebruikerstests bleek dat sommige emoties niet zo duidelijk overkwamen als bedoeld. Op basis van deze feedback heb ik de reeks teruggebracht tot een selectie van twaalf emoties. Deze zijn gekozen op basis van hun vermogen om lief, behulpzaam, grappig en motiverend over te komen. De bedoeling is dat deze emoties bijdragen aan het gevoel van begeleiding en betrokkenheid bij het doorlopen van de simulatie.

12 gekozen emoties

Neutraal.

Blij wanneer je een antwoord goed hebt 1, 2 en 3.

Verdrietig wanneer je een antwoord fout hebt 1, 2 en 3.

Wanneer je te lang inactief bent 1 en 2.

Wanneer je om een hint vraagt 1 en 2.

Wanneer de site een error zou hebben dat hij bijvoorbeeld niet laadt.

Design terug naar cardan / nieuw kleurenfilter

Ik heb een banner/button ontworpen waarmee de gebruiker gemakkelijk terug kan navigeren naar de website van Cardan. Deze button is vormgegeven in de stijl van zowel Cardan als het verfthema van onze simulatie. Om de herkenbaarheid van Cardan te behouden, heb ik gebruikgemaakt van hun huisstijlkleuren. Daarnaast heb ik verfspetters toegevoegd om aan te sluiten bij het onderwerp van de simulatie — een online verfwinkel.

Om zeker te zijn van een passende visuele stijl heb ik mijn ontwerp voor de "Terug naar Cardan" button voorgelegd aan Evy. Zij gaf aan dat de tweede van boven in de tweede kolom van links het mooist werd gevonden. Daarnaast gaf ze het volgende advies:

Deze feedback heb ik meegenomen in de verdere uitwerking van de button om de bruikbaarheid en visuele samenhang te verbeteren.

Na de eerdere feedback ben ik verder gegaan met een rustiger ontwerp voor de "Terug naar Cardan"-button. Ik heb het ontwerp vereenvoudigd door minder afleiding in kleuren en vormen toe te passen, zodat de knop beter aansluit bij de rest van de website en duidelijker communiceert wat de functie is. Vervolgens heb ik de nieuwe varianten voorgelegd aan Evy en Jennifer. Beiden gaven aan dat zij de rechtsonder geplaatste variant het mooist en meest passend vinden binnen het geheel van het ontwerp. Deze input heb ik gebruikt om de definitieve versie van de button te kiezen en verder uit te werken.

Tijdens het ontwerpen van de "Terug naar Cardan"-knop heb ik meerdere visuele varianten gemaakt, waarbij ik elementen uit het Cardan-logo en het verfthema heb gecombineerd. In dit proces heb ik actief feedback gevraagd aan mijn groepsleden Jennifer en Evy.

Feedback van Jennifer

Feedback Evy en Jennifer

Op basis van deze feedback heb ik verdere aanpassingen gedaan om het ontwerp visueel sterker te maken en beter te laten aansluiten op de stijl van zowel Cardan als de simulatieomgeving.

Tijdens het implementeren van mijn ontwerp merkte ik dat de afmetingen van mijn design niet goed aansloten op de beschikbare ruimte binnen de website. Dit betekende dat de verhoudingen en plaatsing in de praktijk anders uitvielen dan verwacht. Daarom heb ik mijn design aangepast zodat het beter aansluit op de werkelijke ruimte die de site biedt.

Omdat het belangrijk is dat onze banners en visuele elementen binnen de simulatieomgeving consistent zijn, heb ik mijn ontwerp daarnaast afgestemd op het werk van mijn groepsgenoot Evy. Hierbij heb ik met name gelet op de lijndiktes, zodat de verschillende onderdelen beter op elkaar aansluiten en er een uniforme uitstraling ontstaat.

Na het maken van meerdere aangepaste varianten heb ik Jennifer om feedback gevraagd. Zij gaf aan graag een versie te willen zien waarin rechtsonder een paars element is verwerkt. Op basis van deze input ben ik verder gegaan met het uitwerken van die variant.

Tijdens het bespreken van de verschillende ontwerpvarianten heb ik opnieuw feedback gevraagd aan mijn groepsgenoten. Jennifer gaf aan de derde banner van boven aan de linkerkant het mooist te vinden en was positief over de paarse balk in dat ontwerp. Evy daarentegen vond de vierde variant het meest geslaagd, maar gaf de voorkeur aan een groene balk in plaats van paars.

Na gezamenlijk overleg en het afwegen van beide voorkeuren, zijn we tot de conclusie gekomen dat het ontwerp rechtsboven het beste aansluit bij de stijl en doelstellingen van ons project. Dit design combineert elementen uit beide voorkeuren op een evenwichtige manier en sluit goed aan bij de visuele lijn van de simulatieomgeving.

Design mission box

Contact externe stakeholder

Ik heb contact opgenomen met onze stakeholder via e-mail, omdat wij als groep besloten hadden om het idee van Evy’s vorige groep over te nemen. In plaats van een bankwinkel, kozen wij echter voor een verfwinkel, omdat consumenten vaker en sneller geneigd zijn om verf online te kopen. Op mijn eerste e-mail kregen we geen reactie. Ondertussen zijn we wel verdergegaan met ons project, zodat we geen vertraging opliepen. Na twee weken heb ik opnieuw contact gezocht, waarna we onderstaande reactie ontvingen.

Reactie

Het maakt in dit concept niet uit welk type product wordt gekocht, maar vooral om de verwarrende kleurnamen en dat die boodschap goed overkomt.

Naam ideeën voor verf swatches

Om het verwarrende effect van kleurenblindheid op een confronterende manier over te brengen, heb ik een selectie verfkleurnamen samengesteld die opzettelijk vaag en niet direct herleidbaar zijn naar de daadwerkelijke kleur. De bedoeling hiervan is om de gebruiker bewust te maken van hoe misleidend en verwarrend kleuren kunnen zijn zonder duidelijke visuele referentie, zoals dat bij kleurenblindheid het geval is. Bij het kiezen van de uiteindelijke namen is er één naam per kleur onderstreept als definitieve keuze. Wanneer wij in de toekomst de simulatie uitbreiden, kunnen ook de overige namen in gebruik worden genomen. Hieronder volgt een overzicht van de naamselecties per kleur:

Groen

Padera (spaans voor weide), Dewdrop Fog, Tea Leaf Dust, Ochtendstilte, Verloren kruimel zonlicht, Waar de regen bleef, Echo van lente, Tussen dauw en tijd,

Blauw

Onder het niets, Echo van kou, Vergeten horizon, Zachte diepte, Dagdroomrand, Laatste lichtlijn, Ochtend zonder naam, Glas in de regen,

Geel

Tussen ochtend en stof, Licht dat bleef hangen, Wolken in citrustaal, Warme herinnering, Slaap van tarwe, Tussen korrels en tijd, Vlak voor de hitte, Stil stuifmeel,

Oranje

Vallend licht, Rand van vuur, Adem van de avond, Onder een warme wind, Geritsel van gisteren, Geroosterde stilte, Tijd tussen schaduwen, Laat in het licht,

Rood

Verloren warmte, Droogbloem herinnering, Langs de rand van zachtheid, Vleug van verlangen, Ongesproken tint, Zucht na middernacht, Bitterzoete warmte, Onder fluweel,

Paars

Tussen dag en droom, In het blauw vervlogen, Geur van stilte, Rand van schemer, Vergeten fluweel, Gedachtenschaduw, Fluister in het donker, Onder maanlaken,

Grijs

Tussen mist en morgen, Schaduw van ooit, Onuitgesproken stilte, Langs het raam van regen, Kouder dan licht, Waar de zon zweeg, Ritselende stilte, Zacht verdwalen,

Beige

Adem van linnen, Zon op stof, Tussen zand en tijd, Verstilde warmte, Droog gewassen stilte, Verstrooid zonlicht, Geur van herinnering, Verwaaide morgen,

Roze

Geur van herinnering, Tussen huid en hemel, Vleugje verlangen, Onder het zachte, Dageraad op fluweel, Verlegen licht, Gesloten ogen, Op het randje van warm, Stilte met parfum,

Bruin

In het spoor van regen, Waar bladeren slapen, Vergaan vuur,

Realiseren simulatie

Tijdens het project heb ik aan meerdere onderdelen gewerkt. Zo heb ik de header en footer opgebouwd. Ook heb ik aan de detailpagina gewerkt, maar deze is later uit het project gehaald omdat het concept te uitgebreid werd.

Daarnaast heb ik meegewerkt aan de mascotte, aan het toevoegen van emoties om hem levendiger te maken. De styling van de missionbox en mascotte (CSS) heb ik ook verzorgd, zodat dit goed aansloot bij de rest van de site.

Verder heb ik geholpen bij het plaatsen van de juiste afbeeldingen in de banners en meegewerkt aan het finetunen van deze onderdelen. Ook heb ik geholpen bij het bouwen van de filterfunctie waarmee gebruikers konden filteren op bijvoorbeeld prijs en gewicht — deze is later helaas verwijderd.

Verder heb ik meerdere merge conflicts opgelost. Vooral wanneer er tegelijk aan verschillende onderdelen werd gewerkt en Git hierdoor vastliep, heb ik geholpen om de boel weer goed samen te voegen.

Tot slot heb ik door het hele project heen geholpen met aanpassingen waar nodig. Als iets verbeterd moest worden of als iemand ergens op vastliep, heb ik geprobeerd te helpen. Hierbij kan je denken aan: container layout aanpassen, hoogte van het filter veranderen, de greyscale verwijderen, overbodige code verwijderen en hoe tips worden weergegeven.

Resultaat site

Usertest moment 1

Voor deze test wilde ik kijken hoe gebruikers omgaan met de simulatie: of ze zelfstandig hun weg kunnen vinden, begrijpen wat de bedoeling is en hoe ze reageren op elementen zoals de filters, missie, hints en mascotte.

Ik heb de simulatie getest met twee klasgenoten. Zij kregen geen uitleg vooraf. Tijdens het gebruik observeerde ik hun handelingen en stelde tussendoor en achteraf vragen om hun ervaring beter te begrijpen.

Samengestelde conclusie

In het begin is niet duidelijk dat je zelf het kleurenfilter moet aanzetten, of welk filter actief is. Ook de knop "nieuw kleurenfilter" en de missie rechtsonder vallen niet genoeg op. Veel gebruikers moeten even zoeken naar deze elementen. De meeste begrijpen snel dat ze op de RAL-kleuren moeten klikken als antwoord, maar klikken eerst op de verfkaart. Hints worden als overbodig ervaren, omdat je met logisch nadenken en het wisselen van filters het juiste antwoord kunt vinden.

De mascotte wordt herkend als gebaseerd op het Cardan-logo, maar de verschillende emoties vallen niet op. Pas na aanwijzing wordt hij opgemerkt, al wordt hij daarna wel positief ontvangen. De eerste ‘fout’-emotie viel wat minder goed in de smaak.

Er is behoefte aan duidelijkheid over welk filter actief is en sommige gebruikers willen graag zelf een filter kunnen kiezen. Ondanks deze verbeterpunten wordt de simulatie gewaardeerd om zijn effect: het maakt goed duidelijk hoe lastig kleurherkenning kan zijn bij kleurenblindheid, en gebruikers geven aan dat ze de simulatie zouden aanraden aan anderen, bijvoorbeeld front-end developers.

Samengestelde doelen

Aanpassingen na usertesten

We hebben verschillende aanpassingen gedaan op basis van de feedback uit de usertests. De cursor verandert nu in een pointer bij hover over de banners. De missiebox heeft een nieuwe stijl en positie gekregen om beter op te vallen. Ook is de mascotte groter en anders gepositioneerd zodat deze meer opvalt. Alle knoppen in de navbar, waaronder "Stop simulatie" en het logo, leiden nu terug naar Cardan. De simulatie start direct met een kleurenfilter. Verder is de taalconsistentie verbeterd door het Engels uit de interface te halen. Testafbeeldingen zijn vervangen door de juiste visuals en het Cardan-logo staat nu in de navbar. Niet meer gerealiseerd door tijdgebrek:

Lees de volledige usertests in

Usertest moment 2

Voor deze test heb ik gekeken hoe gebruikers mijn simulatie ervaren: of ze zelfstandig door de simulatie kunnen navigeren, de juiste acties uitvoeren en begrijpen wat de bedoeling is. Ik heb vooral gelet op of elementen zoals knoppen, banners, filters en de mascotte duidelijk genoeg zijn, en of de missie goed wordt opgepakt.

De test heb ik uitgevoerd met vier klasgenoten. Ik heb hen gevraagd de simulatie te gebruiken zonder uitleg vooraf. Tijdens het testen observeerde ik hun acties en stelde ik tussendoor en achteraf vragen over hun ervaring.

Samengestelde conclusie

De simulatie werd over het algemeen goed ontvangen, maar liet op meerdere vlakken ruimte voor verbetering zien. De meeste gebruikers konden uiteindelijk hun weg vinden, al waren bepaalde elementen zoals de "Terug naar Cardan"-knop in de navbar of de "Stop simulatie"-knop niet altijd direct zichtbaar of logisch gepositioneerd. De banners zoals "Nieuw filter" en "Je kijkt nu naar..." werden vaak genegeerd of verward met elkaar, en vielen visueel weg in het ontwerp.

Het wisselen van kleurenfilters werd over het algemeen als makkelijk ervaren, maar werd ook gebruikt om snel tot het juiste antwoord te komen — dit maakt de hints overbodig. Wel werden de hints, eenmaal gevonden, als behulpzaam ervaren, al gaf men aan dat ze soms lastig te lezen of te abstract waren. Het gebruik van zowel nummers als bullet points bij de hints zorgde voor verwarring.

De missie viel niet altijd meteen op, maar zodra die eenmaal gevonden werd, wist men goed wat te doen. De meeste gebruikers klikten eerst op de verfkaart en daarna pas op de juiste RAL-kleur.

De mascotte werd door sommigen over het hoofd gezien of als onduidelijk ervaren, maar werd meestal positief beoordeeld als deze eenmaal opviel. Wel werd opgemerkt dat de kwaliteit van het beeld beter kon en dat de emoties die de mascotte uitdrukt duidelijker mogen zijn.

Feedback op het welkomstbericht (bijvoorbeeld het kruisje) en de fout/goed-feedbackmeldingen was dat deze visueel sterker en duidelijker kunnen. De lay-out van de simulatie maakte sommige functionaliteiten pas duidelijk na gerichte vragen, wat aangeeft dat er meer visuele hiërarchie en gebruikslogica nodig is.

Hoewel sommige gebruikers aangaven dat ze de simulatie nu nog niet zouden aanbevelen, werd wel de potentie duidelijk gezien. De ervaring roept verwarring op — precies het doel om mensen bewust te maken van de uitdagingen bij kleurenblindheid. Daarom zou men, na doorontwikkeling, de simulatie zeker willen delen met anderen.

Hypothetische toekomstige aanpassingen

Aangezien het project nu is afgerond, worden er geen verdere aanpassingen meer gedaan. Als dit wel het geval was geweest, hadden we de volgende acties ondernomen:

Lees de volledige usertests in

Feedback eind presentatie Cardan

Tijdens het testen van de simulatie werd de missie snel opgemerkt; de gebruiker wist direct waar hij op moest klikken om de opdracht te starten. Ook het beëindigen van de simulatie verliep soepel: de knop "Terug naar Cardan" werd als duidelijk en gemakkelijk vindbaar ervaren.

Het wisselen van het kleurenfilter werd positief beoordeeld. Zowel de locatie van de knop als de werking ervan werden als logisch en gebruiksvriendelijk ervaren. Wel maakte de gebruiker een kleine fout tijdens de simulatie: er werd gezocht naar een nieuwe kaart, terwijl de verfkaart automatisch vernieuwd werd bij een nieuwe uitdaging.

Wat betreft de hints gaf de gebruiker aan dat deze geleidelijk duidelijker werden, wat goed werd begrepen. De mascotte werd aanvankelijk gezien als onderdeel van een simulatie voor mensen met een cognitieve beperking. Pas tijdens het uitvoeren van de opdracht viel de verandering in emoties op. De mascotte werd als leuk ervaren, maar er is nog ruimte voor verbetering, vooral in zichtbaarheid en herkenbaarheid.

Over het algemeen werden de banners — zoals "Terug naar Cardan", "Zet nieuw kleurenfilter aan" en "Je kijkt nu naar xx-filter" — als visueel te subtiel ervaren. Ze vielen weg in het ontwerp en leken daardoor geen knoppen te zijn. Een suggestie was om de missies ook in of naast de banners te tonen voor meer duidelijkheid.

De simulatie werd als frustrerend ervaren — en dat werd juist als positief gezien. Het riep precies het gevoel op dat het moest overbrengen: hoe verwarrend en lastig het kan zijn om kleuren te herkennen wanneer je kleurenblind bent, zeker zonder kennis van RAL-codes. Wel gaf de gebruiker aan dat het fijner zou zijn als de simulatie na een bepaald aantal uitdagingen vanzelf zou eindigen, in plaats van eindeloos door te blijven gaan.

Eindoordeel

De simulatie heeft veel potentie en weet het doel goed over te brengen. Toch zijn er nog verbeterpunten, vooral op het gebied van visuele hiërarchie, duidelijkheid van knoppen en het afronden van de ervaring.

Reflectie

Binnen onze groep hebben we duidelijke afspraken gemaakt, zoals het eerst aangeven wanneer je gaat pushen om merge conflicts te voorkomen. We werkten in een gedeeld Figma-bestand, zodat iedereen bij elkaars werk kon, ook bij afwezigheid. Jennifer nam de leiding vanwege haar voorkennis en kon Evy en mij goed begeleiden. We kozen voor een verfwinkel-simulatie met een kleurenfilterfunctie, wat voor Evy en mij een leerzaam onderdeel was.

Jennifer zette de database op en legde deze aan ons uit, wat ons hielp om zelfstandig verder te werken. Toen zij afwezig was, liepen we echter tegen problemen aan die we niet konden oplossen. Achteraf gezien was de opdracht misschien te complex, en het project te afhankelijk van één persoon. Dit neem ik mee naar volgende projecten: het is belangrijk om taken zo te verdelen dat het team ook zonder de leider kan doorwerken.

We werkten zonder duidelijke planning, meer op basis van richtlijnen. Hoewel we wisten wat we moesten doen, legden we dit nergens vast. Onze manier van communiceren werkte redelijk: we bespraken waar we mee bezig waren en wat de volgende stap was, maar dit leidde bij mij tot korte intensieve sprintjes in plaats van een constante workflow.

Voor een volgend project wil ik sterker inzetten op het gebruik van een takenmanagementsysteem, zoals Trello. Dat hebben we dit keer niet gedaan en dat is jammer — het had structuur en overzicht kunnen bieden.