Hanze - UXE Herontwerp Homepagina
Alleen geïnteresseerd in het herontwerp? Klik dan op de knop hieronder.
Deze pagina is een samenvatting van mijn verslag van UXE. Bent u geïnteresseerd in het volledige verslag? Neem dan contact met mij op!
Introductie
Deze case study beschrijft de werkzaamheden die ik heb uitgevoerd voor het vak UXE, als onderdeel van de opleiding Communication & Multimedia Design aan de Hanzehogeschool.
Voor dit vak kregen we de opdracht een herontwerp te maken van een zelfgekozen website, gebaseerd op inzichten die we opdeden uit zowel subjectieve als objectieve onderzoeksmethoden.
Deze onderzoeken heb ik samen met mijn klasgenoot Richard Postema uitgevoerd, waarna we gezamenlijk de resultaten hebben geanalyseerd. We kozen bewust voor de website van Leergeld Groningen, omdat we vooraf al meerdere potentiële verbeterpunten hadden gevonden.
Evaluatievragen
Richard en ik gingen ervan uit dat de grootste verbeterpunten lagen op het gebied van navigatie en overzichtelijkheid. Om deze aannames te bevestigen, richtten we ons tijdens het onderzoek op het beantwoorden van de volgende evaluatievragen:
- Zijn de verschillende secties van de website van Leergeld Groningen inhoudelijk overzichtelijk?
- Zijn de verschillende secties van de website van Leergeld Groningen gemakkelijk te navigeren?
Hoofddoel Website
Stichting Leergeld Groningen zet zich in om kinderen uit gezinnen met geldzorgen te ondersteunen, zodat ook zij mee kunnen doen aan alle activiteiten die voor hun leeftijdsgenoten vanzelfsprekend zijn. De stichting biedt hulp aan kinderen van 0 tot en met 17 jaar in de gemeente Groningen.
Ik doe de aanname dat het hoofddoel van deze website is om de gebruiker te begeleiden in het proces van een aanvraag doen voor een vergoeding. Dit baseer ik op het feit dat er veel nadruk ligt op de: ‘Doe een aanvraag’ knop. Deze staat namelijk in de header, in de nav bar en in de footer. Ook valt deze op met zijn felle gele kleur.
- Oude Website
- Nieuwe Website
Doelgroepen
Wij hebben onze doelgroep opgesplits in twee soorten gebruikers:
- Vrijwiligers die zich willen inzetten voor kinderen met armoede.
- Ouders en verzorgers van kinderen onder de 17 jaar met een beperkt inkomen.
Deze keuze hebben we gebaseerd op de twee hoofdacties die je kan uitvoeren op de website: Doneren en steunen & Een aanvraag doen. De informatie op de website lijkt ook gestructureerd te zijn voor deze doelgroepen.
Persona
Voor gebruikerstype twee heb ik een persona opgesteld om een duidelijker beeld te krijgen van de doelgroep. Tijdens de gebruikerstests vraag ik de deelnemers zich in te leven in de persona van Milan Braam.
Klantreis/Happy Path
Ik ben zelf in de rol van Milan gestapt en alle stappen van het aanvraagproces doorlopen. Dit heb ik verwerkt in een Flowchart.
Hierdoor kunnen we gelijk zien of er verbeteringen mogelijk zijn in de structuur van de website, en kunnen we kijken of de gebruiker afwijkt van de Happy Path tijdens de User Tests.
Onderzoeksopzet
Door verschillende subjectieve en objectieve methoden toe te passen, heb ik gestreefd naar triangulatie. Op deze manier kan ik op verschillende manieren kijken naar de evaluatievragen.
- User Test (Objectief)
- Expert Cognitive Walkthrough (Objectief)
- Explorative Interview/Expert Review (Subjectief)
- After Scenario Questionaire (Subjectief)
Achter de onderzoeksmethoden staat er of het objectieve of subjectieve gegevens oplevert. Door van beide soorten gegevens te verzamelen is de kans groter dat we goede testresultaten zullen krijgen.
Richard en ik gaan nu individueel testen, zodat we vervolgens bij de analyse onze resultaten kunnen bundelen. We houden hetzelde testprotocol aan, zodat onze resultaten zo min mogelijk zullen afwijken.
Kwantitatieve gegevens
Voorbeelden van de kwantitatieve gegevens die we hebben verzameld, afkomstig uit de prestatiemeting die ik heb uitgevoerd tijdens de User Tests:
Kwalitatieve gegevens
Voorbeelden van de kwalitatieve gegevens die we hebben verzameld, afkomstig uit de After-Scenario Questionaire:
Resultaten User Tests
Na een gezamenlijke analyse, waarbij ook de data van Richard werden meegenomen, konden we een duidelijke to-do lijst opstellen.
Informatie:
- De knop naar het ‘‘Doe een aanvraag’’ formulier is wel goed te vinden.
- Er is onduidelijkheid en verwarring bij het aanvragen van een vergoeding.
- De header geeft geen duidelijkheid over wat er op de website te vinden is.
- Het is onduidelijk hoe doneren werkt, en waar het naartoe gaat.
Navigatie:
- Het navigatiemenu bestaat volledig uit knoppen, wat erg overweldigend is voor de gebruiker.
- De layout ziet er erg rommelig uit.
- De dropdowns in het navigatiemenu werken niet op mijn laptop (niet responsief).
Leesbaarheid:
- Belangrijke informatie word overheen gekeken (Kolom met links).
- Grote hoeveelheden tekst kunnen de gebruiker een overweldigd gevoel geven.
- Veel informatie staat onnodig dubbel op de website.
- Geen visuele ondersteuning, zoals opsommingen.
- Ongebruikelijke verwoording voor categorieën Te weinig contrast tussen achtergrond en tekst op veel pagina’s.
We hebben deze punten vervolgens geprioriteerd met behulp van een puntensysteem. Daarna was het tijd om de inzichten te vertalen naar een herontwerp.
Herontwerp Leergeld Groningen
Hieronder kan u zelf het prototype ervaren dat ik heb ontworpen op basis van de inzichten uit mijn onderzoek.
Benieuwd naar mijn onderbouwingen? Blijf dan scrollen.
Hieronder de reservelink voor als de Embedded link hierboven niet werkt.
Onderbouwingen herontwerp
Elke sectie van mijn herontwerp is onderbouwd met inzichten uit mijn onderzoek. Ik heb ervoor gekozen om twee pagina’s tot in detail uit te werken: de Homepagina en de pagina met het aanvraagformulier. Deze hebben de namelijk meeste problemen.
Op deze pagina vind je alleen de onderbouwingen voor de homepagina. Geïnteresseerd in het hele verslag, met alle inzichten/ontwerpkeuzes? Neem dan contact met mij op!
Navigatiemenu
Het oude navigatiemenu heeft erg veel problemen.
- De Layout is onlogisch. Zo zit de nieuws knop onder de andere knoppen.
- De dropdown’s verdwijnen als je erover hovert.
- Het logo is verticaal uitgelijnd, waardoor de balk heel groot word en dus erg storend is.
- De zoekbalk komt alleen tevoorschijn als je een beetje naar beneden scrolled, waardoor de meeste gebruikers deze nooit zullen zien of gebruiken.
Al deze punten dragen bij aan een negatieve gebruikerservaring tijdens het navigeren van de website.
- Oud Ontwerp
Ik heb het logo horizontaal uitgelijnd waardoor het navigatiemenu minder ruimte inneemt.
De dropdownmenu’s functioneren nu correct en het kopje ‘Alles over aanvragen’ is aangepast naar ‘Aanvraaginfo’ om alles op één regel te laten passen.
Daarnaast heb ik een nieuwe functionaliteit toegevoegd aan de zoekbalk: bij een klik op het icoon klapt de balk volledig uit. Ik doe de aanname dat dit het gebruik stimuleert, maar om dit zeker te weten zou ik het moeten testen. De ‘Doe een Aanvraag’-knop bleef ongewijzigd, omdat deze al goed opvalt en functioneert zoals gewenst.
- Nieuw Ontwerp
Header Sectie
Er is veel verbetering mogelijk bij de oude header sectie.
- Zelfs als je het navigatiemenu hebt aangepast, zijn er alsnog heel veel knoppen (CTA’s).
- De afbeelding van de twee kinderen leidt af (Gaze-Principle)
- Deze paarse knoppen op een paarse achtergrond hebben niet genoeg contrast.
- De categorieën (Wie kunnen aanvragen, Hoe kun je aanvragen en wat kun je aanvragen) lijken te veel op elkaar qua formulering, wat ten koste gaat van de leesbaarheid.
- De gebruiker word niet geïnformeerd over wat je op de website kan vinden.
Punt 2 heeft wellicht wat meer toelichting nodig. Uit bronnenonderzoek (zie bron 1 & 2) blijkt dat mensen van nature de neiging hebben om de blik van anderen te volgen. Dit fenomeen staat bekend als het ‘Gaze Principle’. Het is een instinctieve reactie: wanneer iemand naar links kijkt, zijn wij geneigd automatisch zijn of haar blikrichting te volgen en ook naar links te kijken.
Op de oude website kijken de twee personen je recht aan. Ons instinct zegt dan: terugkijken. Maar daardoor gaat de aandacht weg van wat echt belangrijk is, namelijk de info en call-to-actions in de header.
Bron 1: Hype4 Academy. (z.d.). The Gaze Principle. van https://hype4.academy/articles/design/the-gaze-principle
Bron 2: Malewicz, M. (2024, 17 december). Your brain HATES these websites [Video]. YouTube. https://www.youtube.com/watch?v=nWbBZPjev_0 (zie 5:33)
- Oud Ontwerp
In mijn herontwerp heb ik me gericht op het versimpelen van de header en informeren van de gebruiker.
Ik paste het Gaze-principe toe door de achtergrondafbeelding te vervangen met een minder afleidende stockfoto.
De header bevat nu een titel en omschrijving die de gebruiker direct informeren over de inhoud van de website, met grotendeels tekst die ik rechtstreeks van de oude website heb gepakt.
De tekststructuur fungeert als een visuele trechter die leidt naar de Call-to-Action, waarvan ik de werking zo transparant mogelijk heb gemaakt. Deze CTA zou in een volledig ontwerp leiden naar de ‘’Welke vergoedingen zijn er?’’ pagina. Deze pagina hoeft niet herontworpen te worden volgens de gegevens uit mijn onderzoek, en is dus niet aanwezig in mijn prototype.
- Nieuw Ontwerp
Sectie 2 en 3
Op de huidige website van LeergeldGroningen gaat het van de header naar een sectie met ‘’Succes Stories’’ (Deze kinderen maakten we al blij). Hier staan twee afbeeldingen en een Call-To-Action die eigenlijk niks doet. Tijdens de Expert Cognitive Walkthrough met Rene probeerde de gebruiker op de afbeeldingen te klikken voor meer informatie, maar dat deed niks.
De sectie hieronder is eigenlijk wel heel duidelijk. Het contrast tussen de tekst en de achtergrond werkt goed, de tekst heeft ook daadwerkelijk goede informatie en er is maar één Call-To-Action.
- Oud Ontwerp
Het ontwerp van sectie twee heb ik grotendeels behouden, maar ik heb opnieuw het Gaze-principe toegepast. Daarnaast heb ik een aanvullende tekst geplaatst die voortbouwt op de info uit de header.
In de derde sectie zie je nu die succesverhalen die eerst in sectie twee zaten. Deze heb ik nu in cards verwerkt, met een duidelijke Call-to-Action eronder in de vorm van een Button. Deze Call-To-Action leidt je naar de pagina met het aanmeldformulier.
Ik heb drie cards uitgewerkt, elk met een andere vergoeding. Op deze manier zien mensen ook gelijk wat een aantal van de mogelijkheden zijn met LeergeldGroningen.
- Nieuw Ontwerp
Sectie 4 en Footer
Deze secties ontvingen geen negatieve feedback; hun eenvoud en overzichtelijkheid werden juist als positief ervaren.
De footer werd tijdens de gebruikerstest zelfs expliciet geprezen. De plaatsing van de ‘Doe een Aanvraag’-knop werd als sterk punt benoemd door de gebruikers.
- Oud Ontwerp
Deze secties ontvingen eigenlijk geen negatieve feedback.
De footer werd tijdens de gebruikerstest zelfs expliciet geprezen. De plaatsing van de ‘Doe een Aanvraag’-knop werd als sterk punt benoemd door de gebruikers.
- Nieuw Ontwerp
Ik heb de kleuren aangepast voor een professionelere en minder overweldigende gebruikerservaring. De Call-to-Actions springen er nu ook meer uit.
Ook heb ik de afbeelding vervangen voor een tekst, aangezien de afbeelding niks toevoegd aan deze sectie.
Conclusie
Wanneer ik het oude en het nieuwe ontwerp van de homepagina met elkaar vergelijk, ben ik ervan overtuigd dat mijn versie een aanzienlijke verbetering is ten opzichte van de oorspronkelijke website. Bijna elke ontwerpkeuze is onderbouwd aan de hand van onderzoek, waardoor ik heel veel vertrouwen heb in mijn versie van de homepagina van leergeldgroningen.nl.
Door de huisstijl anders in te zetten straalt de website meer professionaliteit uit en wordt de gebruikerservaring aanzienlijk rustiger en minder overweldigend.
Mijn herontwerp legt veel meer de nadruk op het duidelijk informeren van de gebruiker over wat Leergeld Groningen doet. Hierdoor weet de bezoeker sneller of de website relevant is voor zijn of haar situatie, wat de kans vergroot dat diegene op de site blijft en verder klikt.
